本文章內容大部分摘自@姜維_Wayne 老師在imooc中的免費課程Ajax全接觸
目的是作為一個課程的總結和Ajax知識的概覽

AJAX

Asynchronous JavaScript and XML（非同步的JS和XML）
是一種在無需重新載入整個網頁的情況下能更新部分網頁的技術。

Ajax非同步

同步請求的一般流程

非同步請求的一般流程
在表單填寫的過程中就可以得到反饋，比如必須到伺服器中查詢的使用者名稱是否重複

XHR
XMLHttpRequest 可擴充套件超文字傳輸請求
XMLHttpRequest 物件是名為 AJAX 的 Web 應用程式架構的一項關鍵功能。
實現區域性重新整理需要三點

1. 運用HTML和CSS來實現頁面表達資訊
2. 運用XMLHttpRequest和web伺服器進行資料的非同步交換
3. 運用js操作DOM，實現動態區域性重新整理

XMLHttpRequest 物件
ie瀏覽器5和6不支援

var request;

if(window.XMLHttpRequest){
	request = new XMLHttpRequest();  //ie 7+, firefox, chrome ,opera ,safari
}else{
	request = new ActiveXObject("Micsoft.XMLHTTP");//ie 5/6
 

}

什麼是HTTP請求？
HyperText Transfer Protocol 是網際網路上應用最為廣泛的一種網路協議，是計算機通過網路進行通訊的規則
是一種無狀態的協議，服務端不保留連結的資訊
一個完整的HTTP請求通常有7個步驟

1. 建立TCP連結
2. 瀏覽器向伺服器傳送請求命令
3. 瀏覽器傳送請求頭資訊
4. 伺服器應答
5. 伺服器傳送應答頭資訊
6. 伺服器向瀏覽器傳送資料
7. 伺服器關閉TCP連結

具體請求資訊如下

GET和POST請求的區別

GET請求是對任何人都可見的
POST請求一般是不可見的，但是可以被攔截

HTTP相應

• 0 本地請求，伺服器成功返回了頁面
• 200 OK 伺服器成功返回了資料或者頁面
• 300-3007表示的意思是：要完成請求，您需要進一步進行操作。通常，這些狀態程式碼是永遠重定向的。
• 400Bad Request 語法錯誤導致伺服器不識別
• 401Unauthorized 請求需要使用者認證
• 404 Not found 指定的URL在伺服器上找不到
• 500Internal Server Error 伺服器遇到意外錯誤，無法完成請求
• 503ServiceUnavailable由於伺服器過載或維護導致無法完成請求

XMLHttpRequest傳送請求

• open(method,url,async)
• send(string)

例如

setRequestHeader() 設定請求頭，必須在open和send之間

XMLHttpRequest取得相應


一個完整的XHR請求





JQuery中的Ajax

跨域請求

JS出於安全方面的考慮不允許跨域呼叫其他頁面的物件。




跨域解決方案

• 伺服器代理請求
• JSONP
• <script src="">標籤
• XHR2 （ie10以下不支援）

//XHR2的設定
header("Access-Control-Allow-Origin:*")//星號代表全部，可以指定允許跨域地址
header("Access-Control-Allow-Methods:POST,GET")

nodejs跨域

var http=require("http")
var fs = require('fs')
var server=http.createServer();
server.on('request',function(req,res){
 
res.setHeader("Access-Control-Allow-Origin", "*"); 
res.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
res.setHeader("Access-Control-Allow-Methods","PUT,POST,GET,DELETE,OPTIONS");
res.setHeader("X-Powered-By",' 3.2.1');
res.setHeader("Content-Type", "text/html"); 
 
    if(req.url === "/login"){
          fs.readFile('./login.html','utf-8',function(err,data){
        	if(err){
        		console.log(err)
        	}
        	res.end(data)         
        }) 
 
    }
    
})
 
 
server.listen(8080,"localhost",function(){
    console.log("開始監聽...");
});