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 ：

 1 var xmlhttp;
 2 
 3 if (window.XMLHttpRequest) {
 4 
 5 // code for IE7+, Firefox, Chrome, Opera, Safari
 6 
 7 xmlhttp=new XMLHttpRequest();
 8 
 9 } else {
10 
11 // code for IE6, IE5
12 
13 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
14 
15 }

三：向服务器发送请求

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对象指定一个返回结果处理函数（即回调函数），用于对返回结果进行处理。

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

 1 function AjaxCy(obj){
 2     //创建对象
 3     var xmlhr;
 4     if(window.XMLHttpRequest){
 5         xmlhr = new XMLHttpRequest();
 6     }else{
 7         xmlhr = new ActiveXObject("Microsoft.XMLHTTP");
 8     }
 9     //初始化
10     //如果是post请求则需要指定请求头
11     //发送
12     if(obj.method=="post" || obj.method=="POST"){
13         xmlhr.open(obj.method,obj.url,obj.sync);
14         xmlhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
15         xmlhr.send(obj.data);
16     }else{
17         xmlhr.open(obj.method,obj.url+"?"+obj.data,obj.sync);
18         xmlhr.send();
19     }
20     //回调函数    
21     xmlhr.onreadystatechange = function (){
22         if(xmlhr.readyState==4&&xmlhr.status==200){
23             obj.fun(xmlhr.responseText);
24         }
25     };
26 }