1. 程式人生 > >原生js ajax實現

原生js ajax實現

  • 例項化XMLHttpRequet
    var request = new XMLHttpRequest();
  • 呼叫XMLHttpRequet物件的open方法,引數【方法,url】
    request.open("GET","data.scv");
    如果有請求頭需設定請求頭
    request.setRequestHeader("Content-Type","text/plain");
  • 向伺服器傳送請求
    request.send(null);//get請求沒有請求主體,傳null或者省略這個引數
    例子:
		//post傳送文字給伺服器
		function(msg) {
    		var request = new XMLHttpRequest();
    		request.open("POST","/log.php");
    		 request.setRequestHeader("Content-Type","text/plain;charset=UTF-8");
    		 request.send(msg)
    	}
  • 取得響應
    通過監聽XMLHttpRequet物件上的readyState事件,readyState是一個整數,指定http請求狀態。
    0 open()尚未呼叫
    1 open()已呼叫
    2 接收到頭的資訊
    3 接收到響應主體
    4 響應完成

    每次readyState都會觸發readystatechange事件,實際上readystate改變為0或1時可能沒有觸發這個事件,

//傳送get請求獲得url內容
function getText(url){
	var request = new XMLHttpRequest();
	request.open("POST",url,false);//傳送非同步請求
	request.send(null);//立即傳送請求
	if (request.status !== 200) {
		throw new Error("request.statusText");
	}
	var type = request.getResponseHeader("Content-type");
	if (!type.match(/^text/)) 
		throw new Error("Response Type is:" + type)
	return request.responseText;
}