JavaScript，Ajax

学习要点：

1.XMLHttpRequest

2.GET与POST

3.封装Ajax

2005年Jesse James Garrett发表了一篇文章，标题为：“Ajax：A new Approach to Web Applications”。他在这篇文章里介绍了一种技术，用他的话说，就叫：Ajax，是Asynchronous JavaScript + XML的简写。这种技术能够想服务器请求额外的数据而无须卸载页面(即刷新)，会带来更好的用户体验。一时间，席卷全球。

一．XMLHttpRequest对象

Ajax技术核心是XMLHttpRequest对象(简称XHR)，这是由微软首先引入的一个特性，其他浏览器提供商后来都提供了相同的实现。在XHR出现之前，Ajax式的通信必须借助一些hack手段来实现，大多数是使用隐藏的框架或内嵌框架。

XHR的出现，提供了向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器获取更多的信息，这就意味着，用户只要触发某一事件，在不刷新网页的情况下，更新服务器最新的数据。

虽然Ajax中的x代表的是XML，但Ajax通信和数据格式无关，也就是说这种技术不一定使用XML。

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

XMLHttpRequest()创建xhr对象

  1. var xhr = new XMLHttpRequest();   //创建xhr对象
  2. alert(xhr);    //打印对象

如果是IE6及以下，那么我们必须还需要使用ActiveX对象通过MSXML库来实现。在低版本IE浏览器可能会遇到三种不同版本的XHR对象，即MSXML2.XMLHttp、MSXML2.XMLHttp.3.0、MSXML2.XMLHttp.6.0。我们可以编写一个函数。

兼容IE低版本创建xhr对象

  1. var xhr = new createXHR(); //执行兼容IE低版本创建xhr对象函数
  2. alert(xhr); //打印xhr对象
  3.  
  4. //兼容IE低版本创建xhr对象,函数
  5. function createXHR() {
  6.     if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest创建xhr对象是否支持，
  7.         return new XMLHttpRequest();  //如果支持，创建xhr对象返回
  8.     } else if (typeof ActiveXObject != 'undefined') { //如果不支持，判断IE低版本的3种模式是否支持
  9.         var versions = [  //数组，3种模式
  10.             'MSXML2.XMLHttp.6.0',
  11.             'MSXML2.XMLHttp.3.0',
  12.             'MSXML2.XMLHttp'
  13.         ];
  14.         for (var i = 0; i < versions.length; i++) {   //循环3种模式
  15.             try {
  16.                 return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
  17.             } catch (e) {
  18.                 //跳过
  19.             }
  20.         }
  21.     } else {  //如果上面两种都不能创建xhr对象
  22.         //创建错误对象，抛出错误
  23.         throw new Error('您的浏览器不支持XHR对象！');
  24.     }
  25. }

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

open()方法，准备发送http请求，3个参数，参数1请求类型get或post，参数2请求的url可以是动态的也可以是静态的（如：demo.php，demo.html）,参数3表示是否异步/false同步/true异步
使用方式：
XHR对象.open('get','demo.php',false)

  1. var xhr = new createXHR(); //执行兼容IE低版本创建xhr对象函数
  2. //open()方法，准备发送http请求，3个参数，参数1请求类型get或post，参数2请求的url可以是动态的也可以是静态的（如：demo.php，demo.html）,参数3表示是否异步/false同步/true异步
  3. xhr.open('get','demo.html',false);  //准备发送
  4.  
  5. //兼容IE低版本创建xhr对象,函数
  6. function createXHR() {
  7.     if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest创建xhr对象是否支持，
  8.         return new XMLHttpRequest();  //如果支持，创建xhr对象返回
  9.     } else if (typeof ActiveXObject != 'undefined') { //如果不支持，判断IE低版本的3种模式是否支持
  10.         var versions = [  //数组，3种模式
  11.             'MSXML2.XMLHttp.6.0',
  12.             'MSXML2.XMLHttp.3.0',
  13.             'MSXML2.XMLHttp'
  14.         ];
  15.         for (var i = 0; i < versions.length; i++) {   //循环3种模式
  16.             try {
  17.                 return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
  18.             } catch (e) {
  19.                 //跳过
  20.             }
  21.         }
  22.     } else {  //如果上面两种都不能创建xhr对象
  23.         //创建错误对象，抛出错误
  24.         throw new Error('您的浏览器不支持XHR对象！');
  25.     }
  26. }

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

send()方法方法，发送http请求，1个参数，请求主体发送的数据,如果不需要则，必须填null
使用方式：
XHR对象.send(null)

  1. var xhr = new createXHR(); //执行兼容IE低版本创建xhr对象函数
  2. //open()方法，准备发送http请求，3个参数，参数1请求类型get或post，参数2请求的url可以是动态的也可以是静态的（如：demo.php，demo.html）,参数3表示是否异步/false同步/true异步
  3. xhr.open('get','demo.py',false);  //准备发送
  4. //send()方法方法，发送http请求，1个参数，请求主体发送的数据,如果不需要则，必须填null
  5. xhr.send(null); //发送请求
  6.  
  7. //兼容IE低版本创建xhr对象,函数
  8. function createXHR() {
  9.     if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest创建xhr对象是否支持，
  10.         return new XMLHttpRequest();  //如果支持，创建xhr对象返回
  11.     } else if (typeof ActiveXObject != 'undefined') { //如果不支持，判断IE低版本的3种模式是否支持
  12.         var versions = [  //数组，3种模式
  13.             'MSXML2.XMLHttp.6.0',
  14.             'MSXML2.XMLHttp.3.0',
  15.             'MSXML2.XMLHttp'
  16.         ];
  17.         for (var i = 0; i < versions.length; i++) {   //循环3种模式
  18.             try {
  19.                 return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
  20.             } catch (e) {
  21.                 //跳过
  22.             }
  23.         }
  24.     } else {  //如果上面两种都不能创建xhr对象
  25.         //创建错误对象，抛出错误
  26.         throw new Error('您的浏览器不支持XHR对象！');
  27.     }
  28. }

当send()方法请求发送到服务器端，收到响应后，响应的数据会自动填充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

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

responseText属性，作为响应主体被返回的文本

  1. var xhr = new createXHR(); //执行兼容IE低版本创建xhr对象函数
  2. //open()方法，准备发送http请求，3个参数，参数1请求类型get或post，参数2请求的url可以是动态的也可以是静态的（如：demo.php，demo.html）,参数3表示是否异步/false同步/true异步
  3. xhr.open('get','demo.html',false);  //准备发送
  4. //send()方法方法，发送http请求，1个参数，请求主体发送的数据,如果不需要则，必须填null
  5. xhr.send(null); //发送请求
  6. //responseText属性，作为响应主体被返回的文本
  7. alert(xhr.responseText);
  8.  
  9. //兼容IE低版本创建xhr对象,函数
  10. function createXHR() {
  11.     if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest创建xhr对象是否支持，
  12.         return new XMLHttpRequest();  //如果支持，创建xhr对象返回
  13.     } else if (typeof ActiveXObject != 'undefined') { //如果不支持，判断IE低版本的3种模式是否支持
  14.         var versions = [  //数组，3种模式
  15.             'MSXML2.XMLHttp.6.0',
  16.             'MSXML2.XMLHttp.3.0',
  17.             'MSXML2.XMLHttp'
  18.         ];
  19.         for (var i = 0; i < versions.length; i++) {   //循环3种模式
  20.             try {
  21.                 return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
  22.             } catch (e) {
  23.                 //跳过
  24.             }
  25.         }
  26.     } else {  //如果上面两种都不能创建xhr对象
  27.         //创建错误对象，抛出错误
  28.         throw new Error('您的浏览器不支持XHR对象！');
  29.     }
  30. }

其他属性见上表，同理

动态获取请求数据，结合点击事件

  1. addEvent(document, 'click', function () {  //执行添加事件函数，添加一个点击事件，点击页面时激发函数
  2.     var xhr = new createXHR();  //执行兼容IE低版本创建xhr对象函数
  3.     xhr.open('get', 'demo.html', false);    //设置了同步，准备请求
  4.     xhr.send(null);  //发送请求
  5.     if (xhr.status == 200) {                    //如果返回成功了，判断状态码是否等于200
  6.         alert(xhr.responseText);                //调出服务器返回的数据
  7.     } else {
  8.         alert('数据返回失败！状态代码：' + xhr.status + '状态信息：' + xhr.statusText);
  9.     }
  10. });
  11.  
  12. //兼容IE低版本创建xhr对象,函数
  13. function createXHR() {
  14.     if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest创建xhr对象是否支持，
  15.         return new XMLHttpRequest();  //如果支持，创建xhr对象返回
  16.     } else if (typeof ActiveXObject != 'undefined') { //如果不支持，判断IE低版本的3种模式是否支持
  17.         var versions = [  //数组，3种模式
  18.             'MSXML2.XMLHttp.6.0',
  19.             'MSXML2.XMLHttp.3.0',
  20.             'MSXML2.XMLHttp'
  21.         ];
  22.         for (var i = 0; i < versions.length; i++) {   //循环3种模式
  23.             try {
  24.                 return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
  25.             } catch (e) {
  26.                 //跳过
  27.             }
  28.         }
  29.     } else {  //如果上面两种都不能创建xhr对象
  30.         //创建错误对象，抛出错误
  31.         throw new Error('您的浏览器不支持XHR对象！');
  32.     }
  33. }
  34.  
  35. //跨浏览器添加事件，添加事件兼容
  36. function addEvent(obj, type, fn) {     //添加事件函数，接收3个参数，1事件对象，2事件名称，3事件函数
  37.     //判断浏览器如果支持w3c
  38.     if (obj.addEventListener) {
  39.         //就用w3c的addEventListener方法添加对象，将事件名称和事件函数传入添加事件
  40.         obj.addEventListener(type, fn, false);
  41.     } else if (obj.attachEvent) {   //判断如果浏览器是IE9以下，就用IE的方法attachEvent添加事件
  42.         //将事件名称和事件函数传入创建对象
  43.         obj.attachEvent('on' + type, fn);
  44.     }
  45. }

open()方法异步调用【常用】

同步调用固然简单，但使用异步调用才是我们真正常用的手段。使用异步调用的时候，需要触发readystatechange事件，然后检测readyState属性即可。这个属性有五个值：

readyState属性

值

状态

说明

0

未初始化

尚未调用open()方法

1

启动

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

2

发送

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

3

接受

已经接受到部分响应数据

4

完成

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

异步调用

  1. //注意：引入了开源库json2，如果浏览器版本太低不支持JSON对象，通过一个开源库json2.js来模拟执行，如果支持JSON对象就用JSON对象
  2.  
  3. addEvent(document, 'click', function () {  //执行添加事件函数，添加一个点击事件，点击页面后执行函数
  4.     var xhr = new createXHR();  //执行创建XHR对象函数，创建XHR对象
  5.     xhr.open('get', 'demo.html', true); //open()方法异步调用,准备请求
  6.     xhr.send(null);  //发送请求
  7.     xhr.onreadystatechange = function () {  //当请求时执行函数
  8.         if (xhr.readyState == 4) {  //判断已经接受到全部响应数据，而且可以使用
  9.             if (xhr.status == 200) {  //判断状态码为200
  10.                 alert(xhr.responseText); //获取请求页面内容
  11.             } else {
  12.                 //否则打印错误
  13.                 alert('数据返回失败！状态代码：' + xhr.status + '状态信息：' + xhr.statusText);
  14.             }
  15.         }
  16.     };
  17. });
  18.  
  19. //兼容IE低版本创建xhr对象,函数
  20. function createXHR() {
  21.     if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest创建xhr对象是否支持，
  22.         return new XMLHttpRequest();  //如果支持，创建xhr对象返回
  23.     } else if (typeof ActiveXObject != 'undefined') { //如果不支持，判断IE低版本的3种模式是否支持
  24.         var versions = [  //数组，3种模式
  25.             'MSXML2.XMLHttp.6.0',
  26.             'MSXML2.XMLHttp.3.0',
  27.             'MSXML2.XMLHttp'
  28.         ];
  29.         for (var i = 0; i < versions.length; i++) {   //循环3种模式
  30.             try {
  31.                 return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
  32.             } catch (e) {
  33.                 //跳过
  34.             }
  35.         }
  36.     } else {  //如果上面两种都不能创建xhr对象
  37.         //创建错误对象，抛出错误
  38.         throw new Error('您的浏览器不支持XHR对象！');
  39.     }
  40. }
  41.  
  42. //跨浏览器添加事件，添加事件兼容
  43. function addEvent(obj, type, fn) {     //添加事件函数，接收3个参数，1事件对象，2事件名称，3事件函数
  44.     //判断浏览器如果支持w3c
  45.     if (obj.addEventListener) {
  46.         //就用w3c的addEventListener方法添加对象，将事件名称和事件函数传入添加事件
  47.         obj.addEventListener(type, fn, false);
  48.     } else if (obj.attachEvent) {   //判断如果浏览器是IE9以下，就用IE的方法attachEvent添加事件
  49.         //将事件名称和事件函数传入创建对象
  50.         obj.attachEvent('on' + type, fn);
  51.     }
  52. }

PS：使用abort()方法可以取消异步请求，放在send()方法之前会报错。放在responseText之前会得到一个空值。

注意如果请求的url是动态页面，获取页面数据时，不是实时的解决方式

  1. xhr.open('get', 'demo.php?rand=' + Math.random(), true);

二．GET与POST

在提供服务器请求的过程中，有两种方式，分别是：GET和POST。在Ajax使用的过程中，GET的使用频率要比POST高。

在web程序上，GET一般是URL提交请求，比如：demo.php?name=lee&age=100
POST一般是表单提交，比如：<form method="post">...

在了解这两种请求方式前，我们先了解一下HTTP头部信息，包含服务器返回的响应头信息和客户端发送出去的请求头信息。我们可以获取响应头信息或者设置请求头信息。我们可以在Firefox浏览器的firebug查看这些信息。

两种头信息

响应头信息：服务器返回的信息，客户端可以获取，但不可以设置
请求头信息：客户端发送的信息，客户端可以设置，但不可以获取

获取响应头信息

getAllResponseHeaders()方法，获取整个响应头信息
使用方式
xhr对象.getAllResponseHeaders()

  1. //注意：引入了开源库json2，如果浏览器版本太低不支持JSON对象，通过一个开源库json2.js来模拟执行，如果支持JSON对象就用JSON对象
  2.  
  3. addEvent(document, 'click', function () {  //执行添加事件函数，添加一个点击事件，点击页面后执行函数
  4.     var xhr = new createXHR();  //执行创建XHR对象函数，创建XHR对象
  5.     xhr.open('get', 'demo.html', true); //open()方法异步调用,准备请求
  6.     xhr.send(null);  //发送请求
  7.     xhr.onreadystatechange = function () {  //当请求时执行函数
  8.         if (xhr.readyState == 4) {  //判断已经接受到全部响应数据，而且可以使用
  9.             if (xhr.status == 200) {  //判断状态码为200
  10.  
  11.                 alert(xhr.getAllResponseHeaders()); //getAllResponseHeaders()方法，获取整个响应头信息
  12.  
  13.             } else {
  14.                 //否则打印错误
  15.                 alert('数据返回失败！状态代码：' + xhr.status + '状态信息：' + xhr.statusText);
  16.             }
  17.         }
  18.     };
  19. });
  20.  
  21. //兼容IE低版本创建xhr对象,函数
  22. function createXHR() {
  23.     if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest创建xhr对象是否支持，
  24.         return new XMLHttpRequest();  //如果支持，创建xhr对象返回
  25.     } else if (typeof ActiveXObject != 'undefined') { //如果不支持，判断IE低版本的3种模式是否支持
  26.         var versions = [  //数组，3种模式
  27.             'MSXML2.XMLHttp.6.0',
  28.             'MSXML2.XMLHttp.3.0',
  29.             'MSXML2.XMLHttp'
  30.         ];
  31.         for (var i = 0; i < versions.length; i++) {   //循环3种模式
  32.             try {
  33.                 return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
  34.             } catch (e) {
  35.                 //跳过
  36.             }
  37.         }
  38.     } else {  //如果上面两种都不能创建xhr对象
  39.         //创建错误对象，抛出错误
  40.         throw new Error('您的浏览器不支持XHR对象！');
  41.     }
  42. }
  43.  
  44. //跨浏览器添加事件，添加事件兼容
  45. function addEvent(obj, type, fn) {     //添加事件函数，接收3个参数，1事件对象，2事件名称，3事件函数
  46.     //判断浏览器如果支持w3c
  47.     if (obj.addEventListener) {
  48.         //就用w3c的addEventListener方法添加对象，将事件名称和事件函数传入添加事件
  49.         obj.addEventListener(type, fn, false);
  50.     } else if (obj.attachEvent) {   //判断如果浏览器是IE9以下，就用IE的方法attachEvent添加事件
  51.         //将事件名称和事件函数传入创建对象
  52.         obj.attachEvent('on' + type, fn);
  53.     }
  54. }

getResponseHeader()方法，获取单个响应头信息,参数是要获取头信息的名称
使用方式
xhr对象.getResponseHeader('要获取头信息的名称')

  1. //注意：引入了开源库json2，如果浏览器版本太低不支持JSON对象，通过一个开源库json2.js来模拟执行，如果支持JSON对象就用JSON对象
  2.  
  3. addEvent(document, 'click', function () {  //执行添加事件函数，添加一个点击事件，点击页面后执行函数
  4.     var xhr = new createXHR();  //执行创建XHR对象函数，创建XHR对象
  5.     xhr.open('get', 'demo.html', true); //open()方法异步调用,准备请求
  6.     xhr.send(null);  //发送请求
  7.     xhr.onreadystatechange = function () {  //当请求时执行函数
  8.         if (xhr.readyState == 4) {  //判断已经接受到全部响应数据，而且可以使用
  9.             if (xhr.status == 200) {  //判断状态码为200
  10.  
  11.                 alert(xhr.getResponseHeader('Content-Type')); //getResponseHeader()方法，获取单个响应头信息,参数是要获取头信息的名称
  12.  
  13.             } else {
  14.                 //否则打印错误
  15.                 alert('数据返回失败！状态代码：' + xhr.status + '状态信息：' + xhr.statusText);
  16.             }
  17.         }
  18.     };
  19. });
  20.  
  21. //兼容IE低版本创建xhr对象,函数
  22. function createXHR() {
  23.     if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest创建xhr对象是否支持，
  24.         return new XMLHttpRequest();  //如果支持，创建xhr对象返回
  25.     } else if (typeof ActiveXObject != 'undefined') { //如果不支持，判断IE低版本的3种模式是否支持
  26.         var versions = [  //数组，3种模式
  27.             'MSXML2.XMLHttp.6.0',
  28.             'MSXML2.XMLHttp.3.0',
  29.             'MSXML2.XMLHttp'
  30.         ];
  31.         for (var i = 0; i < versions.length; i++) {   //循环3种模式
  32.             try {
  33.                 return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
  34.             } catch (e) {
  35.                 //跳过
  36.             }
  37.         }
  38.     } else {  //如果上面两种都不能创建xhr对象
  39.         //创建错误对象，抛出错误
  40.         throw new Error('您的浏览器不支持XHR对象！');
  41.     }
  42. }
  43.  
  44. //跨浏览器添加事件，添加事件兼容
  45. function addEvent(obj, type, fn) {     //添加事件函数，接收3个参数，1事件对象，2事件名称，3事件函数
  46.     //判断浏览器如果支持w3c
  47.     if (obj.addEventListener) {
  48.         //就用w3c的addEventListener方法添加对象，将事件名称和事件函数传入添加事件
  49.         obj.addEventListener(type, fn, false);
  50.     } else if (obj.attachEvent) {   //判断如果浏览器是IE9以下，就用IE的方法attachEvent添加事件
  51.         //将事件名称和事件函数传入创建对象
  52.         obj.attachEvent('on' + type, fn);
  53.     }
  54. }

设置单个请求头信息

setRequestHeader()方法，设置单个请求头信息,两个参数，要设置的头信息名称和值
使用方式
xhr对象.setRequestHeader('头信息名称','值')

注意：放在open方法之后，send方法之前

  1. //注意：引入了开源库json2，如果浏览器版本太低不支持JSON对象，通过一个开源库json2.js来模拟执行，如果支持JSON对象就用JSON对象
  2.  
  3. addEvent(document, 'click', function () {  //执行添加事件函数，添加一个点击事件，点击页面后执行函数
  4.     var xhr = new createXHR();  //执行创建XHR对象函数，创建XHR对象
  5.     xhr.open('get', 'demo.html', true); //open()方法异步调用,准备请求
  6.  
  7.     //setRequestHeader()方法，设置单个请求头信息,两个参数，要设置的头信息名称和值
  8.     xhr.setRequestHeader('MyHeader', 'Lee');        //放在open方法之后，send方法之前
  9.  
  10.     xhr.send(null);  //发送请求
  11.     xhr.onreadystatechange = function () {  //当请求时执行函数
  12.         if (xhr.readyState == 4) {  //判断已经接受到全部响应数据，而且可以使用
  13.             if (xhr.status == 200) {  //判断状态码为200
  14.                 //alert(xhr.getAllResponseHeaders()); //获取整个响应头信息
  15.             } else {
  16.                 //否则打印错误
  17.                 alert('数据返回失败！状态代码：' + xhr.status + '状态信息：' + xhr.statusText);
  18.             }
  19.         }
  20.     };
  21. });
  22.  
  23. //兼容IE低版本创建xhr对象,函数
  24. function createXHR() {
  25.     if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest创建xhr对象是否支持，
  26.         return new XMLHttpRequest();  //如果支持，创建xhr对象返回
  27.     } else if (typeof ActiveXObject != 'undefined') { //如果不支持，判断IE低版本的3种模式是否支持
  28.         var versions = [  //数组，3种模式
  29.             'MSXML2.XMLHttp.6.0',
  30.             'MSXML2.XMLHttp.3.0',
  31.             'MSXML2.XMLHttp'
  32.         ];
  33.         for (var i = 0; i < versions.length; i++) {   //循环3种模式
  34.             try {
  35.                 return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
  36.             } catch (e) {
  37.                 //跳过
  38.             }
  39.         }
  40.     } else {  //如果上面两种都不能创建xhr对象
  41.         //创建错误对象，抛出错误
  42.         throw new Error('您的浏览器不支持XHR对象！');
  43.     }
  44. }
  45.  
  46. //跨浏览器添加事件，添加事件兼容
  47. function addEvent(obj, type, fn) {     //添加事件函数，接收3个参数，1事件对象，2事件名称，3事件函数
  48.     //判断浏览器如果支持w3c
  49.     if (obj.addEventListener) {
  50.         //就用w3c的addEventListener方法添加对象，将事件名称和事件函数传入添加事件
  51.         obj.addEventListener(type, fn, false);
  52.     } else if (obj.attachEvent) {   //判断如果浏览器是IE9以下，就用IE的方法attachEvent添加事件
  53.         //将事件名称和事件函数传入创建对象
  54.         obj.attachEvent('on' + type, fn);
  55.     }
  56. }

PS：我们只可以获取服务器返回回来响应头信息，无法获取向服务器提交的请求头信息，自然自定义的请求头，在JavaScript端是无法获取到的。

GET请求

GET请求是最常见的请求类型，最常用于向服务器查询某些信息。必要时，可以将查询字符串参数追加到URL的末尾，以便提交给服务器。

  1. xhr.open('get', 'demo.php?rand=' + Math.random() + '&name=Koo', true);

通过URL的末尾提交数据，可以通过动态页面获取提交的数据

通过URL后的问号给服务器传递键值对数据，服务器接收到返回响应数据。特殊字符传参产生的问题可以使用encodeURIComponent()进行编码处理，中文字符的返回及传参，可以将页面保存和设置为utf-8格式即可。

  1. var url = 'demo.php?rand=' + Math.random();
  2. url = addURLParam(url,'name','lguix');
  3. url = addURLParam(url,'aeg',100);
  4.  
  5. //一个通用的URL提交函数
  6. function addURLParam(url, name, value) {
  7.     url += (url.indexOf('?') == -1 ? '?' : '&');            //判断的url是否有已有参数
  8.     url += encodeURIComponent(name) + '=' + encodeURIComponent(value);
  9.     alert(url);
  10.     return url;
  11. }

PS：当没有encodeURIComponent()方法时，在一些特殊字符比如“&”，会出现错误导致无法获取。

POST请求

POST请求可以包含非常多的数据，我们在使用表单提交的时候，很多就是使用的POST传输方式。

  1. //注意：引入了开源库json2，如果浏览器版本太低不支持JSON对象，通过一个开源库json2.js来模拟执行，如果支持JSON对象就用JSON对象
  2.  
  3. addEvent(document, 'click', function () {  //执行添加事件函数，添加一个点击事件，点击页面后执行函数
  4.     var xhr = new createXHR();  //执行创建XHR对象函数，创建XHR对象
  5.     xhr.open('post', 'demo.php', true); //open()方法异步调用,准备请求

而发送POST请求的数据，不会跟在URL的尾巴上，而是通过send()方法向服务器提交数据。

  1. //注意：引入了开源库json2，如果浏览器版本太低不支持JSON对象，通过一个开源库json2.js来模拟执行，如果支持JSON对象就用JSON对象
  2.  
  3. addEvent(document, 'click', function () {  //执行添加事件函数，添加一个点击事件，点击页面后执行函数
  4.     var xhr = new createXHR();  //执行创建XHR对象函数，创建XHR对象
  5.     xhr.open('post', 'demo.php', true); //open()方法异步调用,准备请求
  6.     xhr.send('name=Lee&age=100'); //发送

一般来说，向服务器发送POST请求由于解析机制的原因，需要进行特别的处理。因为POST请求和Web表单提交是不同的，需要使用XHR来模仿表单提交。

修改响应头信息来模拟

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

PS：从性能上来讲POST请求比GET请求消耗更多一些，用相同数据比较，GET最多比POST快两倍。

上一节课的JSON也可以使用Ajax来回调访问。

  1. var url = 'demo.json?rand=' + Math.random();
  2. var box = JSON.parse(xhr.responseText);

三．封装Ajax

因为Ajax使用起来比较麻烦，主要就是参数问题，比如到底使用GET还是POST；到底是使用同步还是异步等等，我们需要封装一个Ajax函数，来方便我们调用。

  1. //注意：引入了开源库json2，如果浏览器版本太低不支持JSON对象，通过一个开源库json2.js来模拟执行，如果支持JSON对象就用JSON对象
  2.  
  3. //封装ajax
  4. function ajax(obj) {  //接收数据对象
  5.     var xhr = new createXHR();  //执行创建xhr对象函数
  6.     //数据对象里的url加上?rand=，在加上Math.random()
  7.     obj.url = obj.url + '?rand=' + Math.random();
  8.     //数据对象里的data键和值对象，执行名值对编码函数
  9.     obj.data = params(obj.data); //接收名值对编码后并且格式化分隔符后的数组
  10.     //判断发送方式是否是get，url里的？索引位置是否是负一。如果不是执行后面
  11.     if (obj.method === 'get') obj.url = obj.url.indexOf('?') == -1 ? obj.url + '?' + obj.data : obj.url + '&' + obj.data;
  12.     //判断发送模式如果是异步
  13.     if (obj.async === true) {
  14.         //添加一个加载事件
  15.         xhr.onreadystatechange = function () {
  16.             //判断已经接受到全部响应数据，而且可以使用
  17.             if (xhr.readyState == 4) callback(); //执行callback()函数
  18.         };
  19.     }
  20.     xhr.open(obj.method, obj.url, obj.async);
  21.     if (obj.method === 'post') {
  22.         xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  23.         xhr.send(obj.data);
  24.     } else {
  25.         xhr.send(null);
  26.     }
  27.     if (obj.async === false) {
  28.         callback();
  29.     }
  30.     function callback() { //callback()函数
  31.         if (xhr.status == 200) {  //判断状态码如果是200
  32.             //将获取到的页面内容，传入回调函数
  33.             obj.success(xhr.responseText);            //回调
  34.         } else {
  35.             alert('数据返回失败！状态代码：' + xhr.status + '状态信息：' + xhr.statusText);
  36.         }
  37.     }
  38. }
  39.  
  40. //调用ajax
  41. addEvent(document, 'click', function () {        //IE6需要重写addEvent
  42.     ajax({  //数据对象
  43.         method: 'get',     //执行ajax封装函数，将一个对象传入封装函数
  44.         url: 'demo.html',   //请求url
  45.         data: {
  46.             'name': 'Lee',  //url键值
  47.             'age': 100     //url键值
  48.         },
  49.         success: function (text) {  //接收回调函数
  50.             alert(text);  //打印回调返回的内容
  51.         },
  52.         async: true  //true异步调用
  53.     });
  54. });
  55.  
  56. //名值对编码
  57. function params(data) {  //接收数据对象里的data键和值对象
  58.     var arr = []; //创建数组
  59.     for (var i in data) { //循环数据对象里的data键和值对象
  60.         //将每次循环的对象名称 = 加上 对应名称的值，添加到arr数组
  61.         arr.push(encodeURIComponent(i) + '=' + encodeURIComponent(data[i]));
  62.     }
  63.     return arr.join('&');  //将数组格式化分隔符后返回
  64. }
  65.  
  66. //兼容IE低版本创建xhr对象,函数
  67. function createXHR() {
  68.     if (typeof XMLHttpRequest != 'undefined') {   //判断XMLHttpRequest创建xhr对象是否支持，
  69.         return new XMLHttpRequest();  //如果支持，创建xhr对象返回
  70.     } else if (typeof ActiveXObject != 'undefined') { //如果不支持，判断IE低版本的3种模式是否支持
  71.         var versions = [  //数组，3种模式
  72.             'MSXML2.XMLHttp.6.0',
  73.             'MSXML2.XMLHttp.3.0',
  74.             'MSXML2.XMLHttp'
  75.         ];
  76.         for (var i = 0; i < versions.length; i++) {   //循环3种模式
  77.             try {
  78.                 return new ActiveXObject(version[i]);  //尝试每次循环的IE模式执行返回
  79.             } catch (e) {
  80.                 //跳过
  81.             }
  82.         }
  83.     } else {  //如果上面两种都不能创建xhr对象
  84.         //创建错误对象，抛出错误
  85.         throw new Error('您的浏览器不支持XHR对象！');
  86.     }
  87. }
  88.  
  89. //跨浏览器添加事件，添加事件兼容
  90. function addEvent(obj, type, fn) {     //添加事件函数，接收3个参数，1事件对象，2事件名称，3事件函数
  91.     //判断浏览器如果支持w3c
  92.     if (obj.addEventListener) {
  93.         //就用w3c的addEventListener方法添加对象，将事件名称和事件函数传入添加事件
  94.         obj.addEventListener(type, fn, false);
  95.     } else if (obj.attachEvent) {   //判断如果浏览器是IE9以下，就用IE的方法attachEvent添加事件
  96.         //将事件名称和事件函数传入创建对象
  97.         obj.attachEvent('on' + type, fn);
  98.     }
  99. }

PS：封装Ajax并不是一开始就形成以上的形态，需要经过多次变化而成。

第一百二十八节，JavaScript，Ajax的更多相关文章

  1. 第一百二十六节，JavaScript，XPath操作xml节点

    第一百二十六节,JavaScript,XPath操作xml节点 学习要点: 1.IE中的XPath 2.W3C中的XPath 3.XPath跨浏览器兼容 XPath是一种节点查找手段,对比之前使用标准 ...

  2. 第三百二十八节，web爬虫讲解2—urllib库爬虫—状态吗—异常处理—浏览器伪装技术、设置用户代理

    第三百二十八节,web爬虫讲解2—urllib库爬虫—状态吗—异常处理—浏览器伪装技术.设置用户代理 如果爬虫没有异常处理,那么爬行中一旦出现错误,程序将崩溃停止工作,有异常处理即使出现错误也能继续执 ...

  3. 第一百二十九节，JavaScript，理解JavaScript库

    JavaScript,理解JavaScript库 学习要点: 1.项目介绍 2.理解JavaScript库 3.创建基础库 从本章,我们来用之前的基础知识来写一个项目,用以巩固之前所学.那么,每个项目 ...

  4. 第一百五十八节，封装库--JavaScript，ajax说明

    封装库--JavaScript,ajax说明 封装库ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 /** ajax()方法,ajax通讯方法,跨页面向动态页面发送或获取数据 * ...

  5. 第一百二十五节，JavaScript，XML

    JavaScript,XML 学习要点: 1.IE中的XML 2.DOM2中的XML 3.跨浏览器处理XML 随着互联网的发展,Web应用程序的丰富,开发人员越来越希望能够使用客户端来操作XML技术. ...

  6. 第一百二十三节，JavaScript错误处理与调试

    JavaScript错误处理与调试 学习要点: 1.浏览器错误报告 2.错误处理 3.错误事件 4.错误处理策略 5.调试技术 6.调试工具 JavaScript在错误处理调试上一直是它的软肋,如果脚 ...

  7. 第一百二十节，JavaScript事件对象

    JavaScript事件对象 学习要点: 1.事件对象 2.鼠标事件 3.键盘事件 4.W3C与IE JavaScript事件的一个重要方面是它们拥有一些相对一致的特点,可以给你的开发提供更多的强大功 ...

  8. 第一百三十八节，JavaScript，封装库--插件

    JavaScript,封装库--插件 库主要是用来封装一般JavaScript的常规操作代码,而拖拽这种特效代码属于功能性代码,并不是必须的,所以这种类型的代码,我们建议另外封装,在需要的时候作为插件 ...

  9. 第一百二十四节，JavaScriptCookie与存储

    JavaScriptCookie与存储 学习要点: 1.cookie 2.cookie局限性 3.其他存储 随着Web越来越复杂,开发者急切的需要能够本地化存储的脚本功能.这个时候,第一个出现的方案: ...

随机推荐

  1. mysql基础之存储引擎

    原文:mysql基础之存储引擎 数据库对同样的数据,有着不同的存储方式和管理方式,在mysql中,称为存储引擎 常用的表的引擎 Myisam ,批量插入速度快, 不支持事务,锁表 Innodb, 批量 ...

  2. IP地址规划和设计方法

    IP地址规划和设计方法 无类域间路由技术需要在提高 IP 地址利用率和减少主干路由器负荷两个方面取得平衡 网络地址转换 NAT 最主要的应用是专用网,虚拟专用网,以及 ISP 为拨号用户 提供的服务 ...

  3. 查询select

    --------------select查询-------------------查询所有信息(方法一)select * from stuinfo --*号代表所有列--查询所有信息(方法二)sele ...

  4. MVC 控制器激活

    MVC 控制器激活 ASP.NET MVC 控制器激活(三) 前言 在上个篇幅中说到从控制器工厂的GetControllerInstance()方法来执行控制器的注入,本篇要讲是在GetControl ...

  5. quartz_spring 定时器配置

    quartz:石英,表达精确准时的意思. quartz-all-1.6.1.jar 主要用于定时任务管理. <?xml version="1.0" encoding=&quo ...

  6. 表达式树解析"框架"

    干货!表达式树解析"框架"(2)   为了过个好年,我还是赶快把这篇完成了吧 声明 本文内容需要有一定基础的开发人员才可轻松阅读,如果有难以理解的地方可以跟帖询问,但我也不一定能回 ...

  7. 领域模型中分散的事务如何集中统一处理（C#解决方案）

    领域模型中分散的事务如何集中统一处理(C#解决方案)   开篇 什么是事务,事务的应用场景 做项目时,经常会遇到一些需求,比如注册用户时,要求同时存入用户的基本信息和初始化该用户的帐户,如果在这两个环 ...

  8. 代码重构方向原则指导（转载 cnblogs）

    英文原文:Hill Climbing (Wonkish)   重构是一种对软件进行修改的行为,但它并不改变软件的功能特征,而是通过让软件程序更清晰,更简洁和更条理来改进软件的质量.代码重构之于软件,相 ...

  9. 多模块分布式系统的简单服务访问 - OSGI原形（.NET）

    多模块分布式系统的简单服务访问 - OSGI原形(.NET) 先描述一下本篇描述的适用场景(3台server, 各个模块分布在各个Server上,分布式模块互相依赖.交互的场景): 多个OSIG引擎交 ...

  10. phantomjs初次认识

    phantomjs初次认识 最近没什么重要的任务,就抽空看了看项目组爬虫小组的代码,因为我们的爬虫主要是以python的scrapy框架为主,看起来比较方便.在看代码的时候看到一个叫phantomjs ...