ajax是什么

1）asynchronous javascript and xml(异步的javascript和xml)

  为了解决传统的web应用当中“等待-响应-等待”的弊端而创建的一种技术，其实质可以理解为：使用浏览器内置的一个对象（XmlHttpRequest）向服务器发送请求，服务器返回xml数据或者是文本数据给浏览器，然后再浏览器端，使用这些数据更新部分页面看，整个过程，页面无任何的刷新。

2）“等待-响应-等待”：

  指的是，在传统的web应用当中，比如注册，用户填写完整个人注册信息，然后提交，此时，浏览器会将整个注册页面抛弃，等待服务器返回一个新的完整的页面。在等待过程当中，用户不能够做其它操作。服务器生成新的页面发送给浏览器，浏览器需要重新解析这个页面生成相应的界面。

解决“等待-响应-等待”问题

1）Ajax引擎（即XmlHttpRequest对象），首先为该对象注册一个监听器（该监听器是一个时间处理函数，对状态改变事件（readyStatechange）进行监听）

2）当用户对GUI做了某种操作（将产生对应的事件，如焦点失去事件等）

3）一旦产生对应的事件，将触发事件处理代码

4）在执行事件处理代码时，会调用Ajax引擎（XmlHttpRequest对象）

5）发送请求：Ajax引擎被调用后，将独自向服务器发送请求（独立于浏览器之外）

      继续其他操作：在Ajax引擎发送请求的同时，用户在浏览器还可以对GUI继续其他操作

      该请求是异步请求（Ajax引擎发送请求时，没有打断用户的操作）

6）服务器的web组件对请求进行处理

7）服务器可能会调用到数据库或者处理业务逻辑的Java类

8）服务器将处理结果响应给（只返回部分数据，可以是xml或者文本）Ajax引擎

9）监听器通过Ajax引擎获取响应数据（xml或者文本）

10）监听器对GUI中的数据进行更新（局部更新，不是整个页面刷新）

在整个过程中大部分是通过JS实现的，相应数据可能是xml，所以Ajax可以看做是多种技术的融合。

ajax编程

step1：

获得XmlHttpRequest对象。

该对象由浏览器提供，但是该类型并没有标准化。

ie和其它浏览器不同，其它浏览器都支持该类型，而ie不支持。

function getXmlHttpRequest(){

    var xhr = null;

    if((typeof XMLHttpRequest)!='undefined'){

        xhr = new XMLHttpRequest();

    }else{

        xhr = new ActiveXObject('Microsoft.XMLHttp');

    }

    return xhr; 

}

step2：

使用XmlHttpRequest向服务器发送请求

a.发送get请求

  var xhr = getXmlHttpRequest();

/**

*open(请求方式，请求地址，同步/异步)

*请求方式：get/post

*请求地址：如果是get请求，请求参数添加到地址之后。比如 check_user.do?username=zs

*同步/异步：true表示异步。

  xhr.open('get','check_user.do',true);

*/

/*

*注册一个监听器（即当xhr的状态发生改变产生了readstatechange事件，该时间会由f1函数处理。）

*我们需要在f1函数里面获得服务器返回的数据，然后更新页面

*/

  xhr.onreadystatechange=f1;

/*只有调用send方法之后，请求才会真正发送*/

  xhr.send(null);

b.发送post请求

  var xhr = getXmlHttpRequest();

  xhr.open('post','check_username.do'.true);

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

  xhr.onreadystatechange=f1;

  xhr.send('username=zs');

step3：

在服务器端，处理请求。

step4：

在监听器中，处理服务器返回的响应。

  xhr.onreadystatechange=f1;

    function f1(){

      //编写相应的处理代码

  }

或者

  xhr.onreadystatechange=function(){

    //编写相应的处理代码

    if(xhr.readyState==4){

        //只有readyState等于4，xhr才完整地接收到了服务器返回的数据。

        //获得文本数据

        var txt =xhr.responseText;

        //获得一个xml dom对象。

        var xml = xhr.responseXML;

        //dom操作、更新页面

    }

  }；

案例1：第一个Ajax程序

ie显示结果：

360显示结果：

XmlHttpRequest对象的重要属性

1）onreadystatechange：注册一个监听器（也就是，绑定一个事件处理函数）。

2）readyState：返回该对象与服务器通讯的状态。

    返回值是一个number类型的值，不同的值表示的含义如下：

    0（未初始化）对象已建立，但是尚未初始化（尚未调用open方法）。

    1（初始化）对象已建立，尚未调用send方法。

    2（发送数据）send方法已调用

    3（数据传送中）已接收部分数据。

    4（响应结束）接收了所有的数据。

3）responseText：获得服务器返回的文本。

4）responseXML：获得服务器返回的XML dom对象。

5）status：获得状态码。

缓存问题

  在使用ie浏览器时，如果使用get方式发送请求，浏览器会将数据缓存起来。这样，当再次发送请求时，如果请求地址不变，ie不会真正地向服务器发请求，而是将之前缓存的数据显示给用户。

  解决方式：

  方式一：使用post方式。

  方式二：在请求地址后面添加一个随机数。

 Ajax技术的优点

1）页面无刷新

2）不打断用户的操作，用户的体验好

3）按需获取数据，浏览器与服务器之间的数据的传输量减少

4）是一个标准技术，不需要下载任何的插件

5）可以利用客户端（浏览器的计算能力）