js温故而知新11(AJAX)——学习廖雪峰的js教程
Asynchronous JavaScript and XML，意思就是用JavaScript執行異步網絡請求。
如果仔細觀察一個Form的提交，你就會發現，一旦用戶點擊“Submit”按鈕，表單開始提交，瀏覽器就會刷新頁面，然后在新頁面里告訴你操作是成功了還是失敗了。如果不幸由于網絡太慢或者其他原因，就會得到一個404頁面。
這就是Web的運作原理：一次HTTP請求對應一個頁面。
如果要讓用戶留在當前頁面中，同時發出新的HTTP請求，就必須用JavaScript發送這個新請求，接收到數據后，再用JavaScript更新頁面，這樣一來，用戶就感覺自己仍然停留在當前頁面，但是數據卻可以不斷地更新。
如果你想把標準寫法和IE寫法混在一起，可以這么寫：
var request; if (window.XMLHttpRequest) {request = new XMLHttpRequest(); } else {request = new ActiveXObject('Microsoft.XMLHTTP'); }當創建了XMLHttpRequest對象后，要先設置onreadystatechange的回調函數。在回調函數中，通常我們只需通過readyState === 4判斷請求是否完成，如果已完成，再根據status === 200判斷是否是一個成功的響應。
XMLHttpRequest對象的open()方法有3個參數，第一個參數指定是GET還是POST，第二個參數指定URL地址，第三個參數指定是否使用異步，默認是true，所以不用寫。
最后調用send()方法才真正發送請求。GET請求不需要參數，POST請求需要把body部分以字符串或者FormData對象傳進去。
跨域：
一是通過Flash插件發送HTTP請求，這種方式可以繞過瀏覽器的安全限制，但必須安裝Flash，并且跟Flash交互。不過Flash用起來麻煩，而且現在用得也越來越少了。
二是通過在同源域名下架設一個代理服務器來轉發，JavaScript負責把請求發送到代理服務器：
'/proxy?url=http://www.sina.com.cn'代理服務器再把結果返回，這樣就遵守了瀏覽器的同源策略。這種方式麻煩之處在于需要服務器端額外做開發。
第三種方式稱為JSONP，它有個限制，只能用GET請求，并且要求返回JavaScript。這種方式跨域實際上是利用了瀏覽器允許跨域引用JavaScript資源：
<html> <head><script src="http://example.com/abc.js"></script>... </head> <body> ... </body> </html>JSONP通常以函數調用的形式返回，例如，返回JavaScript內容如下：
foo('data');這樣一來，我們如果在頁面中先準備好foo()函數，然后給頁面動態加一個<script>節點，相當于動態讀取外域的JavaScript資源，最后就等著接收回調了。
因此我們需要首先在頁面中準備好回調函數：
function refreshPrice(data) {var p = document.getElementById('test-jsonp');p.innerHTML = '當前價格：' +data['0000001'].name +': ' + data['0000001'].price + '；' +data['1399001'].name + ': ' +data['1399001'].price; }最后用getPrice()函數觸發：
function getPrice() {varjs = document.createElement('script'),head = document.getElementsByTagName('head')[0];js.src = 'http://api.money.126.net/data/feed/0000001,1399001?callback=refreshPrice';head.appendChild(js); }CORS
Cross-Origin Resource Sharing
Origin表示本域，也就是瀏覽器當前頁面的域。當JavaScript向外域（如sina.com）發起請求后，瀏覽器收到響應后，首先檢查Access-Control-Allow-Origin是否包含本域，如果是，則此次跨域請求成功，如果不是，則請求失敗，JavaScript將無法獲取到響應的任何數據。
用一個圖來表示就是：
假設本域是my.com，外域是sina.com，只要響應頭Access-Control-Allow-Origin為http://my.com，或者是*，本次請求就可以成功。
可見，跨域能否成功，取決于對方服務器是否愿意給你設置一個正確的Access-Control-Allow-Origin，決定權始終在對方手中。
無論你是否需要用JavaScript通過CORS跨域請求資源，你都要了解CORS的原理。最新的瀏覽器全面支持HTML5。在引用外域資源時，除了JavaScript和CSS外，都要驗證CORS。例如，當你引用了某個第三方CDN上的字體文件時：
/* CSS */ @font-face {font-family: 'FontAwesome';src: url('http://cdn.com/fonts/fontawesome.ttf') format('truetype'); }如果該CDN服務商未正確設置Access-Control-Allow-Origin，那么瀏覽器無法加載字體資源。
對于PUT、DELETE以及其他類型如application/json的POST請求，在發送AJAX請求之前，瀏覽器會先發送一個OPTIONS請求（稱為preflighted請求）到這個URL上，詢問目標服務器是否接受：
OPTIONS /path/to/resource HTTP/1.1 Host: bar.com Origin: http://my.com Access-Control-Request-Method: POST服務器必須響應并明確指出允許的Method：
HTTP/1.1 200 OK Access-Control-Allow-Origin: http://my.com Access-Control-Allow-Methods: POST, GET, PUT, OPTIONS Access-Control-Max-Age: 86400瀏覽器確認服務器響應的Access-Control-Allow-Methods頭確實包含將要發送的AJAX請求的Method，才會繼續發送AJAX，否則，拋出一個錯誤。
總結
以上是生活随笔為你收集整理的js温故而知新11(AJAX)——学习廖雪峰的js教程的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Mybatis——返回类型为 集合嵌套集
- 下一篇： Git在版本2.13中继续改进了安全性和