Ajax 基础

一：什么是 AJAX ？

AJAX = 异步 JavaScript 和 XML。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

XMLHttpRequest 是 AJAX 的基础。

所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

二：创建 XMLHttpRequest 对象

所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

创建 XMLHttpRequest 对象的语法：

var iable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象： variable=new ActiveXObject("Microsoft.XMLHTTP");

为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。 如果支持，则创建 XMLHttpRequest 对象。 如果不支持，则创建 ActiveXObject ：

var xmlhttp;

if (window.XMLHttpRequest) {

// code for IE7+, Firefox, Chrome, Opera, Safari

xmlhttp=new XMLHttpRequest();

} else {

// code for IE6, IE5

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

}

三：向服务器发送请求

1.open()方法

用于设置进行异步请求目标的URL，请求方法以及其他参数信息。

xmlHttp.open("请求的类型 get/post","文件在服务器上的位置/Servlet","同步还是异步 false/true"，username,password);

2.send()方法

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

xmlHttp.send(content);cotent:用于指定发送的数据，可以是DOM对象的实例，输入流或字符串。如果没有参数需要传递，可以设置为null.

3.setRequestHeader()方法 用于为post请求的HTTP头设置值。

xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");

四：XMLHttpRequest对象的常用属性

（1）onreadystateChange 属性用于指定状态改变时所触发的事件处理器。

在ajax中，每个状态改变时都会触发这个事件处理器，通常会调用一个JavaScript函数。

http_request.onreadystatechange=function(){}

(2)readyState 属性用于获取请求的状态，共包括5个属性值 0:未初始化 1：正在加载      2：已加载        3：交互中       4：完成

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

(4)responseXML 属性用于获取服务器的响应，表示为xml.

(5)status属性用于返回服务器的HTTP状态码。 200：表示成功        202：表示请求被接受，但尚未成功           400：错误的请求          404：文件未找到              500：内部服务器错误

五：发送ajax发送请求，4步骤：

1.初始化XMLHttpRequest对象。为了提高程序的兼容性，需要创建一个跨浏览器的XMLHttpRequest对象。

2.创建一个与服务器的连接。

3.向服务器发送请求。

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

封装成一个函数：传一个对象。

function AjaxCy(obj){
    //创建对象
    var xmlhr;
    if(window.XMLHttpRequest){
        xmlhr = new XMLHttpRequest();
    }else{
        xmlhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    //初始化
    //如果是post请求则需要指定请求头
    //发送
    if(obj.method=="post" || obj.method=="POST"){
        xmlhr.open(obj.method,obj.url,obj.sync);
        xmlhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xmlhr.send(obj.data);
    }else{
        xmlhr.open(obj.method,obj.url+"?"+obj.data,obj.sync);
        xmlhr.send();
    }
    //回调函数    
    xmlhr.onreadystatechange = function (){
        if(xmlhr.readyState==4&&xmlhr.status==200){
            obj.fun(xmlhr.responseText);
        }
    };
}