[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