开发者社区> 熊猫ewall> 正文
阿里云
为了无法计算的价值
打开APP
阿里云APP内打开

Ajax

简介: Ajax是无需刷新页面就能够从服务器取得数据的一种方法。 1、XMLHttpRequest对象 各浏览器(包括ie7+)都支持原生的XHR对象,在这些浏览器中创建XHR对象可以: var xhr=new XMLHttpRequest(); ps:个人觉得现在写一个跨浏览器兼容的函数方法没必要,兼容做到ie7+就够了 2、XHR的用法 ①open( )方法 接受三个参数:第一个参数是要发送的请求的类型(“get”、“post”等);第二个参数是请求的URL(文件);第三个参数表示是否(true/false)异步发送请求的布尔值。
+关注继续查看

Ajax是无需刷新页面就能够从服务器取得数据的一种方法。

1、XMLHttpRequest对象
各浏览器(包括ie7+)都支持原生的XHR对象,在这些浏览器中创建XHR对象可以:

var xhr=new XMLHttpRequest();

ps:个人觉得现在写一个跨浏览器兼容的函数方法没必要,兼容做到ie7+就够了

2、XHR的用法
①open( )方法
接受三个参数:第一个参数是要发送的请求的类型(“get”、“post”等);第二个参数是请求的URL(文件);第三个参数表示是否(true/false)异步发送请求的布尔值。

var xhr=new XMLHttpRequest();
xhr.open("get","example.txt",false);

②send( )方法
要发送特定的请求,必须像下面这样调用send( )方法

var xhr=new XMLHttpRequest();
xhr.open("get","example.txt",false);
xhr.send(null);

    调用send以后,请求就会被分派到服务器,且由于这次请求是同步的(false),所以js代码会等到服务器响应之后再继续执行。
    在收到响应以后,响应的数据就会自动填入到XHR对象的几个属性中去。

③XHR对象的属性

  • responseText:作为响应主体返回的文本。
  • responseXML:如果响应类型是“text/xml”或“application/xml”,这个属性将包含这响应数据的XML DOM文档。
  • status:响应的http状态。
  • statusText:http状态说明
var xhr=new XMLHttpRequest();
xhr.open("get","./example.txt",false);
xhr.send(null);
if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
    alert(xhr.responseText);
}else{
    alert("Request was unsuccessful:"+xhr.status);
}

ps:chrome浏览器不支持本地的异步请求,所以本地测试请换其他浏览器

  • readyState:表示请求/响应过程的当前活动阶段。这个属性可取的值如下:
    0:未初始化。尚未调用open方法。
    1:启动。已经调用open方法,但尚未调用send方法。
    2:发送。已经调用send方法,但尚未接受到响应。
    3:接受。已经接受到部分响应数据。
    4:完成。已经接受到全部响应数据,而且已经可以在客户端使用了。
    只要readyState属性的值由一个值变成另一个值,都会触发一次readystatechange事件;可以利用这个事件来检测每次状态变化后readyState的值
var xhr=new XMLHttpRequest();
xhr.onreadystatechange=function(){
    if(xhr.readyState == 4){
        if(xhr.status>=200 && xhr.status<300 || xhr.status==304){
            alert(xhr.responseText);
        }else{
            alert("Request was unsuccessful:"+xhr.status);
        }
    }
};
xhr.open("get","example.txt",true);
xhr.send(null);

版权声明:本文内容由阿里云实名注册用户自发贡献,版权归原作者所有,阿里云开发者社区不拥有其著作权,亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容,填写侵权投诉表单进行举报,一经查实,本社区将立刻删除涉嫌侵权内容。

相关文章
ajax traditional
代码如下: $(function () { var s = Array("1", "2", "3"); var r = 213123132; $.
499 0
01、什么是ajax?
<p><span style="font-size: 14pt;">什么是ajax?</span><br><span style="font-size: 14pt;">1、ajax(asynchronouse javascript and xml)异步的javascript和xml</span><br><span style="font-size: 14pt;">2、是7种技术的综合,它包含了
595 0
ie ajax
引用:http://zhidao.baidu.com/question/170483500.html 使用了PROTOTYPE的AJAX对象来实现!
397 0
AJAX 介绍
引用:http://tonysmith.iteye.com/blog/908997 1、ajax技术的背景         不可否认,ajax技术的流行得益于google的大力推广,正是由于google earth、google suggest以及gmail等对ajax技术的广泛应用,催生了ajax的流行。
667 0
掌握 Ajax 系列
掌握 Ajax 系列 2007 年 8 月 28 号 更新   Ajax 无疑是最流行的新 Web 技术,这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。
472 0
+关注
熊猫ewall
技术高手并无佛光普照,只是一群优秀的手艺人 技术博文:https://www.jianshu.com/u/9d946428f053
文章
问答
文章排行榜
最热
最新
相关电子书
更多
低代码开发师(初级)实战教程
立即下载
阿里巴巴DevOps 最佳实践手册
立即下载
冬季实战营第三期:MySQL数据库进阶实战
立即下载