快速上手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程序均可按照这个模式来进行。

你可能感兴趣的:(Ajax,职场,休闲,上手)