xhr

作者: wuxuan94 | 来源:发表于2017-11-23 16:30 被阅读0次

XMLHttpRequest对象(简称XHR)是ajax技术的核心,ajax可以无刷新更新页面得益于xhr。
一、创建

var xhr = new XMLHttpRequest();

二、发送请求
open()

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

1.第一个参数指定请求方式
2.第二个参数url
3.第三个参数表示是否同步,默认为true(异步)
4.如果请求一个受密码保护的URL,把用于认证的用户名和密码作为第4和第5个参数传递给open()方法

send()
如果是GET方法,send()方法无参数,或参数为null;如果是POST方法,send()方法的参数为要发送的数据
调用send()方法后,请求被分派到服务器

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

三、接收响应

responseText: 作为响应主体被返回的文本(文本形式)
responseXML: 如果响应的内容类型是'text/xml'或'application/xml',这个属性中将保存着响应数据的XML DOM文档(document形式)
status: HTTP状态码(数字形式)
statusText: HTTP状态说明(文本形式)

四、同步
如果接受的是同步响应,则需要将open()方法的第三个参数设置为false,那么send()方法将阻塞直到请求完成。一旦send()返回,仅需要检查XHR对象的status和responseText属性即可。
同步请求是吸引人的,但应该避免使用它们。客户端javascript是单线程的,当send()方法阻塞时,它通常会导致整个浏览器UI冻结。如果连接的服务器响应慢,那么用户的浏览器将冻结。

五、异步
如果需要接收的是异步响应,这就需要检测XHR对象的readyState属性,该属性表示请求/响应过程的当前活动阶段。

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

理论上,只要readyState属性值由一个值变成另一个值,都会触发一次readystatechange事件。可以利用这个事件来检测每次状态变化后readyState的值。

var xhr;
if(window.XMLHttpRequest){
    xhr = new XMLHttpRequest();
}else{
    xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//异步接受响应
xhr.onreadystatechange = function(){
    if(xhr.readyState == 4){
        if(xhr.status == 200){
            //实际操作
            result.innerHTML += xhr.responseText;
        }
    }
}
//发送请求
xhr.open('get','message.xml',true);
xhr.send();

相关文章

  • AJax 第一天

    1,创建一个xhr对象var xhr=new XMLHttpRequest2,监听xhr状态的改变xhr.onre...

  • 简单的分析下XMLHttpRequest对象

    创建xhr对象 关于xhr对象属性 追踪xhr发送ajax的状态xhr.readyState对象即是当前请求对象的...

  • XMLHttpRequest

    事件 xhr.onabort() 资源加载中断xhr.onerror() 发生错误xhr.onload() ...

  • Ajax、JSONP常用句式

    xhr=new XMLHttpRequest;}xhr.onreadystatechange=function()...

  • xhr

    XMLHttpRequest对象(简称XHR)是ajax技术的核心,ajax可以无刷新更新页面得益于xhr。一、创...

  • XHR

    varXHRRequest;//创建XHRfunction createXHR(){ if(typeof XML...

  • ajax如何实现?readyState五种状态的含义。

    // 创建连接let xhr = null;if ( window.XMLHttpRequest ){xhr = ...

  • XMLHttpRequest

    var xhr= new XMLHttpRequest(), xhr.onreadystatechange=fun...

  • 【javascript】Ajax 与 Comet

    1、XMLHttpRequest 对象 在浏览器中创建XHR 对象 1.1 XHR 的用法 在使用XHR 对象时,...

  • js如何取消异步请求

    本文总结了原生XHR、jquery、axios取消异步请求的方法。 XHR 对于原生XHR对象来说,取消的ajax...

网友评论

    本文标题:xhr

    本文链接:https://www.haomeiwen.com/subject/kkuovxtx.html