AJax基礎

概念介紹–同步

步驟：
- 客戶端 發送請求，等待相應
- 服務端 處理請求，返回相應
- 客戶端 頁面載入
- 。。。

概念介紹–異步

• 運用HTML和CSS來實現頁面、表達信息;
• 運用XMLHttpRequest和web服務器進行數據的異步交換；
• 運用JavaScript操作DOM，實現動態局部刷新;

概念介紹–HTTP

• 一個完整的HTTP請求過程，通常有如下7個步驟：

  1. 建立TCP連接
  2. Web瀏覽器向Web服務器發送請求命令
  3. Web瀏覽器發送請求頭信息
  4. Web服務器應答
  5. Web服務器發送應答頭信息
  6. Web服務器向瀏覽器發送數據
  7. Web服務器關閉TCP連接

• 一個HTTP請求一般由四部分組成：

  1. HTTP請求的方法或動作，比如是GET還是POST請求
  2. 正在請求的URL，總得知道請求的地址是什麼
  3. 請求頭，包含一些客戶端環境信息，身份驗證信息等
  4. 請求體，即請求正文。請求正文中可以包含客戶提交的查詢字符串信息，表單等待。

• HTTP狀態碼由三位數字構成，其中首位數字定義了狀態嗎的類型：

  1. 1XX:信息類，表示收到Web瀏覽器請求，正在進一步的處理中
  2. 2XX:成功，表示用戶請求被正確接收，理解和處理。例如：200 OK
  3. 3XX: 重定向，表示用戶請求沒有成功，客戶端必須採取進一步的動作
  4. 4XX: 客戶端錯誤，表示客戶端提交的請求有錯誤，例如：404 NOT Found，意味着請求中所引用的文檔不存在。
  5. 5XX: 服務器錯誤，表示服務器不能完成對請求的處理。如：500

概念介紹–XMLHttpRequest

1. XMLHttpRequest對象實例化

var request;
if (window.XMLHttpRequest) {
    //IE7+,Firefox,Chrome,Opera,Safari
   request = new XMLHttpRequest();
} else {
    //IE6.IE5
    request = new ActiveXObject("Microsoft.XMLHTTP");
}

1. XMLHttpRequest發送請求

   • open(method, url, async)

   method:發送請求方法
   url: 請求地址
   async:請求同步/異步，默認true(異步)

   • send(string)

例如：
request.open(“GET”, “get.php”, true);
request.send();

request.open("POST", "post.php", true);
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send("name=lxd&sex=male");

1. XMLHttpRequest取得響應

   • responseText: 獲得字符串形式的響應數據
   • responseXML: 獲得XML形式的響應數據
   • status和statusText: 以數字和文字形式返回HTTP狀態碼
   • getAllResponseHeader(): 獲取所有的響應報頭
   • getResponseHeader(): 查詢響應中的某個字段的值

   • readyState屬性

   • 0：請求未初始化，open還沒有調用

   • 1：服務器連接已經建立，open已經調用了
   • 2：請求已接收，即接收到頭信息了
   • 3：請求處理中，即接收到響應主體了
   • 4：請求已完成，且響應已就緒，即響應完成了

   var request = new XMLHttpRequest();
   request.open(“GET”, “get.php”, true);
   request.send();
   request.onreadystatechange = function() {
   if (request.readyState === 4 && request.status === 200) {
   //do sth requst.responseText
   }
   }

JSON 基本概念

• JSON：JavaScript對象表示法(JavaScript Object Notation)

擴展知識–跨域方式處理

跨域 JavaScript出於安全方面的考慮，不允許跨域調用其他頁面的對象。簡單的理解就是因爲JavaScript同源策略的限制，a.com域名下的js無法操作b.com或是c.a.com域名下的對象。

處理跨域的方式：
1. 代理

在同域名的web服務器建立一個代理

1. JSONP

   JSONP可用於解決主流瀏覽器的跨域數據訪問的問題。

2. XHR2