整理一個自己用的Ajax例子,封裝,調用!

什麼是Ajax?

也就是javascript可以及時向伺服器提出請求和處理響應，而不阻塞使用者。達到無重新整理的效果。

核心機製為：XMLHttpRequest

XMLHttpRequest屬性：

 onreadystatechange  每次狀態改變所觸發事件的事件處理常式。
  responseText     從伺服器處理序返回資料的字串形式。
  responseXML   從伺服器處理序返回的DOM相容的文檔資料對象。
  status                 從伺服器返回的數字代碼，比如常見的404（未找到）和200（已就緒）
  status Text         伴隨狀態代碼的字串資訊
  readyState         對象狀態值，0—未初始化 1—正在載入  2—載入完畢 3—互動 4—完成。

 

JS:

function Ajax() {
     var xmlHttpReq = null;
     if (window.XMLHttpRequest) {
         xmlHttpReq = new XMLHttpRequest();
     } else {
         if (window.ActiveXObject) {
              xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
         }
     }
     var handler = null;
     this.invoke = function (url, mode, synchro, _handler) {
         handler = _handler;
         xmlHttpReq.open(mode, url, synchro);
         xmlHttpReq.onreadystatechange = this.callback;
         xmlHttpReq.send(null);
     };
     this.callback = function () {
         if (xmlHttpReq.readyState == 4) {
              if (xmlHttpReq.status == 200) {
                   handler(xmlHttpReq.responseText);
              } else {
                   alert("There was a problem retrieving the XML data:\n" + xmlHttpReq.statusText);
              }
         }
     };
}

 

 調用方式：

 

var ajax = new Ajax();

ajax.invoke("http://www.xx.com/getlist.aspx?type=1&id=1","GET",true,function(response){
    var json = eval("(" + response + ")");
});

 

Jquery方式:

 

    //參數設定,設定的格式為key:value,如果{"cl":"check","dd":"dd"},擷取的格式為cl=check&dd=dd
    var params = $.param({"il":Math.random()});
    //驗證是否登入
    $.ajax({
        type:"POST",
        url:"Control/Login.aspx",
        data:encodeURI(params),
        success:function(response){
            var json = eval("("+response+")");
            //操作JSON,json[0];json.Table[0].id;
        }
    });

//---------------
        $.getJSON("Control/GetData.aspx",{t:Math.random()},function(json){
            alert(json.ok);
            if(json.ok==true){
                alert(json.Table[0].ID);
            }
        });

//遍曆JSON
$.each( { name: "John", lang: "JS" }, function(i, n){
  alert( "Name: " + i + ", Value: " + n );
});