快速上手Ajax

       Ajax并不是什么新技术，只要有少量JS的语言基础和基本的WEB开发知识，可以在很快时间内掌握之。

Ajax的核心是XMLHttpRequest 对象，关于其具体的信息，请参考 http://www.w3school.com.cn/xmldom/dom_http.asp

 

下面以一个具体的程序为例，相信诸位可以很快学会Ajax的基本知识了。

这个程序主要是实现的功能是：用户点击页面上的一个按钮，后台将该页面对应的商品添加到购物车，成功后返回一个消息，并以对话框形式弹出。整个过程页面无刷新，这也是Ajax最重要的特征之一。

所有的Ajax代码位于一个单独的JS文件libajax.js中。

 

页面上的触发代码如下:

< a href ="javascript:addToCart();" cssStyle ="color: #FFFFFF;" />

在libajax.js文件中，程序创建一个XMLHttpRequest对象，代码如下:

var request; //全局变量，用来接收创建的对象

function createRequest() {
             try {
                request = new XMLHttpRequest();//针对FireFox,Opera等浏览器
            } catch (trymicrosoft) {
                 try {
                            request = new ActiveXObject( "Msxml2.XMLHTTP");//针对MS IE 7,8浏览器 
                } catch (othermicrosoft) {
                             try {
                                request = new ActiveXObject( "Microsoft.XMLHTTP");// 针对MS IE 6浏览器 
                            } catch (failed) {
                                request = false;//一般不会到这里的，但也有可能 
                            }
                }
            }
         if (!request)
                alert( "Error initializing XMLHttpRequest!");
}

下面则是核心的addToCart()

function addToCart() {
     var numOfGoods = document.getElementById( "numOfGoods").value;

//numOfGoods是页面上的一个文本框，用于输入要购买的商品数量 
     var goodsID = document.getElementById( "goodsID").value;
         var url = "/Shop/ccc/addToCart.action?goodsID=" + escape(goodsID) + "&numOfGoods=" + escape(numOfGoods);
    createRequest();
    
    request.open( "GET", url, true);
    request.onreadystatechange = updatePage;
    request.send( null);
}  

程序设置了一个名为updatePage的回调函数，一旦提交完成并成功处理，则会调用该函数。

回调函数的代码如下:

function updatePage() {
    
   if (request.readyState == 4) {
     if (request.status == 200) {
       var response = request.responseText; 
                    document.getElementById( "cartStatus").value = response;
                    
      alert( "Adding to cart successfully!");//显示成功对话框 
                } else
      alert( "Please login to your account.  ErrorCode: " + request.status);
        }
}

关于readyState的其他取值，请参考前面的链接的手册。一般情况下，4表示请求完成，status则表示消息成功返回。此程序中，后台的 addToCart.action会返回一个字符串。

程序自动将返回的字符串显示在cartStatus这个HTML标签中。

以上是Ajax最常用的操作，一般的Ajax程序均可按照这个模式来进行。