AJAX - 墨码山河

摘要：本文学习了AJAX的原理和使用。

1 简介

AJAX是异步的JS和XML，即：Asynchronous JavaScript And XML。

AJAX的目的是在不发生页面跳转的情况下，使用异步载入内容并改写页面内容的技术。

AJAX可以简单的理解为通过JS向服务器发送请求。

AJAX这门技术很早就被发明，但是直到2005年被谷歌的大量使用，才在市场中流行起来，可以说Google为AJAX的推广起到到推波助澜的作用。

2 同步和异步

2.1 同步处理

在AJAX出现之前，访问互联网时一般都是同步请求，也就是当一个页面向服务器发送一个请求时，在服务器响应结束之前，整个页面是不能操作的，直观上来看是卡住的或者是正在加载中的。

这就带来了非常糟糕的用户体验。首先，同步请求时，用户只能等待服务器的响应，而不能做任何操作。其次，如果请求时间过长可能会给用户一个卡死的感觉。最后，同步请求的最大缺点，就是即使整个页面中只有一小部分内容发生改变也要刷新整个页面。

2.2 异步处理

异步处理指的是在浏览网页的同时，通过AJAX向服务器发送请求，发送请求的过程中浏览网页的行为并不会收到任何影响，甚至主观上感知不到在向服务器发送请求。当服务器正常响应请求后，响应信息会直接发送到AJAX中，AJAX可以根据服务器响应的内容做一些操作。

使用AJAX的异步请求基本上完美的解决了同步请求带来的问题。首先，发送请求时不会影响到用户的正常访问。其次，即使请求时间过长，用户不会有任何感知。最后，AJAX可以根据服务器的响应信息局部的修改页面，而不需要整个页面刷新。

3 工作原理

3.1 XMLHttpRequest对象

如果需要向服务器发送请求，就需要使用HTTP协议，需要通过JS向服务器发送一个请求报文。

浏览器为开发人员提供了XMLHttpRequest对象，用于封装请求报文，浏览器向服务器发送的请求信息全部都需要封装到该对象中。

3.2 获取XMLHttpRequest对象

由于浏览器之间的差异，不同浏览器中获取XMLHttpRequest的方式不同，但总的来说一共有三种方式：

1
2
3

var xhr = new XMLHttpRequest();// 目前主流浏览器都支持
var xhr = new ActiveXObject('Msxml2.XMLHTTP');// IE6支持的方式
var xhr = new ActiveXObject('Microsoft.XMLHTTP');// IE5.5以下支持的方式

使用兼容方式获取XMLHttpRequest对象：

function createXMLHttpRequest(){
  if (typeof XMLHttpRequest === 'undefined') {
    window.XMLHttpRequest = function () {
      try { return new window.ActiveXObject('Msxml2.XMLHTTP.6.0'); } catch (e) {}
      try { return new window.ActiveXObject('Msxml2.XMLHTTP.3.0'); } catch (e) {}
      try { return new window.ActiveXObject('Msxml2.XMLHTTP'); } catch (e) {}
      try { return new window.ActiveXObject('Microsoft.XMLHTTP'); } catch (e) {}
      throw new Error('This browser does not support XMLHttpRequest.');
    };
  }
  return new XMLHttpRequest();
}

3.3 使用XMLHttpRequest对象

3.3.1 发送请求

如果需要将请求发送到服务器，可以使用XMLHttpRequest对象的open方法和send方法。

3.3.1.1 使用open方法

使用open方法规定请求的类型、URL以及是否异步处理请求。

格式：

1	open(method,url,async)

参数：

method：发送请求的HTTP类型(GET，POST，PUT，DELETE)，必须大写。
uri：XMLHttpRequest对象把请求发送到的服务器相应的URI。
async：是否请求是异步的，缺省值为true（异步）。

3.3.1.2 使用send方法

使用send方法将请求发送到服务器。

格式：

1	send(string)

参数：

string：仅用于POST请求，并且POST请求在发送数据之前还需要设置请求头。

3.3.2 获取响应

如果要获取服务器的响应，需要使用responseText或者responseXML属性。

如果响应返回的数据是文本就使用responseText，如果响应返回的数据是XML就使用responseXML。

状态相关的属性有readyState和status。

3.3.2.1 readyState

readyState描述XMLHttpRequest对象的状态，从0到4变化：

0表示未初始化，XMLHttpRequest对象已创建，但还未初始化。
1表示服务器连接已建立。
2表示请求已接收，响应未接收。
3表示响应正在接收。
4表示响应已接收。

readyState的值在发生改变时，XMLHttpRequest对象会激发一个readystatechange事件，可以在readystatechange事件中设置回调。

3.3.2.2 status

status描述HTTP状态码，当且仅当readyStatus的值为3或4时，这个属性才可以用：

200表示一切正常（OK）。
304表示没有被修改（Not Modified）。
403表示禁止访问（Forbidden）。
404表示没找到页面（Not Found）。
500表示内部服务器出错（Internal Service Error）。

3.4 举例

使用GET方式：

var xhr = getXMLHttpRequest();
xhr.open('get', 'AJAXServlet?name=xxx', true);
xhr.send();
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    document.getElementById('div_area').innerHTML = xhr.responseText;
  }
};

使用POST方式：

var xhr = getXMLHttpRequest();
xhr.open('post', 'AJAXServlet', true);
xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhr.send('email=xxx@163.com');
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4 && xhr.status == 200) {
    document.getElementById('div_area').innerHTML = xhr.responseText;
  }
};

4 JQuery对AJAX的封装

JQuery中提供了一些方法，封装了原生的AJAX。

4.1 get方法

格式：

1	jQuery.get(url, [data], [callback], [type])

参数：

url：发送请求的URL地址。
data：发送到服务器的数据，支持k=v&k=v字符串和{k:v,k:v}对象两种格式。
callback：载入成功时回调函数。
type：预期服务器返回的数据类型，支持xml、html、script、json、text、_default等类型。

示例：

$.get('${pageContext.request.contextPath}/getPassword',
    {'username':'admin'},
    function(data) {
    $('#password').html(data);// 123456
    }, 'json'
);

4.2 post方法

格式：

1	jQuery.post(url, [data], [callback], [type])

参数：

url：发送请求的URL地址。
data：发送到服务器的数据，支持k=v&k=v字符串和{k:v,k:v}对象两种格式。
callback：载入成功时回调函数。
type：预期服务器返回的数据类型，支持xml、html、script、json、text、_default等类型。

示例：

$.post('${pageContext.request.contextPath}/getPassword',
    {'username':'admin'},
    function(data) {
    $('#password').html(data);// 123456
    }, 'json'
);

4.3 底层方法

封装好的get方法和post方法可扩展性差，不能实现定制化开发，所以JQuery提供了底层的方法。

格式：

1	jQuery.ajax(url,[settings])

参数：

url：发送请求的url地址。
type：请求方式，POST或者GET，默认GET。
async：请求是同步还是异步，默认为true，true表示同步，false表示异步。
cache：是否缓存页面，适用于GET请求，默认为true，true表示缓存，false表示不缓存。
data：发送到服务器的数据，支持k=v&k=v字符串和{k:v,k:v}对象两种格式。
processData：是否将对象类型的数据拼接为键值对字符串，默认为true，true表示拼接，false表示不拼接。
contentType：发送到服务器的数据类型，默认是application/x-www-form-urlencoded类型，支持JSON/XML/HTML/TXT等类型。
dataType：预期服务器返回的数据类型，支持JSON/XML/HTML/TXT等类型。
success：请求成功时的回调函数。
error：请求失败时的回调函数。
complete：请求完成后的回调函数，成功或失败之后都会调用。
statusCode：一组数值的HTTP代码和函数对象，当响应时调用了相应的代码。

示例：

$.ajax({
  url: '${pageContext.request.contextPath}/getPassword',
  type: 'POST',
  async: true,
  cache: false,
  data: 'id=1&name=hello',
  dataType: 'json',
  success: function (data) {
    $('#password').html(data);
  },
  error: function () {
    alert('请求错误了');
  },
  complete: function () {
    alert('请求完成了');
  },
  statusCode: {
    200: function () {
      alert('操作完成');
    },
    500: function () {
      alert('服务器错误');
    }
  }
});