请同学们先浏览PPT,这是一个任务点哈！完成后有惊喜哟！

1.了解Ajax

(1)什么是Ajax

Ajax是Asynchronous JavaScript and XML的缩写，意思是异步的JavaScript与XML。Ajax并不是一门新的语言或技术，它是JavaScript、XML、CSS、DOM等多种已有技术的组合，可以实现客户端的异步请求操作。从而可以实现在不需要刷新页面的情况下与服务器进行通信，减少了用户的等待时间，减轻了服务器和带宽的负担，提供更好的服务响应。

(2)Ajax开发模式与传统开发模式的比较

在传统的Web应用模式中，页面中用户的每一次操作都将触发一次返回Web服务器的HTTP 请求，服务器进行相应的处理（获得数据、运行与不同的系统会话）后，返回一个HTML页面给客户端。

而在Ajax应用中，页面中用户的操作将通过Ajax引擎与服务器端进行通信，然后将返回结果提交给客户端页面的Ajax引擎，再由Ajax引擎来决定将这些数据插入到页面的指定位置。

2.使用XMLHttpRequest对象

Ajax是XMLHttpRequest对象和JavaScript、XML、CSS、DOM等多种技术的组合。其中，只有XMLHttpRequest对象是新技术，其他的均为已有技术。下面我们就对XMLHttpRequest对象进行详细介绍。

XMLHttpRequest是一个具有应用程序接口的JavaScript对象，能够使用超文本传输协议（HTTP）连接一个服务器，是微软公司为了满足开发者的需要，于1999年在IE 5.0浏览器中率先推出的。通过XMLHttpRequest对象，Ajax可以像桌面应用程序一样只同服务器进行数据层面的交换，而不用每次都刷新页面，也不用每次都将数据处理的工作交给服务器来完成，这样既减轻了服务器负担又加快了响应速度、缩短了用户等待的时间。

(1)初始化XMLHttpRequest对象

• IE浏览器把XMLHttpRequest实例化为一个ActiveX对象。具体方法如下：

  var http_request = new ActiveXObject("Msxml2.XMLHTTP");

  或者var http_request = new ActiveXObject("Microsoft.XMLHTTP");

• 非IE浏览器（例如，Firefox、Opera、Safari等）把XMLHttpRequest对象实例化为一个本地JavaScript对象。具体方法如下：

  var http_request = new XMLHttpRequest();

  
  

为了提高程序的兼容性，可以创建一个跨浏览器的XMLHttpRequest对象。创建一个跨浏览器的XMLHttpRequest对象其实很简单，只需要判断一下不同浏览器的实现方式，如果浏览器提供了XMLHttpRequest类，则直接创建一个实例，否则实例化一个ActiveX对象。

if (window.XMLHttpRequest) { //非IE浏览器

    http_request = new XMLHttpRequest();

} else if (window.ActiveXObject) { //IE浏览器

    try {

        http_request = new ActiveXObject("Msxml2.XMLHTTP");

    } catch (e) {

        try {

            http_request = new ActiveXObject("Microsoft.XMLHTTP");

           } catch (e) {}

    }

}

(2)XMLHttpRequest对象的常用方法

• open()方法

  具体语法如下：

  open("method","URL"[,asyncFlag[,"userName"[, "password"]]])

• send()方法

  send()方法用于向服务器发送请求。如果请求声明为异步，该方法将立即返回，否则将等到接收到响应为止。send()方法的语法格式如下：

  send(content)

• setRequestHeader()方法

  setRequestHeader()方法用于为请求的HTTP头设置值。setRequestHeader()方法的具体语法格式如下：setRequestHeader("header", "value")

• abort()方法

  abort()方法用于停止或放弃当前异步请求。其语法格式如下：

  abort()send()方法

• getResponseHeader()方法

  getResponseHeader()方法用于以字符串形式返回指定的HTTP头信息。其语法格式如下：

  getResponseHeader("headerLabel")

• getAllResponseHeaders()方法

  getAllResponseHeaders()方法用于以字符串形式返回完整的HTTP头信息，其中，包括Server、Date、Content-Type和Content-Length。getAllResponseHeaders()方法语法格式如下：

  getAllResponseHeaders()

(3)XMLHttpRequest对象的常用属性

• abort()方法

  onreadystatechange属性

  onreadystatechange属性用于指定状态改变时所触发的事件处理器。在Ajax中，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数。例如，指定状态改变时触发JavaScript函数getResult的代码如下：

  http_request.onreadystatechange = getResult;

• readyState属性

  readyState属性用于获取请求的状态，含义如下

值	意义	值	意义
1	未初始化	1	正在加载
2	已加载	3	交互中
4	完成

• responseText属性

  responseText属性用于获取服务器的响应，表示为字符串。

• responseXML属性

  responseXML属性用于获取服务器的响应，表示为XML。这个对象可以解析为一个DOM对象。

• status属性

  status属性用于返回服务器的HTTP状态码，属性含义值见表。     

值	意义	值	意义
200	表示成功	202	表示请求被接受，但尚未成功
400	错误的请求	404	文件未找到
500	内部服务器错误

• statusText属性

  statusText属性用于返回HTTP状态码对应的文本，如OK或Not Fount（未找到）等。

  
  

3.Ajax的工作流程

(1) 发送请求

Ajax可以通过XMLHttpRequest对象实现采用异步方式在后台发送请求。通常情况下，Ajax发送请求有两种，一种是发送GET请求，另一种是发送POST请求。但是无论发送哪种请求，都需要经过以下4个步骤。

（a）初始化XMLHttpRequest对象。

（b）为XMLHttpRequest对象指定一个返回结果处理函数（即回调函数），用于对返回结果进行处理。

（c）创建一个与服务器的连接。

（d）向服务器发送请求。

(2)处理服务器响应

处理字符串响应

处理XML响应