ajax基础

李子栗子梨
194 阅读8分钟

简介

1.Asynchronous JavaScript and XML 通过JavaScript的异步通信，从服务器中获取XML文档，从中获取数据，在更新当前页面的对应部分，而不刷新整个页面。

2.通过原生的XMLHttpRequest对象发出http请求，获取服务器返回的数据，再进行相应的处理。

所以ajax包含下面几个步骤

1）创建XMLHttpRequest对象 2）发送http请求 3）接受服务器返回的数据 4）进行相应处理

3.XMLHttpRequest对象是AJAX的主要接口，用于浏览器和服务器之间的通信，尽管他的名字里面有XML和Http，但是可以使用多种协议（比如file和ftp），发送任何格式的数据（包括字符和二进制）

XMLHttpRequest对象简单用法

1.XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例，他本身是没有任何参数。

let xhr=new XMLHttpRequest();

2.制定创建http请求的一些细节

xhr.open('GET','https://juejin.im/editor/drafts/5f1fc5e0f265da22f1474ce2',true)
// GET表示通过get方式获得数据，第二个参数表示地址，第三个参数表示通过异步的方式发送请求

3.制定回调函数

xhr.onreadystatechange = handlestagechange;
function handlestagechange () {
    ...
}

在XMLHttpRequest对象的状态发生变化的时候，会调用这个函数。

tips：readysatge存有的XMLHttpRequest的5种状态\color{red}{tips：}\color{green}{readysatge存有的XMLHttpRequest的5种状态}

1）0:请求未初始化

2）1：服务器连接已建立

3）2:请求已接收

4）3:请求处理中

5）4：请求已完成，且响应已就绪

4.发出请求

xhr.send(null);
//发出请求,参数为null，表示发出请求的时候，不带数据体，如果是post请求，则必须带上数据体

tips：同源政策\color{red}{tips：}\color{green}{同源政策}

5.XMLHttpRequest对象使用的一个完整例子

let xhr=new XMLHttpRequest();
xhr.open('GET','https://juejin.im/editor/drafts/5f1fc5e0f265da22f1474ce2',true);
xhr.onreadystatechange=function (){
    if(xhr.readyState===4){
           if(xhr.status===200){
               console.log(xhr.responseText);
           }else{
               console.log(xhr.statusText);
           }
        }
    }
}

xhr.onerror=function (){
    console.log(xhr.statusText);
}

xhr.open('GET','https://juejin.im/editor/drafts/5f1fc5e0f265da22f1474ce2',true);

xhr.send(null);

XMLHttpRequest的实例属性

1.XMLHttpRequest.readyState 返回一个整数，可读，表示实例对象的状态

1）0:请求未初始化，实例已经生成，但是open()方法还未调用

2）1：服务器连接已建立，open()方法已经执行，但是send()方法未执行，但是仍然可以调用setRequestHeader()方法，设置http请求的头信息

3）2:请求已接收，表示实例的send()方法已经调用，并且服务器返回的头信息和状态码已经收到

4）3:请求处理中，表示正在接收服务器传来的数据体（body部分），这时，如果返回的responseType属性等于字符串或者空字符，那这个时候的responseText属性会包含返回的信息

5）4：请求已完成，且响应已就绪，服务器返回的数据已经接收完成或者本次接收已经失败

总：每当XMLHttpRequest的状态发生变化时，readyState的值都会发生变化，只有readyState的值等于4的时候，才表示http请求完成了，否则，都是在进行中

2.XMLHttpRequest.onReadyStateChange XMLHttpRequest.onReadyStateChange属性指向一个监听函数，当XMLHttpRequest发生变化的时候（readyStateChange事件发生的时候/readyState的值发生变化），就会执行这个属性。

3.XMLHttpRequest.response http返回的数据体（即HTTP返回的body部分），可以是任何数据类型，比如二进制，对象，字符串等类型，具体是由XMLHttpRequest.responseType决定，该属性只读。

如果本次请求不成功，或者数据不完整，那么此属性的值为null，但是如果responseText为text或者字符串，那在http请求未结束（readyState===3）的阶段，response属性包含返回的部分数据。

4.XMLHttpRequest.responseType

服务器返回数据的类型，可写，在open（）之后，在send（）之前，当不写的时候，默认是text类型

1）''等同于text：表示服务器返回文本数据

2）arraybuffer：表示返回二进制的数组

3）blob：blob对象，表示返回二进制对象

4）document：document对象，表示服务器返回一个文档对象

5）json：JSON对象

6）text:字符串

在以上几种类型中，text类型适用于大多数情况，而且直接处理文本也比较方便；document适用于返回HTML/XML文档的情况，这意味着，对于那些打开CROS的网站，可以直接使用AJAX请求网页，而不用对返回的HTML进行解析，直接对获取的数据进行DOM操作；对于图片/文件，使用blob类型比较合适。

比如blob类型

let xhr = new XMLHttpRequest();
xhr.open('GET','https://juejin.im/editor/drafts/5f1fc5e0f265da22f1474ce2',true);
 xhr.responseType='Blob';
xhr.onload = function (){
    if(xhr.readyStatus===4){
        if(xhr.status===200){
            let blob=new Blob([xhr.response],{type:'image/png'});
            //或者
            let blob = xhr.response;
        }
    }
}
xhr.send(null);

比如：arrayBuffer类型

let xhr = new XMLHttpRequest();
xhr.open('GET','https://juejin.im/editor/drafts/5f1fc5e0f265da22f1474ce2',true);
 xhr.responseType='Blob';
xhr.onload = function (){
    if(xhr.readyStatus===4){
        if(xhr.status===200){
            let uint8Array = new uint8Array(xhr.response);
            for (var i = 0, len = uInt8Array.length; i < len; ++i) {
               // var byte = uInt8Array[i];
           }
        }
    }
}

如果返回的类型是JSON类型，浏览器会自动对数据进行JSON.parse()方法，也就是说xhr.response()得到的是JSON对象

tips：newBlob()\color{red}{tips：}\color{green}{new Blob()}

newuint8Array()\color{green}{new uint8Array()}

5.XMLHttpRequest.responseText

返回从服务器中接收的字符串，只读，只有在http请求完成的时候，才可以接收到全部服务器返回的数据

var xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);

xhr.responseType = 'text';
xhr.onload = function () {
 if (xhr.readyState === 4 && xhr.status === 200) {
   console.log(xhr.responseText);
 }
};

xhr.send(null);

6.XMLHttpRequest.responseXML 返回从服务器中接收到的HTML/XML文档对象，只读，如果本次请求没有成功或者返回来的数据不能解析为XML/HTML，则该属性为null。

该属性生效的前提是HTTP的Content-Type头信息是text/xml或application/xml，在发送请求之前，requestType=document，当头信息不等于text/xml和application/xml的时候，想从responseXML拿到数据（既把数据按照DOM形式解析）那么需要使用xhr.overrideMimeType()方法，强制进行XML转化。

直接解析后的文档DOM树

var xhr = new XMLHttpRequest();
xhr.open('GET', '/server', true);

xhr.responseType = 'document';
xhr.overrideMimeType('text/xml');

xhr.onload = function () {
 if (xhr.readyState === 4 && xhr.status === 200) {
   console.log(xhr.responseXML);
 }
};

xhr.send(null);

7.XMLHttpRequest.responseURL

字符串，发送数据的服务器的网址

var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://example.com/test', true);
xhr.onload = function () {
 // 返回 http://example.com/test
 console.log(xhr.responseURL);
};
xhr.send(null);

这个属性的值，不一定是open方法内的网址，如果服务器端发生了跳转，那返回的是实际返回数据的服务器的网址。另外如果，原服务器端有锚点，该属性会把锚点剥离。

8.XMLHttpRequest.status 表示服务器返回的HTTP状态码，如果状态成功，则值为200，没有返回状态码，则默认是200，请求发出去之前，这个值为0，返回的是一个整数，只读。

200:OK，访问正常 301:Moved Permanently，永久移动 302:Moved temporarily，暂时移动 304:Not Modified，未修改 307:Temporary Redirect，暂时重定向 401:Unauthorized，未授权 403:Forbidden，禁止访问 404:Not Found，未发现指定网址 500:Internal Server Error，服务器发生错误

基本上，值

9.XMLHttpRequest.statusText

属性返回一个字符串，表示服务器发送的状态提示，不同于status属性，该属性包含整个状态信息，比如‘OK’和‘Not Found’，在请求发送之前（即在调open()方法之前），该属性的值是空字符串，如果状态没有返回状态提示，该属性的值默认为‘OK’，该属性为只读属性

10.XMLHttpRequest.timeout和XMLHttpRequestEventTarget.ontimeout

timeout属性返回一个整数，表示多少毫秒以后，如果请求仍然没有得到结果，就会自动终止。如果该属性等于0，表示没有时间界限。

XMLHttpRequestEvenntTarget.ontimeout

用于设置一个监听函数，如果发生timeout事件，则会执行这个监听函数

11.事件监听属性

XMLHttpRequest对象可以对以下事件指定监听函数

  • onloadstart : http请求发出的监听函数
  • onprogress：正在发送和加载数据的监听函数
  • onabort：请求终止事件
  • onerror：请求失败的监听事件
  • onload：请求成功完成的监听事件
  • ontimeout：用户指定的时限超过了，请求还未完成的监听函数
  • onloadend：请求完成，不管成功还是失败

progress事件的监听函数是一个事件对象参数，该对象有3个参数：loaded属性，返回已经传输的数据量，total属性返回总的数据量，lengthComputable属性返回一个布尔值，表示加载的进度是否可以计算，所有这些的监听函数离 main，只有progress事件的监听函数有参数，其他函数都没有参数。

注意：如果发生网络错误，onerror事件无法获取报错信息，也就是说，坑没有错误对象，所以这样只能吸纳事报错的提示。

12.XMLHttpRequest.withCredentials

XMLHttpRequest.withCredentials属性的返回是一个布尔值，表示跨域请求的时候，用户信息（比如cookie和认证的HTTP头信息）是够会包含在请求之中，默认为false，即向example.come发出开于请求时，不会发送example.com设置在本机上的cookie。

如果需要跨域AJAX请求发送Cookie，需要withCredentials属性，设为true，注意：同源的请求，不需要设置这个属性。

var xhr = new XMLHttpRequest();
xhr.open('GET','https://juejin.im/editor/drafts/6854812682910957576',true);
xhr.withCredentials = true;
xhr.send(null);

为了让这个属性生效，要求服务器必须显式的返回Access-Control-Allow-Credentials这个头信息。

withCredentials属性打开的话，跨域请求不仅会发送cookies，还会设置远程主机指定的cookie。反之也成立，如果withCredentials属性没有打开，那么跨域的ajax

avatar
文章
阅读
粉丝