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