原生髮送AJAX請求

1.XMLHttpRequest物件是ajax的基礎,XMLHttpRequest 用於與伺服器交換資料。 2.ajax請求過程：建立XMLHttpRequest物件、連線伺服器、傳送請求、接受相響應資料。

測試get型別的Ajax請求

// 1.建立一個XMLHttpRequest物件
var xml = new XMLHttpRequest();
// 2.繫結XMLHttpRequest物件狀態發生變化的監聽回撥
xml.onreadyStatechange = function(){
// 表示資料完全接受完畢
if(xml.readyState ===4){
    // 表示伺服器響應成功
    if(xml.status === 200){
	    // 得到響應返回的資料
	    xml.responseTest;
	    }
    }
}
// 3.建立http請求
xml.open('GET','/test/get?name=koke');
// 4.傳送http請求
xml.send();
 

測試post型別的Ajax請求

if(xml.readyState === 4 && xml.status === 200)
// 建立http請求
xml.open('POST','test/post/q');
// 在使用post方法時，必須新增請求頭
xmlHttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
// 傳送請求攜帶引數
xml.send('username=keke');

問題:反覆多次傳送ajax請求，會出現bug 解決方法：使用abort攔截ajax請求

var xml = null;
if(xml === null){ // 判斷使用者是不是第一次傳送請求
xml = new XMLHttpRequest();
else{ // 已經存在了ajax請求，不是第一次請求了，請求還沒有結束
	xml.abort();  // 攔截最新的請求
	}
}
 

使用JSONP解決跨域問題

JSONP藉助了script標籤節點跨域訪問/獲取的特性。JSONP實現跨域請求的原理簡單的說，就是動態建立<script>標籤，然後利用<script>的src不受同源策略約束來跨域獲取資料。

1. 動態建立script標籤
function createScript(scr){
    var script = document.createElement('script');
    script.setAttribute('type','text/javascript');
    script.src = src;
    document.body.appendChild(script)
    };
    2. 觸發點選事件，傳送跨域請求
    click=function(){
	    var url = 'http://localhose:3000/ajax/test?callback=getDatas'+'&'+username;
	    createScript(url);
	    }
	    3.具體的功能函式，從後臺獲取到的資料
	    getDatas(data){
		    data就是跨域請求後得到的資料
		    }
		    ？callback=函式名，跨域的書寫形式，callback是標識，後臺呼叫這個函式，並傳遞資料。