JavaScript基礎複習(七) Ajax&跨域

Ajax

原理

通過 XMLHttpRequest對象來向服務器發送異步請求，從服務器獲得數據，然後用JS操作DOM，從而更新頁面。

編寫步驟

• 創建AJAX對象 XMLHttpRequest
• 打開一個連接 open(“GET”,URL,asnyc)
• 發送數據 send();
• 事件處理函數，處理服務器的響應結果 onreadystatechange

實現步驟

//創建ajax對象
var request=null;
if(window.XMLHttpRequest){
	request = new XMLHttpRequest();
}else{
	request = new ActiveXObject("Microsoft.XMLHTTP");
}
//連接服務器
request.open("GET",url,true);
//發送請求
request.send();
//接收返回
request.onreadystatechange = function(){
	if(request.readyState==4 && request.status==200){
		fnSucc(request.responseText);
	}else{
		if(fnFail){
			fnFail();	
		}
	}
}

GET&POST

—	—	—	—
get	將數據放在URL(網址)裏面來提交	安全性低 容量低,幾K 獲取數據	便於分享 如瀏覽帖子 可以緩存
post	將數據放在不是URL的地方	安全性一般 容量無限 上傳數據	不便於分享 如用戶註冊

可以使用jquery封裝好的$.ajax去異步獲取後臺的數據

$.ajax({
    type: "POST",
    url: url,
    data:{},//數據
    async: false,//同步
    dataType: 'json',
    success: function (data) {
        alert(JSON.stringify(data))
    },
    error: function (XMLHttpRequest, textStatus, errorThrown) {
        alert("報錯");
    }
}); 

跨域

解決參考

jsonp

在同源策略下，在某個服務器下的頁面是無法獲取到該服務器以外的數據的，但img、iframe、script等標籤是個例外，這些標籤可以通過src屬性請求到其他服務器上的數據。

而JSONP就是通過script節點src調用跨域的請求。基於JSONP的實現原理,所以JSONP只能是“GET”請求,不能進行較爲複雜的POST和其它請求

當我們通過JSONP模式請求跨域資源時，服務器返回給客戶端一段javascript代碼，這段javascript代碼自動調用客戶端回調函數

• 原生JS實現：

function createJs(sUrl){
    var oScript = document.createElement('script');
    oScript.type = 'text/javascript';
    oScript.src = sUrl;
    document.getElementsByTagName('head')[0].appendChild(oScript);
}
createJs('jsonp.js');
// src:
// http://www.baidu.com/json/?callback=box
// 回調函數
function box(json){
    alert(json.name);
}

// 服務器返回給客戶端一段javascript代碼
// jsonp.js
box({
   'name': 'test'
 });

• Jquery實現 （使用封裝的ajax）

$.ajax({
	url:"http://localhost:8088/read.php",
	type:"GET",
	asnyc:false,
	dataType:"jsonp",
    jsonp: "callback",
    jsonpCallback:"box",
	success:function(data){
		alert(JSON.stringify(data.name)+" is "+JSON.stringify(data.age)+" years old");
	},
	error:function(){
		alert('fail');
	}
});

CORS解決跨域問題 跨域資源共享

CORS 需要瀏覽器和服務端同時支持的，對於兼容性來說主要是ie10+，其它現代瀏覽器都是支持的。

document.domain

window.name

HTML5中新引進的window.postMessage

ps: