1、ajax是什麼
AJAX 不是新的程式設計語言,而是一種使用現有标準的新方法。
AJAX 是與伺服器交換資料并更新部分網頁的藝術,在不重新加載整個頁面的情況下。
2、ajax基礎
XMLHttpRequest 是 AJAX 的基礎。所有現代浏覽器均支援 XMLHttpRequest 對象(IE5 和 IE6 使用 ActiveXObject)。
2.1 XHR對象建立
function getXhr(){
var xhr;
// code for IE7+, Firefox, Chrome, Opera, Safari
if(window.XMLHttpRequest){
xhr =new XMLHttpRequest();
}else{
xhr =new ActiveXObject("Microsoft.XMLHTTP");;
}
return xhr;
}
2.2 XHR 請求
如需将請求發送到伺服器,我們使用 XMLHttpRequest 對象的 open() 和 send() 方法。
xhr.open(method,url,async,userName,pwd);
xhr.send(data);
(1)open方法
open方法參數 | 說明 |
---|---|
method | 請求方法,put get post delete。 |
url | 伺服器資源的路徑 |
async | true(異步)或 false(同步) |
userName | http認證需要的使用者名 |
pwd | http認證需要的密碼 |
(2)send方法
send 方法,真正執行發送請求,data表示發送資料。
** (3)setRequestHeader(String key,String value) **
設定HTTP請求中的指定頭部header的值為value.此方法需在open方法以後調用。
2.3 XHR 響應
**(1)onreadystatechange **
一個函數,當請求被發送到伺服器時,我們需要執行一些基于響應的任務。每當 readyState 改變時,就會觸發 onreadystatechange 事件。readyState 屬性存有 XMLHttpRequest 的狀态資訊。
(2)readyState
存有 XMLHttpRequest 的狀态。從 0 到 4 發生變化。
屬性值 | |
---|---|
請求未初始化 | |
1 | 伺服器連接配接已建立 |
2 | 請求已接收 |
3 | 請求進行中 |
4 | 請求已完成,且響應已就緒 |
(3)status
http協定響應的狀态代碼。可參考
http://www.jianshu.com/p/0726627f3907(4)statusText
伺服器傳回狀态的文本資訊。
(5)getAllResponseHeaders()
傳回值是一個字元串,包含所有頭資訊,其中每個鍵名和鍵值用冒号分開,每一組鍵之間用CR和LF(回車加換行符)來分隔。注意:隻能拿到限制以外(即被視為safe)的header字段,而不是全部字段。
(6) getResponseHeader(String header)
傳回HTTP響應頭中指定的鍵名header對應的值。注意:隻能拿到限制以外(即被視為safe)的header字段,而不是全部字段。
(7)響應資料
如需獲得來自伺服器的響應,請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
屬性 | 描述 |
---|---|
responseText | 獲得字元串形式的響應資料。 |
responseXML | 獲得XML形式的響應資料。 |
3、完整代碼
html代碼:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ajax 請求</title>
<script type="text/javascript">
function getXhr(){
var xhr;
// code for IE7+, Firefox, Chrome, Opera, Safari
if(window.XMLHttpRequest){
xhr =new XMLHttpRequest();
}else{
xhr =new ActiveXObject("Microsoft.XMLHTTP");;
}
return xhr;
}
function ajax(method,url,async,data,callback){
var xhr = getXhr();
xhr.open(method,url,async);
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
callback(xhr.responseText,xhr);
}
}
if(data){
xhr.send(data);
}else{
xhr.send();
}
}
/*注意該URL需要支援跨域或者與JS處在相同的域*/
var url = "http://127.0.0.1:8080";
var async = true;
ajax('get',url,async,null,function(data,xhr){
alert("status="+xhr.status);
alert("statusText="+xhr.statusText);
alert("responseText="+data);
var allHeaders = xhr.getAllResponseHeaders();
alert("getAllResponseHeaders="+allHeaders);
var contentType = xhr.getResponseHeader("Content-Language");
alert("getResponseHeader('Content-Language')="+contentType);
});
alert(async?"異步":" 同步");
</script>
</head>
<body>
</body>
</html>
node js 後端代碼:
//調用http子產品
var http = require('http');
var server = http.createServer(function (request, response) {
response.setHeader('Access-Control-Allow-Origin' ,'*');
response.setHeader('Access-Control-Allow-Methods'
,'GET, POST,PUT,DELETE, OPTIONS');
response.setHeader('Access-Control-Allow-Headers' ,'token');
response.writeHead(200, {
'Content-Type': 'text/plain',
'Content-Language': 'zh_CN'
});
response.write("{'data':'data-json'}");
response.end();
});
server.listen(8080);
//列印日志
console.log('Http server is started. http://127.0.0.1:8080');
4、常見錯誤
No 'Access-Control-Allow-Origin' header is present on the requested resource.
伺服器端不支援跨域。跨域支援參考
http://www.jianshu.com/p/b83094c81ca9