ajax 跨域提交資料執行個體詳解

出於安全性的考慮，在AJAX應用中，瀏覽器通常都會限制跨域提交資料，但這又恰恰是非常常用的需求。比如在a.com的頁面上中提交一些請求資料到b.com的伺服器上，b.com伺服器處理請求完畢後返迴響應內容到a.com的頁面上。如何解決呢，使用js是比較簡單易實現的方案，缺點是代碼跟應用相關，無法抽象出模板機制進行重用。

具體的原理和實現是這樣的，在a.com的頁面上，假設叫a.html, 提交資料的javascript事件中動態添加一個類型為javascript的節點，這個節點指向接收資料的b.com的動態網頁面，以php為例，假設叫b.php頁面。
但是在瀏覽器(包括IE系和Mozilla系以及Opera等)看來就像是包含一個真正的js指令碼一樣，因此它會去請求這個
b.php，在b.php中處理相應邏輯之後，返回一小段列印結果的javascript代碼即可。返回到a.html後瀏覽器負責解析這一小段javascript代碼，列印或顯示出請求結果。正是通過這種‘欺騙’瀏覽器的方式，實現了資料跨域的功能。

ajax的原理

XMLHttpRequest是ajax的核心機制，它是在IE5中首先引入的，是一種支援非同步請求的技術。簡單的說，也就是javascript可以及時向伺服器提出請求和處理響應，而不阻塞使用者。達到無重新整理的效果。
所以我們先從XMLHttpRequest講起，來看看它的工作原理。
首先，我們先來看看XMLHttpRequest這個對象的屬性。
它的屬性有：
onreadystatechange  每次狀態改變所觸發事件的事件處理常式。
responseText     從伺服器處理序返回資料的字串形式。
responseXML   從伺服器處理序返回的DOM相容的文檔資料對象。
status                 從伺服器返回的數字代碼，比如常見的404（未找到）和200（已就緒）
status Text         伴隨狀態代碼的字串資訊
readyState         對象狀態值，0—未初始化 1—正在載入  2—載入完畢 3—互動 4—完成。

但是，由於各瀏覽器之間存在差異，所以建立一個XMLHttpRequest對象可能需要不同的方法。這個差異主要體現在IE和其它瀏覽器之間。
下面是面對不同瀏覽器分別建立的XMLHttpRequest對象。

代碼如下	複製代碼
var xmlHttp = false; //建立面向IE的XMLHttpRequest對象 try {     //使用Msxml的一個版本來建立     xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) {     try {         //使用它的另外一個對象來建立         xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");     } catch (e2) {       } }   if (!xmlHttp && typeof XMLHttpRequest != 'undefined') {     //建立面向其它非微軟瀏覽器的XMLHttpRequest對象     xmlHttp = new XMLHttpRequest(); }

這個過程分為三步，首先我們定義一個xmlHttp來引用建立的XMLHttpRequest。
然後，我們嘗試在微軟的瀏覽器中建立該對象，先用 Msxml.XMLHTTP對象來建立，
如果失敗再嘗試用macrosoft.XMLHTTP來建立它．最後，我們面向非微軟瀏覽器來建立該對象．
這樣，我們建立了一個XMLHttpRequest對象， 下面我們來看如何發出一個XMLHttpRequest請求。

代碼如下

複製代碼

function executeXMLHttpRequest(callback,url) {     //處理非微軟瀏覽器的情況     if(window.XMLHttpRequest)     {         xhr=new XMLHttpRequest();         xhr.onreadystatechange = callback;         xhr.open("Get",url,true);         xhr.send(null);     }     //處理微軟瀏覽器的情況     else if(window.ActiveXObject)     {         xhr=new ActiveXObject("macrosoft.XMLHttp");         if(xhr)         {             xhr.onreadystatechage=callback;             xhr.open("Get",url,true);             xhr.send();         }     } }

由上面可見，執行XMLHttpRequest實際上大多數代碼還是用在處理瀏覽器的區別上面，
針對不同的瀏覽器它還是要做出不同的處理，但是這樣看上去也非常的直觀。
在上面的代碼中，最關鍵的是： xhr.onreadystatechage=callback
它定義了回呼函數，一旦響應它就會自動執行。
xhr.open(""Get",url,true);   true表示您想要非同步執行該請求。
對於callback來說，我們有：

代碼如下	複製代碼
function processAjaxResponse() {     //狀態標識為已完成     if (xhr.readyState == 4) {         //已就緒         if (xhr.status == 200) {             document.getElementById('votes').innerHTML = xhr.responseText;         } else {             alert("There was a problem retrieving the XML data: " +xhr.statusText);         }     } }

就是說，一旦伺服器處理完XMLHttpRequest並返回給瀏覽器，
用xhr.onreadystatechange指派的回調方法將自動調用。
上面差不多就是XMLHttpRequest的整個工作流程，
它首先檢查XMLHttpRequest的整體狀態並且保證它已經完成 （readyStatus=4），
然後根據伺服器的設定詢問請求狀態，
如果一切已經就緒（status=200），那麼就執行下面需要的操作。
過程步驟不複雜 就三個步驟：
1.建立一個XMLHttpRequest對象
2.發送一個XMLHttpRequest請求
3.將請求後伺服器返回的結果資料輸出到html
下面重點看看要實現ajax跨域提交資料，應該如何做！
直接用jquery的$.ajax 方法吧

代碼如下

複製代碼

$(document).ready(function(){     $("input[name=username]").blur(function(){         $.ajax({             type: "GET",  //必須是get方式！！！             url: "http://xxx.com/test.php",             dataType:"jsonp",  //必須指定是jsonp             jsonp:"json_callback", //必須指定伺服器端要接收的callback函數名！ 請看test.php如何接收             data: {username:$('#username').val()},             success: function(json){             if(json.msg=='err')                 alert(json.info);             else if(json.msg=='ok')                 alert('提交成功');             else                 alert('提交失敗');             },             error:function(){                 alert("error!!!");             },               });           });       });

test.php

代碼如下	複製代碼
//接收js傳過來的callback函數名， //為了在下面echo組裝....$username = $_GET['username']; $jsonp_callback = $_GET['json_callback']; echo $jsonp_callback,'({"msg":"err","info":"'.$username.'"})'; exit;

到這裡，跨域擷取資料，提交資料正式完畢！