JavaScript---Ajax和函數回調,異步編程

一 Ajax 函數的定義  :  Asynchronous JavaScript and XML（異步的 JavaScript 和 XML），無刷新的從服務器讀取數據，可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新，使網頁實現異步更新。

交換過程:

　　1 創建對象

　　2 建立連接

　　3 發送請求

　　4 接收數據( 調用回調函數)

function ajax(json){  2     if(!json.url){return;}  3     json = json||{};  4     json.type = json.type||'GET';  5     json.data = json.data||{};  6     json.timeout = json.timeout||10000;  7     //1.創建對象
    if(window.XMLHttpRequest){  9         //chrome FF IE7+
        var oAjax = new XMLHttpRequest(); 11     }else{ 12         //IE低版本 
        var oAjax = new ActiveXObject('Microsoft.XMLHTTP'); 14  } 15     switch(json.type.toLowerCase()){ 16         case 'get': 17         //2.建立連接 //是否異步
        oAjax.open('GET',json.url+'?'+json2url(json.data),true); 19         //3.發送
 oAjax.send(); 21         break; 22         case 'post': 23         oAjax.open('POST',json.url,true); 24         oAjax.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 25  oAjax.send(json2url(json.data)); 26         break; 27  } 28     json.loading&&json.loading(); 29     //超過json.timeout 后認為失敗 不在請求
    var timer = setTimeout(function(){ 31         json.error&&json.error(); 32         json.complete&&json.complete(); 33         oAjax.onreadystatechange = null; 34  },json.timeout); 35     
    //4.接收 
    //當網絡狀態改變的時候
    oAjax.onreadystatechange = function(){ //每當 readyState 改變時，就會觸發 onreadystatechange 事件 39         //網絡狀態
        if(oAjax.readyState == 4){ //0: 請求未初始化 1: 服務器連接已建立 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應已就緒 41             //http狀態
            if(oAjax.status>=200&&oAjax.status<300||oAjax.status==304){ 43                 //服務器返回的數據
 clearTimeout(timer); 45                 json.success&&json.success(oAjax.responseText); //執行回調函數 46                 json.complete&&json.complete(); 47             }else{ 48  clearTimeout(timer); 49                 json.error&&json.error(oAjax.status); 50                 json.complete&&json.complete(); 51  } 52  } 53  }; 54 }

二，Ajax的調用：

ajax({  2  url:url,  3  data:{  4                //數據接口 7  },  8             success:function(str){ 10                 var json = eval('('+str+')'); 11                 if(!json.error){ 12                     alert('發表成功'); 13                    //成功之后運行的代碼18  } 19  } 20         });

三 ，異步和回調函數

　　參考連接 ： http://www.ruanyifeng.com/blog/2012/12/asynchronous%EF%BC%BFjavascript.html

　　異步編程： 同步模式：后一個任務等待前一個任務結束，然后再執行，程序的執行順序與任務的排列順序是一致的、同步的

　　　　　　　"異步模式"：每一個任務有一個或多個回調函數（callback），前一個任務結束后，不是執行后一個任務，而是執行回調函數，后一個任務則是不等前一個任務結束就執行，所以程序的執行順序與任務的排列順序是不一致的、異步的。

　　異步編程的方法：

　　　回調函數:把一個函數f1作為參數傳遞給另一個函數f2,並在f2中在恰當的時機執行,這個f1就叫回調函數，常見的比如事件函數，定時器，ajax。　　

　　　事件監聽：任務的執行不取決於代碼的順序，而取決於某個事件是否發生。