整理一个自己用的Ajax例子,封装,调用!

2011-01-13 15:52:48 by 【6yang】, 224 visits, 收藏 | 返回

什么是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 );
});

分享到:
share

    图片原图

    loading

    loading