Ajax-原生JS中的Ajax

概述

AJAX是异步的JavaScript和XML（Asynchronous JavaScript And XML）。简单点说，就是使用 XMLHttpRequest 对象与服务器通信。 它可以使用JSON，XML，HTML和text文本等格式发送和接收数据。AJAX最吸引人的就是它的“异步”特性，也就是说他可以在不重新刷新页面的情况下与服务器通信，交换数据，或更新页面。

你可以使用AJAX最主要的两个特性做下列事：

• 在不重新加载页面的情况下发送请求给服务器。

• 接受并使用从服务器发来的数据。

 

快速上手

var xhr = null;
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest(); // ie7+等现代浏览器
} else if (window.ActiveXObject) { // ie6，老版Opera
    xhr = new ActiveXObject('Microsft.XMLHTTP');
}
xhr.open('get', 'db.json', true);
xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhr.onreadystatechange = function () { 
    if (xhr.readyState == 4 && xhr.status == 200) {
        /* 
        readyState 请求的当前状态
        status     响应码
        */
        xhr.responseText;
        JSON.parse(xhr.responseText);
    }
}
xhr.send();

 

发送HTTP请求具体步骤

1.创建一个异步调用对象xhr

var xhr = null; // 创建异步对象
if (window.XMLHttpRequest) {
    xhr = new XMLHttpRequest(); // ie7+等现代浏览器
} else if (window.ActiveXObject) { // ie6，老版Opera
    xhr = new ActiveXObject('Microsft.XMLHTTP');
}

2.初始化一个请求

xhr.open()声明当你接到响应后要做什么，你要发送一个实际的请求，通过调用HTTP请求对象的 open() 和 send() 方法，像下面这样:

xhr.open('GET', 'db.json', true);

• 第一个参数是HTTP请求方法 。有GET，POST，HEAD以及服务器支持的其他方法。 保证这些方法一定要是大写字母，否则其他一些浏览器（比如FireFox）可能无法处理这个请求。
• 第二个参数是你要发送的URL。由于安全原因，默认不能调用第三方URL域名。 确保你在页面中使用的是正确的域名，否则在调用 open() 方法是会有 “权限被拒绝” 错误提示。一个容易犯的错误是你企图通过 domain.tld 访问网站， 而不是使用 www.domain.tld。如果你真的需要向另一个域名发送请求, 可以查看 HTTP access control。
• 第三个参数是可选的，用于设置请求是否是异步的。如果设为 true (默认设置)，JavaScript执行会持续，并且在服务器还没有响应的情况下与页面进行交互。

如果是GET请求，可以将查询字符串参数追加到URL的末尾，以便将信息发送给服务器。

如果是POST请求的话，要设置请求头的值，且查询字符串应该用服务器可以解析的格式

3.设置http请求头的值

xhr.setRequestsHeader()如果你使用 POST 数据，必须设置，且请求报文中请求头的Content-Type应该跟随请求体格式的变化而变化

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
httpRequest.send('key1=value1&key2=value2');

xhr.setRequestHeader('Content-Type', 'application/json');
httpRequest.send('{"foo":"123"}');

4.发送请求

xhr.send()参数可以是任何你想发送给服务器的内容。

 

如果是POST请求的话，发送表单数据时应该用服务器可以解析的格式，且一定要设置请求头，像查询语句：

"name=value&anothername="+encodeURIComponent(myVar)+"&so=on"
//或者其他格式, 类似 multipart/form-data，JSON，XML等。

 

处理服务器响应

xhr.onreadystatechange

这一步只在你发起异步请求时有效（既 open() 的第三个参数未特别指定或设为 true），只要readyState属性的值由一个值变成另一个，都会触发一次readystatechange事件。

如果你发起的是同步请求则不必使用函数，但是非常不推荐这样子做，它的用户体验很糟糕。

xhr.onreadystatechange = function () { // 若为同步，此代码不用写，直接在send后，用`xhr.responseText`即可。
    if (xhr.readyState == 4 && xhr.status == 200) {
       //在检查完请求状态和HTTP响应码后， 你就可以用服务器返回的数据做任何你想做的了
        xhr.responseText;
        JSON.parse(xhr.responseText);
    }
}

xhr.readyState请求状态

状态	名	解释
0：未初始化	UNSENT	尚未调用open()方法
1：启动	OPENED	已经调用open()方法，已建立服务器连接，但尚未调用send()方法
2：发送	HEADERS_RESPONSE	已经调用send()方法，请求已接受，但尚未接受到响应拿不到响应体(responseText)，此时可以拿到头.getAllResponseHeaders()
3：接收	LOADING	已经接收到部分响应数据
4：完成	DONE	已经接收到全部响应数据，而且可以在客户端使用

xhr.status响应码

查看MDN中HTTP响应码

xhr.responseText

服务器以文本字符的形式返回

xhr.responseXML

以 XMLDocument 对象方式返回，之后就可以使用JavaScript来处理

 

本文链接集

跨域问题  HTTP access control

HTTP所有响应码 MDN