AJAX
能够向服务器请求额外的数据而无须卸载页面,会带来更好的用户体验。

1、在使用xhr对象时,要调用都第一个方法就是open(),它接收3个参数:要发送的请求的类型(get,post等)、请求的url和表示
是否异步发送请求的布尔值。

xhr.open('get', 'example.php', false);

调用open()方法并不会真正发送请求,而只是启动一个请求以备发送,要发送特定的请求,必须像下面这样调用send()方法:

xhr.open('get', 'example.txt', false);
xhr.send(null);

*:只能向同一个域中使用相同端口和协议的url发送请求,如果url与启动请求的页面有任何差别,都会引发安全错误

2、调用send()之后,请求就会分派到服务器。等到服务器响应之后再继续执行。在收到响应后,响应到数据会自动填充xhr对象到属性,
相关的属性简介如下:

responseText:作为响应主体被返回的文本。
responseXML:如果响应的内容类型是'text/xml'或'application/xml',这个属性中将保存包含着响应数据的xml dom文档
status:响应的http状态
statusText:http状态的说明。

通过检测status来决定下一步的操作,不要依赖statusText,因为后者的跨浏览器使用时不太可靠

3、多数情况下,我们还是要发送异步请求,才能让js继续执行而不必等待响应。此时,可以检测xhr对象的readyState属性,该属性
表示请求/响应过程的当前活动阶段。

0:未初始化。尚未调用open()方法
1:启动。已经调用open()方法,但尚未调用send()方法。
2:发送。已经调用了send()方法,但未接收到响应。
3:接收。已经接收到部分响应数据
4:完成。已经接收到全部响应数据,而且已经可以在客户端使用了。

只要readyState属性的值由一个值变成另一个值,都会触发一次readystatechange事件。利用这个事件来检测每次状态变化后的state的值。通常我们只对readyState为4的阶段感兴趣,因为此时所有数据都已经就绪。
不过,必须在调用open()之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性。

function createXHR(){
if(typeof XMLHttpRequest !="undefined"){
return new XMLHttpRequest();
}else if(typeof ActiveXObject !="undefined"){
if(typeof arguments.callee.activeXString !="string"){
var versions = ["MSXML2.XMLHttp.6.0","MSXML2.XMLHttp.3.0","MSXML2.XMLHttp"];
var i,len;
for (i=0,len=versions.length;i<len;i++){
try{
new ActiveXObject(versions[i]);
arguments.callee.activeXString = versions[i];
break;
}catch(ex){}
}
}
return new ActiveXObject(arguments.callee.activeXString);
}else{
throw new Error("No XHR object available");
}
} var xhr = createXHR();
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);
}
}
} //读取example文本
xhr.open("get","example.txt",true);
xhr.send(null);

另外,在接收到响应之前还可以调用abort()方法来取消异步请求

xhr.abort()

Ajax(一):XHR的用法的更多相关文章

  1. jQuery的Ajax操作小结——$.ajax和$.getJSON等用法小结

    一.$.ajax用法与举例 jQuery.ajax(url,[settings])     ——返回值:XMLHttpRequest 通过 HTTP 请求加载远程数据,这个是jQuery 的底层 AJ ...

  2. 关于Jquery中ajax方法data参数用法的总结

    data 发送到服务器的数据.将自动转换为请求字符串格式.GET 请求中将附加在 URL 后.查看 processData 选项说明以禁止此自动转换.必须为 Key/Value 格式.如果为数组,jQ ...

  3. Ajax原生XHR对象

    前端学了有一段时间了,在项目中我通常使用的都是jQuery封装好的Ajax函数($.ajax.$.get.$.post),使用非常的简单方便,但为了更清楚的了解Ajax,需要学习原生xhr对象.   ...

  4. Ajax笔记 XHR XMLHttpRequest

    XMLHttpRequest    xhr    XmlHttpRequest var request ;    if(Windows.XMLHttpRequest)    {    request ...

  5. Ajax框架---dwr的用法

    通常使用Ajax时用的都是jQuery框架,现在公司的框架里用的都是dwr.我觉得dwr和jQuery中的ajax用法差不多,看起来也很像. 一.简介 百度百科上对dwr的描述: DWR采取了一个类似 ...

  6. JavaScript封装Ajax工具函数及jQuery中的ajax,xhr在IE的兼容

    封装ajax工具函数 首先要思考:1.为什么要封装它?提高开发效率2.把一些不确定的情况考虑在其中 a. 请求方式 b. 请求地址 c. 是否异步 d. 发送参数 e. 成功处理 f. 失败处理3.确 ...

  7. 【转】关于Jquery中ajax方法data参数用法的总结

    $.ajax({ type: "POST", url: "some.php", data: "name=John&location=Bosto ...

  8. 转:AJAX中xhr对象详解

    XJAX ,并不是一种新技术的诞生.它实际上代表的是几项技术按一定的方式组合在一在同共的协作中发挥各自的作用. 它包括: 使用XHTML和CSS标准化呈现: 使用DOM实现动态显示和交互: 使用XML ...

  9. $.ajax() ,$.post(),$.get() 的用法

    在编写代码的过程中,我们会用到一些的需要局部刷新,而且需要数据传递的情况,我们通常是有$.ajax() ,$.post(),$.get() 这三种方式. $.ajax()方法通过 HTTP 请求加载远 ...

随机推荐

  1. SQL server数据库端口访问法

    最近数据库连接,也是无意中发现了这个问题,数据库可根据端口来连接 我用的是sql2014测试的,在安装其他程序是默认安装了sql(sql的tcp/ip端口为xxx),服务也不相同,但是由于比较不全,我 ...

  2. Linux UDEV提权过程

    1.下载攻击脚本 [test@H0f ~]$ wget http://www.extmail .org/source/exploit-udev-8478 --2018-04-02 01:21:00-- ...

  3. Spring集成Quartz的3种方式

    1.使用xml配置方式 Maven依赖 <properties> <!-- spring版本号 --> <spring.version>4.2.2.RELEASE& ...

  4. CentOS 7 修改root 密码

    环境: 1.重启系统在加载内核的地方按e,编辑启动脚本 2.将ro crashkernel = auto 所在地的 ro 替换为 rw init=/sysroot/bin/sh 3.修改完成后用Ctr ...

  5. Murano Weekly Meeting 2015.10.20

    Meeting time: 2015.October.20th 1:00~2:00 Chairperson:  Serg Melikyan, PTL from Mirantis Meeting sum ...

  6. Murano Weekly Meeting 2015.08.18

    Meeting time: 2015.August.18th 1:00~2:00 Chairperson:  Nikolay Starodubtsev, from Mirantis Meeting s ...

  7. (转)Awk使用案例总结(运维必会)

    以下知识点可能有不对之处,请参考最新Awk学习文章:http://lizhenliang.blog.51cto.com/7876557/1892112 原文:http://blog.51cto.com ...

  8. (转)Nmap命令的29个实用范例

    Nmap命令的29个实用范例 原文:http://os.51cto.com/art/201401/428152.htm Nmap即网络映射器对Linux系统/网络管理员来说是一个开源且非常通用的工具. ...

  9. java代码混淆

    仅做记录之用. java代码可以反编译,因此有时候要保护自己的知识产权还真得费点心思,一般来说有三个思路: 1.将class文件加密,这个是最安全的,但也费事儿,因为要重写classloader来解密 ...

  10. 警告: [SetContextPropertiesRule]{Context} Setting property 'source' to 'org.eclipse.jst.jee.server:esignmanage' did not find a matching property.解决

    1.开发环境: 环境:myeclipse2015+tomcat7+win10 2.异常: 偶尔在部署项目的时候回发现tomcat7部署后配置文件按照路径居然找不到自己的项目.httP://localh ...