jQuery与Ajax的应用（Ajax的应用）

一.Ajax的优势和不足
1.优势

• Ajax不需要任何浏览器插件支持
• 优秀的用户体验，在不刷新整个页面的前提下更新数据
• 提高Web性能，通过通过XMLHttpRequest对象向服务器提交数据
• 减轻服务器和带宽的负担，Ajax相当于在用户和服务器之间加了一个中间层，使用户操作与服务器响应异步化。

2.不足

• 浏览器对XMLHttpRequest对象的支持度不足，各个浏览器有差别
• 破坏浏览器前进、后退按钮的正常功能
• 对搜索引擎的支持的不足
• 开发和调试工具的缺乏

二.Ajax的XMLHttpRequest对象
Ajax的核心是XMLHttpRequest对象，它是Ajax实现的关键—发送异步请求、接收响应及执行回调都是通过它来完成的。XMLHttpRequest对象最早是在Microsoft Internet Explorer 5.0 ActiveX组件中被引入的，之后各大浏览器厂商都以JavaScript内置对象的方法来实现XMLHttpRequest对象。
三.安装Web环境—AppServ
Ajax方法需要与Web服务器进行交互，因此引入一个工具包—AppServ，它是PHP网页架站工具组合包，能够帮助初学者快速完成网页架站。AppServ所包含的软件有Apache、Apache Monitor、PHP、MySQL、PHP-Nuk和phpMy Admin。

• 下载AppServ
  下载地址为：http://www.appservnetwork.com.
• 安装Appserv
  安装非常简单，只需要连续点击next即可，端口默认是80.
• 配置示例程序
  将示例程序复制到安装好后的Apperv\www文件夹中，然后再地址栏 输入“http://localhost/Ch6/php”,即可显示页面，单击相应文件夹，选定HTML页面，即可运行相应的Ajax示例。

四.编写第一个Ajax例子
首先我们先用一个传统的JavaScript实现Ajax例子，例子描述：单击一个按钮，然后通过传统的JavaScript的Ajax方式从服务器端取回一个“Hello Ajax！”的字符串并显示在页面上。
首先是前台页面的HTML代码：

<input type="button" value="Ajax提交" onclick="Ajax();"/> //button按钮用来触发Ajax
<div id="resText"></div>  //显示从服务器返回的HTML文本

接下来的任务就是完成Ajax（）函数，步骤如下：
（1）定义一个函数，通过该函数来异步获取信息：

function Ajax(){
//}

（2）声明一个空对象用来装入XMLHttpRequest对象：

var xmlHttpReq=null;

（3）给XMLHttpRequest对象赋值：

if(window.ActiveXObject){  //IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest对象的
    xmlHttpReg=new Active XObject("Microsoft.XMLHTTP"); 
}else if(window.XMLHttpRequest){  //除IE5 IE6以外的浏览器XMLHttpRequest是window的子对象
    xmlHttpReq=new XMLHttpRequst(); //实例化一个XMLHttpRequest对象
}

（4）实例化成功后，使用open方法初始化XMLHttpReuest对象，指定HTTP方法和要使用的服务器URL:

xmlHttpRequest.open("GET","test.php",true); //调用open方法并采用异步方式

（5）因为要做一个异步调用，所以需要注册一个XMLHttpRequest对象将调用的回调事件处理器当它的readyState值改变时调用。当readyState值被改变时，会激发一个readystatechange事件，可以使用onreadystatechange属性来注册该回调事件处理器：

xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数

（6）使用send方法发送该请求，因为这个请求使用的是HTTP的GET方式，所以可以在不知道那个参数或使用null参数的情况下调用send方法：

xmlHttpReq.send(null); //因为使用GET方法提交，所以可以使用null作为参数调用

（7）当请求状态改变时，XMLHttpRequest对象调用onreadystatechange属性注册的事件处理器，因此，在处理该响应之前，事件处理器应该首先检查readyState的值和HTTP状态。当请求完成加载（readyState值为4）并且响应已经成功（HTTP状态值为200）时，就可以调用一个JavaScript函数来处理该响应内容，代码如下：

function RequestCallBack(){
    if(xmlHttpReq.readyState==4){
        if(xmlHttpReq.status==200){
            document.getElementById("resText").innerHTML==xmlHttp Req.responseText;
        }
    }
}

最后，如果单击“Ajax提交”按钮后发现网页上出现了“Hello Ajax”，那么就完成了第一个Ajax调用。