第16章AJAX

1．什么是ajax

• AJAX 是 Asynchronous JavaScript And XML 的简称。直译为，异步的JS和XML。
• AJAX的实际意义是，不发生页面跳转、异步载入内容并改写页面内容的技术。
• AJAX也可以简单的理解为通过JS向服务器发送请求。
• AJAX这门技术很早就被发明，但是直到2005年被谷歌的大量使用，才在市场中流行起来，可以说Google为AJAX的推广起到到推波助澜的作用。
• 异步处理：
  1. 同步处理：
     1. AJAX出现之前，我们访问互联网时一般都是同步请求，也就是当我们通过一个页面向服务器发送一个请求时，在服务器响应结束之前，我们的整个页面是不能操作的，也就是直观上来看他是卡主不动的。
     2. 这就带来了非常糟糕的用户体验。首先，同步请求时，用户只能等待服务器的响应，而不能做任何操作。其次，如果请求时间过长可能会给用户一个卡死的感觉。最后，同步请求的最大缺点就是即使整个页面中只有一小部分内容发生改变我们也要刷新整个页面。
  2. 异步处理：
     1. 而异步处理指的是我们在浏览网页的同时，通过AJAX向服务器发送请求，发送请求的过程中我们浏览网页的行为并不会收到任何影响，甚至主观上感知不到在向服务器发送请求。当服务器正常响应请求后，响应信息会直接发送到AJAX中，AJAX可以根据服务器响应的内容做一些操作。
     2. 使用AJAX的异步请求基本上完美的解决了同步请求带来的问题。首先，发送请求时不会影响到用户的正常访问。其次，即使请求时间过长，用户不会有任何感知。最后，AJAX可以根据服务器的响应信息局部的修改页面，而不需要整个页面刷新。

2．使用XmlHttpRequest对象发送请求

js中定义了一个可以发送异步请求的对象XMLHttpRequest。我们在网页中使用这个对象发送请求。我们来学习一下XmlHttpRequest对象。

2.1创建XMLHttpRequest对象

由于这个对象并不是标准，但是基本所有浏览器都支持，所以针对不同的浏览器我们需要创建其对应的对象。

 

1）w3c标准浏览器，火狐、谷歌等

var xhr = new XMLHttpRequest();

2）ie6创建方式

var xhr = new ActiveXObject(“Msxml2.XMLHTTP”);

3）ie5.5创建方式

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

所以为了兼容所有浏览器，我们可以创建一个公共的获取此对象的方法

//获取XMLHttpRequest的通用方法

function getXMLHttpRequest(){

    var xhr;

    try{

       //大部分浏览器都支持

       xhr = new XMLHttpRequest();

    }catch(e){

       try{

           //如果不支持，在这里捕获异常并且采用IE6支持的方式

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

       }catch(e){

           //如果还不支持，在这里捕获异常并采用IE5支持的方式

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

       }

    }

    return xhr;

}