1凫岖、ajax是什么
AJAX 不是新的編程語言汪疮，而是一種使用現(xiàn)有標(biāo)準(zhǔn)的新方法门岔。
AJAX 是與服務(wù)器交換數(shù)據(jù)并更新部分網(wǎng)頁的藝術(shù)爱致，在不重新加載整個(gè)頁面的情況下。
2固歪、ajax基礎(chǔ)
XMLHttpRequest 是 AJAX 的基礎(chǔ)蒜鸡。所有現(xiàn)代瀏覽器均支持 XMLHttpRequest 對象（IE5 和 IE6 使用 ActiveXObject）。
2.1 XHR對象創(chuàng)建
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 請求
如需將請求發(fā)送到服務(wù)器牢裳，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法逢防。
xhr.open(method,url,async,userName,pwd);
xhr.send(data);
（1）open方法
| open方法參數(shù) | 說明 |
|---|---|
| method | 請求方法，put get post delete蒲讯。 |
| url | 服務(wù)器資源的路徑 |
| async | true（異步）或 false（同步） |
| userName | http認(rèn)證需要的用戶名 |
| pwd | http認(rèn)證需要的密碼 |
（2）send方法
send 方法忘朝，真正執(zhí)行發(fā)送請求，data表示發(fā)送數(shù)據(jù)判帮。
** （3）setRequestHeader(String key,String value) **
??設(shè)置HTTP請求中的指定頭部header的值為value.此方法需在open方法以后調(diào)用局嘁。
2.3 XHR 響應(yīng)
**（1）onreadystatechange **
??一個(gè)函數(shù)，當(dāng)請求被發(fā)送到服務(wù)器時(shí)晦墙，我們需要執(zhí)行一些基于響應(yīng)的任務(wù)悦昵。每當(dāng) readyState 改變時(shí)，就會觸發(fā) onreadystatechange 事件晌畅。readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息但指。
（2）readyState
存有 XMLHttpRequest 的狀態(tài)。從 0 到 4 發(fā)生變化。
| 屬性值 | 說明 |
|---|---|
| 0 | 請求未初始化 |
| 1 | 服務(wù)器連接已建立 |
| 2 | 請求已接收 |
| 3 | 請求處理中 |
| 4 | 請求已完成棋凳，且響應(yīng)已就緒 |
（3）status
http協(xié)議響應(yīng)的狀態(tài)代碼拦坠。可參考 http://www.reibang.com/p/0726627f3907
（4）statusText
服務(wù)器返回狀態(tài)的文本信息剩岳。
（5）getAllResponseHeaders()
??返回值是一個(gè)字符串贞滨，包含所有頭信息，其中每個(gè)鍵名和鍵值用冒號分開拍棕，每一組鍵之間用CR和LF（回車加換行符）來分隔晓铆。注意：只能拿到限制以外（即被視為safe）的header字段，而不是全部字段莫湘。
（6） getResponseHeader(String header)
返回HTTP響應(yīng)頭中指定的鍵名header對應(yīng)的值尤蒿。注意：只能拿到限制以外（即被視為safe）的header字段，而不是全部字段幅垮。
（7）響應(yīng)數(shù)據(jù)
如需獲得來自服務(wù)器的響應(yīng)腰池，請使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性。
| 屬性 | 描述 |
|---|---|
| responseText | 獲得字符串形式的響應(yīng)數(shù)據(jù)忙芒。 |
| responseXML | 獲得XML形式的響應(yīng)數(shù)據(jù)示弓。 |
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 后端代碼：
//調(diào)用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呵萨、常見錯(cuò)誤
No 'Access-Control-Allow-Origin' header is present on the requested resource.
服務(wù)器端不支持跨域奏属。跨域支持參考 http://www.reibang.com/p/b83094c81ca9
