从屌丝到架构师的飞越（JavaScript篇）-JavaScript 原生Ajax请求

一、介绍

这节课呢，我们来了解的是JavaScript 原生Ajax请求，

Ajax，是Asynchronous JavaScript + XML 的简写，可以实现页面的局部刷新。虽然 Ajax 中的 x 代表的是 XML，但 Ajax 通信和数据格式无关，所以传输的数据格式不一定使用 XML。

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 即 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。它可以在不重新加载整个页面的情况下完成与服务器交换数据并更新部分网页。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

一个完整的AJAX请求包括五个步骤:

1. 创建XMLHTTPRequest对象

2. 使用open方法创建http请求,并设置请求地址

3. 设置发送的数据，开始和服务器端交互

4. 注册事

5. 获取响应并更新界面

二、知识点介绍

1、Ajax简介

2、工作原理

3、XMLHttpRequest

4、open()方法

5、send()方法

6、服务器响应

7、readystatechange 事件

8、头信息

9、编码处理

10、封装Ajax

三、上课对应视频的说明文档

1、Ajax简介

ajax = 异步 JavaScript 和 XML。

ajax是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。我们知道，传统的网页（不使用ajax）如果需要更新内容，必须重新加载整个网页。Ajax的出现，使得使网可以实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

注意：ajax本身不支持跨域请求，需要在服务器端处理。

2、工作原理

ajax的技术核心是 XMLHttpRequest 对象。

ajax请求过程：创建XMLHttpRequest、连接服务器、发送请求、服务器做出响应、接收响应数据

图示：

3、XMLHttpRequest

Ajax 技术核心是XMLHttpRequest 对象(简称 XHR)。

IE7+、Firefox、Opera、Chrome 和 Safari 都支持原生的 XHR 对象，在这些浏览器中创建XHR 对象可以直接实例化 XMLHttpRequest 即可。

var xhr =new XMLHttpRequest();

注意：通常在使用IE内核的浏览器时，我们通过以下代码创建XHR 对象。

var xhr;

if(window.XMLHttpRequest){

xhr=newXMLHttpRequest();

}else{ //表示使用的是IE的老版本内核

xhr=newActiveXObject("Microsoft.XMLHTTP");

}

4、open()方法

在使用 XHR 对象时，先必须调用open()方法，它接受三个参数：要发送的请求类型(get 、post)、请求的 URL 和表示是否异步。

xhr.open(‘post’, 'test.jsp’, false); //对于test.jsp 的 get 请求，false 同步

open()方法并不会真正发送请求，而只是启动一个请求以备发送。

5、send()方法

通过 send()方法进行发送请求，send()方法接受一个参数，作为请求主体发送的数据。如果不需要则，必须填 null 。执行 send()方法之后，请求就会发送到服务器上。

xhr.send(null); //发送请求

6、服务器响应

当请求发送到服务器端，收到响应后，响应的数据会自动填充 XHR 对象的属性。那么一共有四个属性：

responseText ：作为响应主体被返回的文本

responseXML ：如果响应主体内容类型是"text/xml"或"application/xml"，则返回包含响应数据的 XML DOM 文档

status ：响应的 HTTP 状态

statusText ： HTTP 状态的说明

接受响应之后，第一步检查 status 属性，以确定响应已经成功返回。一般而已 HTTP 状态代码为200 作为成功的标志。当然了还有其他的状态码，如下：

HTTP状态码状态字符串说明

200 OK 服务器成功返回了页面

400 Bad Request 语法错误导致服务器不识别

401 Unauthorized 请求需要用户认证

404 Not found 指定的 URL 在服务器上找不到

500 Internal Server Error 服务器遇到意外错误，无法完成请求

503 ServiceUnavailable 由于服务器过载或维护导致无法完成请求

7、readystatechange 事件

同步的情况下，js会等待请求返回，获取status。不需要onreadystatechange事件处理函数。而异步则需要onreadystatechange事件处理，且值为4再正确处理下面的内容。

如：同步的情况下:

var xhr = new createXHR();

xhr.open('get', 'test.jsp?rand=' +Math.random(), false); //设置了同步

xhr.send(null);

if (xhr.status == 200) { //如果返回成功了

alert(xhr.responseText);//调出服务器返回的数据

} else {

alert('数据返回失败！状态代码：'+ xhr.status + '状态信息：' + xhr.statusText);

}

异步的情况下:

var xhr = new createXHR();

xhr.onreadystatechange = function () {

if (xhr.readyState == 4) {

if (xhr.status == 200) {

alert(xhr.responseText);

} else {

alert('数据返回失败！状态代码：'+ xhr.status + '状态信息：'+ xhr.statusText);

}

};

xhr.open('get', 'test.jsp?rand=' +Math.random(), true);//设置异步传输

xhr.send(null);

注意：readyState属性除了可以是4，还可以是其它值，如下表：

值状态说明

0 未初始化尚未调用 open()方法

1 启动已经调用 open()方法，但尚未调用 send()方法

2 发送已经调用 send()方法，但尚未接受响应

3 接受已经接受到部分响应数据

4 完成已经接受到全部响应数据，而且可以使用

8、头信息

8.1、使用 setRequestHeader()设置单个请求头信息

//放在 open 方法之后，send 方法之前

如：xhr.setRequestHeader("content-type","text/xml;charset=utf-8");

注意：POST 请求和 Web 表单提交是不同的，需要使用 XHR 来模仿表单提交。

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');

8.2、使用 getResponseHeader()获取单个响应头信息

alert(xhr.getResponseHeader('Content-Type'));

8.3、使用 getAllResponseHeaders()获取整个响应头信息

alert(xhr.getAllResponseHeaders());

9、编码处理

特殊字符传参产生的问题可以使用 encodeURIComponent()进行编码处理，中文字符的返回及传参，可以讲页面保存和设置为 utf-8 格式即可。

//一个通用的 URL 提交函数

function addURLParam(url, name, value) {

url +=(url.indexOf('?') == -1 ? '?' : '&'); //判断的 url 是否有已有参数

url += encodeURIComponent(name) + '=' + encodeURIComponent(value);

alert(url);

return url;

}

10、封装Ajax

//名值对编码

function params(data) {

var arr = [];

for (var i in data) {

arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));

}

return arr.join('&');

}

//封装Ajax

function ajax(obj) {

var xhr = new createXHR();//调用creatXHR创建XHR对象

obj.url = obj.url + '?rand=' + Math.random();//为url连接添加随机值

obj.data = params(obj.data);//调用params方法对数据进行编码处理

if (obj.method === 'get')//如果是get请求传输

//进行get请求连接的拼凑

obj.url = obj.url.indexOf('?') == -1 ? obj.url + '?' + obj.data : obj.url + '&' + obj.data;

if (obj.async === true) {//如果是异步传输

xhr.onreadystatechange = function () {//异步传输后的响应

if (xhr.readyState == 4) //正常返回数据

callback(); //调用响应函数

};

}

xhr.open(obj.method, obj.url, obj.async);//启动一个请求

if (obj.method === 'post') {//如果是post请求传输

xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');//添加头文件

xhr.send(obj.data);//发送数据

} else {

xhr.send(null);//如果不是post请求传输，发送空数据

}

if (obj.async === false) {//如果是同步传输

callback();//调用响应函数

}

//想用函数

function callback () {

if (xhr.status == 200) {//服务器成功响应

obj.success(xhr.responseText); //回调

} else {

alert('数据返回失败！状态代码：' + xhr.status + '，状态信息：' + xhr.statusText);

}

//调用 ajax

addEvent(document, 'click', function () { //IE6 需要重写 addEvent

ajax({

method : 'get',

url : 'test.jsp',

data : {

'name' : 'chen',

'age' : 22

success : function (text) {

alert(text);//弹出响应内容

async : true //异步传输

});