【JavaScript】Ajax

[swiftwind0405]

简介

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

Ajax 是浏览器提供的一套方法，可以让用户在不刷新页面的情况下更新用户数据，提高用户体验。也就是在用户浏览网页的同时局部跟新页面的数据。

Ajax 请求数据流程最核心的依赖是浏览器提供的 XMLHttpRequest 对象，它扮演的角色相当于秘书，使得浏览器可以发出 HTTP 请求与接收 HTTP 响应。浏览器接着做其他事情，等收到 XHR 返回来的数据再渲染页面。

XMLHttpRequest

XMLHttpRequest 对象用于在后台与服务器交换数据。

XMLHttpRequest 对象的作用：

• 在不重新加载页面的情况下更新网页
• 在页面已加载后从服务器请求数据
• 在页面已加载后从服务器接收数据

在 http 请求与响应的过程中，无论是请求参数还是响应内容，如果是对象类型，最终都会被转换为对象字符串进行传输。我们可以用json相关方法对字符串进行转换json对象，便于获取内容，便于浏览器渲染页面。

一个 Ajax 的基础使用：

        var xhr = new XMLHttpRequest();
        xhr.open('post','www.xxx.com',true)
        // 接收返回值
        xhr.onreadystatechange = function(){
            if(xhr.readyState === 4 ){
                if(xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){
                    console.log(xhr.responseText);
                }
            }
        }
        // 处理请求参数
        postData = {"name1":"value1","name2":"value2"};
        postData = (function(value){
        var dataString = "";
        for(var key in value){
             dataString += key+"="+value[key]+"&";
        };
          return dataString;
        }(postData));
        // 设置请求头
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        // 异常处理
        xhr.onerror = function() {
           console.log('Network request failed')
        }
        // 跨域携带cookie
        xhr.withCredentials = true;
        // 发出请求
        xhr.send(postData);

XMLHttpRequest 对象常用的函数、属性、事件

函数

open
用于初始化一个请求，用法：

xhr.open(method, url, async);

• method：请求方式，如 get、post
• url：请求的 url
• async：是否为异步请求

send
用于发送HTTP请求，即调用该方法后HTTP请求才会被真正发出，用法：

xhr.send(param)

• param：http 请求的参数，可以为 string、Blob 等类型。

abort
用于终止一个 ajax 请求，调用此方法后 readyState 将被设置为 0，用法：

xhr.abort()

setRequestHeader
用于设置HTTP请求头，此方法必须在 open() 方法和 send() 之间调用，用法：

xhr.setRequestHeader(header, value);

getResponseHeader
用于获取http返回头，如果在返回头中有多个一样的名称，那么返回的值就会是用逗号和空格将值分隔的字符串，用法：

var header = xhr.getResponseHeader(name);

属性

readyState

用来标识当前XMLHttpRequest对象所处的状态，XMLHttpRequest对象总是位于下列状态中的一个：

值	状态	描述
0	UNSENT	代理被创建，但尚未调用 open() 方法。
1	OPENED	open() 方法已经被调用。
2	HEADERS_RECEIVED	send() 方法已经被调用，并且头部和状态已经可获得。
3	LOADING	下载中； responseText 属性已经包含部分数据。
4	DONE	下载操作已完成。

status

表示http请求的状态, 初始值为0。如果服务器没有显式地指定状态码, 那么status将被设置为默认值, 即200。

responseType

表示响应的数据类型，并允许我们手动设置，如果为空，默认为text类型，可以有下面的取值：

值	描述
""	将 responseType 设为空字符串与设置为 "text" 相同， 是默认类型 （实际上是
DOMString）。
"arraybuffer"	response 是一个包含二进制数据的 JavaScript ArrayBuffer 。
"blob"	response 是一个包含二进制数据的 Blob 对象 。
"document"	response 是一个 HTML Document 或 XML XMLDocument，这取决于接收到的数据的 MIME 类型。
"json"	response 是一个 JavaScript 对象。这个对象是通过将接收到的数据类型视为 JSON 解析得到的。
"text"	response 是包含在 DOMString 对象中的文本。

response

返回响应的正文，返回的类型由上面的responseType决定。

withCredentials

ajax请求默认会携带同源请求的cookie，而跨域请求则不会携带cookie，设置xhr的withCredentials的属性为true将允许携带跨域cookie。

事件回调

onreadystatechange

 xhr.onreadystatechange = callback;

当readyState属性发生变化时，callback会被触发。

onloadstart

 xhr.onloadstart = callback;

在ajax请求发送之前（readyState==1后, readyState==2前），callback会被触发。

onprogress

xhr.onprogress = function(event){
  console.log(event.loaded / event.total);
}

回调函数可以获取资源总大小total，已经加载的资源大小loaded，用这两个值可以计算加载进度。

onload

 xhr.onload = callback;

当一个资源及其依赖资源已完成加载时，将触发callback，通常我们会在onload事件中处理返回值。

异常处理

onerror

 xhr.onerror = callback;

当ajax资源加载失败时会触发callback。

ontimeout

 xhr.ontimeout = callback;

当进度由于预定时间到期而终止时，会触发callback，超时时间可使用timeout属性进行设置。

请求参数的格式

户端向服务器端传递请求参数的格式有两种。一种是很熟悉的属性名:属性值&属性名：属性值。另外一种就是json数据格式。
不同的请求参数格式在setRequestHeader中的Content-type属性值不一样。

application/x-www-form-urlencoded

格式形式：name=zhangsan&age=20&sex=男
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

application/json

 格式形式：{name: 'zhangsan', age: '20', sex: '男'}
 xhr.setRequestHeader('Content-Type', 'application/json');

参考文档

• hello，Ajax（零基础入门篇） - 掘金
• XMLHttpRequest - MDN
• 你真的会使用XMLHttpRequest吗？
• ajax相关完整知识 - 张亚涛 - SegmentFault 思否
• Ajax知识体系大梳理
• Ajax实战总结——用原生JavaScript代码封装自己的Ajax核心对象