Ajax总结

对Ajax概念一直不是非常清楚，现在查看了下，备注如下：

w3c: http://www.w3school.com.cn/ajax/index.asp

 

 

 一、Ajax 的定义

Ajax 是 Asynchronous JavaScript and XML（以及 DHTML 等）的缩写。Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成.

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

 

二、实现

 Jquery实现：  

来自：http://www.cnblogs.com/yeer/archive/2009/07/23/1529460.html

Jquery官网：http://api.jquery.com/category/ajax/

jQuery.get( url, [data], [callback] )：使用GET方式来进行异步请求

jQuery.post( url, [data], [callback], [type] ) ：使用POST方式来进行异步请求

jQuery.getScript( url, [callback] ) : 通过 GET 方式请求载入并执行一个 JavaScript 文件。

参数：

url (String) :  发送请求的URL地址.

data (Map) : (可选) 要发送给服务器的数据，以 Key/value 的键值对形式表示，会做为QueryString附加到请求URL中。

callback (Function) : (可选) 载入成功时回调函数(只有当Response的返回状态是success才是调用该方法)。

jQuery Ajax 事件:在jQuery这里有两种Ajax事件：局部事件 和 全局事件。

 

局部事件就是在每次的Ajax请求时在方法内定义的，例如：

 $.ajax({

beforeSend: function(){

// Handle the beforeSend event
},
complete: function(){

// Handle the complete event
}
// ...
});

 

 

全局事件是每次的Ajax请求都会触发的，它会向DOM中的所有元素广播，在上面 getScript() 示例中加载的脚本就是全局Ajax事件。全局事件可以如下定义：

 $("#loading").bind("ajaxSend", function(){

$(this).show();

}).bind("ajaxComplete", function(){

$(this).hide();

});

或者：

 $("#loading").ajaxStart(function(){

$(this).show();

}); 

 

 

纯JS实现：

var XMLHttpReq;  
function createXMLHttpRequest() {  
    try {  
        XMLHttpReq = new ActiveXObject("Msxml2.XMLHTTP");//IE高版本创建XMLHTTP  
    }  
    catch(E) {  
        try {  
            XMLHttpReq = new ActiveXObject("Microsoft.XMLHTTP");//IE低版本创建XMLHTTP  
        }  
        catch(E) {  
            XMLHttpReq = new XMLHttpRequest();//兼容非IE浏览器，直接创建XMLHTTP对象  
        }  
    }  
  
}  
function sendAjaxRequest(url) {  
    createXMLHttpRequest();                                //创建XMLHttpRequest对象  
    XMLHttpReq.open("post", url, true);  
    XMLHttpReq.onreadystatechange = processResponse; //指定响应函数  
    XMLHttpReq.send(null);  
}  
//回调函数  
function processResponse() {  
    if (XMLHttpReq.readyState == 4) {  
        if (XMLHttpReq.status == 200) {  
            var text = XMLHttpReq.responseText;  
  
            /** 
             *实现回调 
             */  
            text = window.decodeURI(text);  
            var cp = document.getElementById("cp");  
            cp.innerHTML = "";  
            var values = text.split("|");  
            for (var i = 0; i < values.length; i++) {  
                var temp = document.createElement("option");  
                temp.text = values[i];  
                temp.value = values[i];  
                cp.options.add(temp);  
            }  
  
  
        }  
    }  
  
}  

 

dojo实现：

官网： http://dojotoolkit.org/reference-guide/1.8/dojo/promise/Promise.html

Dojo.Deferred.all([reactorTemplatePromise])
.then((result) => {})
.((error) =>{})

  Dojo.Deferred.when(updatePropertiesPromise,
              () => { this.onClosePromise.resolve(true); this.propDialog.hide(); },
                      err => { this.propDialog.hide(); });