js溫故而知新11(AJAX)——學習廖雪峰的js教程

kun_jian 發布于2019-08-20 16:45 / 2862人閱讀

摘要：在回調函數中，通常我們只需通過判斷請求是否完成，如果已完成，再根據判斷是否是一個成功的響應。因此我們需要首先在頁面中準備好回調函數當前價格最后用函數觸發表示本域，也就是瀏覽器當前頁面的域。

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資源：



    
    ...


...

JSONP通常以函數調用的形式返回，例如，返回JavaScript內容如下：

foo("data");

這樣一來，我們如果在頁面中先準備好foo()函數，然后給頁面動態加一個

假設本域是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，否則，拋出一個錯誤。

GPU云服務器云服務器廖雪峰的python教程 python教程廖雪峰 python廖雪峰教程廖雪峰python視頻教程

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/83133.html

js溫故而知新8(瀏覽器)——學習廖雪峰的js教程

摘要：對象不但充當全局作用域，而且表示瀏覽器窗口。對象有和屬性，可以獲取瀏覽器窗口的內部寬度和高度。對象表示當前頁面的信息。由于在瀏覽器中以形式表示為樹形結構，對象就是整個樹的根節點。這個行為由瀏覽器實現，主流瀏覽器均支持選項，從開始支持。瀏覽器目前主流的瀏覽器： IE 6~11：從IE10開始支持ES6標準； Chrome：基于Webkit內核，內置了非常強悍的JavaScript引...

charles_paul 2019-08-20 15:07 評論0 收藏0
js溫故而知新4——學習廖雪峰的js教程

摘要：你可能認為調用，和結果應該是，，，但實際結果是全部都是原因就在于返回的函數引用了變量，但它并非立刻執行。返回閉包時牢記的一點就是返回函數不要引用任何循環變量，或者后續會發生變化的變量。真的是看著很暈那閉包另一個需要注意的問題是，返回的函數并沒有立刻執行，而是直到調用了f()才執行。我們來看一個例子： function count() { var arr = []; ...

genefy 2019-08-21 11:35 評論0 收藏0
js溫故而知新10(操作表單)——學習廖雪峰的js教程

摘要：用操作表單和操作是類似的，因為表單本身也是樹。因此，第二種方式是響應本身的事件，在提交時作修改可以在此修改的繼續下一步注意要來告訴瀏覽器繼續提交，如果，瀏覽器將不會繼續提交，這種情況通常對應用戶輸入有誤，提示用戶錯誤信息后終止提交。用JavaScript操作表單和操作DOM是類似的，因為表單本身也是DOM樹。 HTML表單的輸入控件主要有以下幾種：文本框，對應的，用于輸入文本； ...

simon_chen 2019-08-20 15:08 評論0 收藏0
js溫故而知新6(JSON)——學習廖雪峰的js教程

JSON JSON是JavaScript Object Notation的縮寫，它是一種數據交換格式。道格拉斯·克羅克福特（Douglas Crockford）--雅虎的高級架構師--發明了JSON這種超輕量級的數據交換格式. 序列化讓我們先把小明這個對象序列化成JSON格式的字符串： var xiaoming = { name: 小明, age: 14, gender...

20171112 2019-08-21 11:36 評論0 收藏0
js溫故而知新2——學習廖雪峰的js教程

摘要：讓我們拆開寫小明正常結果單獨調用函數怎么返回了請注意，我們已經進入到了的一個大坑里。如果單獨調用函數，比如，此時，該函數的指向全局對象，也就是。函數 1. arguments JavaScript還有一個免費贈送的關鍵字arguments，它只在函數內部起作用，并且永遠指向當前函數的調用者傳入的所有參數。arguments類似Array但它不是一個Array： function fo...

Caizhenhao 2019-08-21 11:34 評論0 收藏0