新手指南ajax 跨域提交數據實例詳解-js教程-網頁制作

香港交友討論區HkEasyChat

 找回密碼
 新會員註冊
..
喜歡本頁?立即SHARE


香港交友討論區HkEasyChat»論壇forum Hkeasychat電腦網絡 Blog/網頁設計程式區 ajax 跨域提交數據實例詳解-js教程-網頁制作
您正在討論區的: ajax 跨域提交數據實例詳解-js教程-網頁制作
查看: 40|回復: 0
收起左側

[JavaScript語法] ajax 跨域提交數據實例詳解-js教程-網頁制作

[複製鏈接]

簽到天數: 2 天

連續簽到: 1 天

[LV.1]初來乍到

評論頭像

現在實現ajax方法有原生的javascript與現在jquery $.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代碼,打印或顯示出請求結果。正是通過這種『欺騙』瀏覽器的方式,實現了數據跨域的弁遄C
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 方法吧
[table=560,#FB7] [tr]        [td=1,1,464] 代碼如下[/td]        [td=1,1,109]復制代碼[/td] [/tr] [tr]        [td=2,1]$(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('提交成





系統自動相關推薦tag:forum,交友,alexa



上一篇︰Javascript 正則表達式使用變量-js教程-網頁制作
下一篇︰waterfall瀑布流網頁實現的兩種設計方案Masonry與KISSY-js教程-網頁制作
+10
如您覺得" ajax 跨域提交數據實例詳解-js教程-網頁制作 "很膠,請share出去
您正在回覆: ajax 跨域提交數據實例詳解-js教程-網頁制作
您需要登錄後才可以回帖 登錄 | 新會員註冊

本版積分規則

回post預設係匿名,如唔想匿名回post請會員自己勾走

閱讀版|閱讀版大量|純文字網頁|香港交友討論區

Copyright © 香港交友討論區HKEASYCHAT Co. All Rights Reserved
香港廣告銷售No.1

手機版|論壇聯絡
HK ADVERTISEMENT 2015 GOLDEN REWARDS

GMT+8, 27-5-2018 03:20 AM

快速回復 返回頂部 返回列表
保持討論區活躍高登錄一齊討論啦~ hkeasychat