AJAX簡介

1.1 什么是JSON？

JSON(JavaScript Object Notation) 是一種輕量級的數據交換格式。JSON是用字符串來表示Javascript對象；

請大家記住一句話：json字符串就是js對象的一種表現形式(字符串的形式)

既然我們已經學過python的json模塊，我們就用它來測試下json字符串和json對象到底是什么

 

這里面的json_str就是json字符串；

那么json字符串里都可以放哪些值呢？

JSON字符串內的值：

• 數字    （整數或浮點數）
• 字符串 （在雙引號中）
• 邏輯值 （true 或 false）
• 數組    （在方括號中）
• 對象    （在花括號中，引號用雙引）
• null     
  

        看着是不是有點眼熟啊，對了，這就是咱們js的數據對象；不管是python還是其它語言，它們都有自己的數據類型，但如果要處理成json字符串那么，就要把數據換轉成js對應的數據對象（比如python的元組就被處理成了數組，字典就被處理成object），再加上引號就是咱們的json字符串了；
       前端接受到json字符串，就可以通過JSON.parse()等方法解析成json對象(即js對象)直接使用了。

       之所以稱json對象為js的子集，是因為像undefined,NaN,{'name':'yuan'}等都不在json對象的范疇。

1.2 python與json對象的對應：

        python         -->        json
        dict                      object
        list,tuple                array
        str,unicode               string
        int,long,float            number
        True                      true
        False                     false
        None                      null

讓我們看一個帶方法的json對象：

 

person是一個json對象，因為它滿足json規范：在json六大范疇且引號雙引！

1.3 .parse()和.stringify()

 

1.4  django向js發送數據

 

此外，還可以通過下面介紹的ajax技術使js接受django相應的json數據。

1.5 JSON與XML比較 

• 可讀性：   XML勝出；
• 解碼難度：JSON本身就是JS對象（主場作戰），所以簡單很多；
• 流行度：   XML已經流行好多年，但在AJAX領域，JSON更受歡迎。

注解：其實本沒什么json對象，只是我們自己這么稱呼罷了，所謂的json數據就是指json字符串，在前端解析出來的對象就是js對象的一部分！

二　什么是AJAX

AJAX（Asynchronous Javascript And XML）翻譯成中文就是“異步Javascript和XML”。即使用Javascript語言與服務器進行異步交互，傳輸的數據為XML（當然，傳輸的數據不只是XML）。

• 同步交互：客戶端發出一個請求后，需要等待服務器響應結束后，才能發出第二個請求；
• 異步交互：客戶端發出一個請求后，無需等待服務器響應結束，就可以發出第二個請求。

AJAX除了異步的特點外，還有一個就是：瀏覽器頁面局部刷新；（這一特點給用戶的感受是在不知不覺中完成請求和響應過程）

 

三  AJAX常見應用情景

       

 

當我們在百度中輸入一個“老”字后，會馬上出現一個下拉列表！列表中顯示的是包含“傳”字的4個關鍵字。

其實這里就使用了AJAX技術！當文件框發生了輸入變化時，瀏覽器會使用AJAX技術向服務器發送一個請求，查詢包含“傳”字的前10個關鍵字，然后服務器會把查詢到的結果響應給瀏覽器，最后瀏覽器把這4個關鍵字顯示在下拉列表中。

• 整個過程中頁面沒有刷新，只是刷新頁面中的局部位置而已！
• 當請求發出后，瀏覽器還可以進行其他操作，無需等待服務器的響應！

       

 

當輸入用戶名后，把光標移動到其他表單項上時，瀏覽器會使用AJAX技術向服務器發出請求，服務器會查詢名為zhangSan的用戶是否存在，最終服務器返回true表示名為lemontree7777777的用戶已經存在了，瀏覽器在得到結果后顯示“用戶名已被注冊！”。

• 整個過程中頁面沒有刷新，只是局部刷新了；
• 在請求發出后，瀏覽器不用等待服務器響應結果就可以進行其他操作；

四  AJAX的優缺點

優點：

• AJAX使用Javascript技術向服務器發送異步請求；
• AJAX無須刷新整個頁面；
• 因為服務器響應內容不再是整個頁面，而是頁面中的局部，所以AJAX性能高；

缺點：

• AJAX並不適合所有場景，很多時候還是要使用同步交互；
• AJAX雖然提高了用戶體驗，但無形中向服務器發送的請求次數增多了，導致服務器壓力增大；
• 因為AJAX是在瀏覽器中使用Javascript技術完成的，所以還需要處理瀏覽器兼容性問題；

五  AJAX技術

四步操作：

• 創建核心對象；
• 使用核心對象打開與服務器的連接；
• 發送請求
• 注冊監聽，監聽服務器響應。

XMLHTTPRequest

• open(請求方式, URL, 是否異步)
• send(請求體)
• onreadystatechange，指定監聽函數，它會在xmlHttp對象的狀態發生變化時被調用
• readyState，當前xmlHttp對象的狀態，其中4狀態表示服務器響應結束
• status：服務器響應的狀態碼，只有服務器響應結束時才有這個東東，200表示響應成功；
• responseText：獲取服務器的響應體

六  AJAX實現

6.1 准備工作(后台設定)：

1 2 3 4 5 6

def login(request):      print( 'hello ajax' )      return  render(request, 'index.html' )   def ajax_get(request):      return  HttpResponse( 'helloyuanhao' )

6.2 AJAX核心（XMLHttpRequest）

      其實AJAX就是在Javascript中多添加了一個對象：XMLHttpRequest對象。所有的異步交互都是使用XMLHttpServlet對象完成的。也就是說，我們只需要學習一個Javascript的新對象即可。

1	var xmlHttp  =  new XMLHttpRequest()；（大多數瀏覽器都支持DOM2規范）

注意，各個瀏覽器對XMLHttpRequest的支持也是不同的！為了處理瀏覽器兼容問題，給出下面方法來創建XMLHttpRequest對象：

 

6.3　打開與服務器的連接（open方法）

當得到XMLHttpRequest對象后，就可以調用該對象的open()方法打開與服務器的連接了。open()方法的參數如下：

open(method, url, async)：

• method：請求方式，通常為GET或POST；
• url：請求的服務器地址，例如：/ajaxdemo1/AServlet，若為GET請求，還可以在URL后追加參數；
• async：這個參數可以不給，默認值為true，表示異步請求；

1 2	var  xmlHttp = createXMLHttpRequest(); xmlHttp.open( "GET" ,  "/ajax_get/" ,  true );

6.4　發送請求

當使用open打開連接后，就可以調用XMLHttpRequest對象的send()方法發送請求了。send()方法的參數為POST請求參數，即對應HTTP協議的請求體內容，若是GET請求，需要在URL后連接參數。

注意：若沒有參數，需要給出null為參數！若不給出null為參數，可能會導致FireFox瀏覽器不能正常發送請求！

1	xmlHttp.send( null );

6.5　接收服務器響應

當請求發送出去后，服務器端Servlet就開始執行了，但服務器端的響應還沒有接收到。接下來我們來接收服務器的響應。

XMLHttpRequest對象有一個onreadystatechange事件，它會在XMLHttpRequest對象的狀態發生變化時被調用。下面介紹一下XMLHttpRequest對象的5種狀態：

• 0：初始化未完成狀態，只是創建了XMLHttpRequest對象，還未調用open()方法；
• 1：請求已開始，open()方法已調用，但還沒調用send()方法；
• 2：請求發送完成狀態，send()方法已調用；
• 3：開始讀取服務器響應；
• 4：讀取服務器響應結束。 

onreadystatechange事件會在狀態為1、2、3、4時引發。

　　下面代碼會被執行四次！對應XMLHttpRequest的四種狀態！

1 2 3

xmlHttp.onreadystatechange =  function () {              alert( 'hello' );          };

但通常我們只關心最后一種狀態，即讀取服務器響應結束時，客戶端才會做出改變。我們可以通過XMLHttpRequest對象的readyState屬性來得到XMLHttpRequest對象的狀態。

xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4) {
                alert('hello');    
            }
        };

其實我們還要關心服務器響應的狀態碼是否為200，其服務器響應為404，或500，那么就表示請求失敗了。我們可以通過XMLHttpRequest對象的status屬性得到服務器的狀態碼。

最后，我們還需要獲取到服務器響應的內容，可以通過XMLHttpRequest對象的responseText得到服務器響應內容。

xmlHttp.onreadystatechange = function() {
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                alert(xmlHttp.responseText);    
            }
        };

6.6  if 發送POST請求：

      <1>需要設置請求頭：xmlHttp.setRequestHeader(“Content-Type”, “application/x-www-form-urlencoded”)；

            注意 :form表單會默認這個鍵值對;不設定，Web服務器會忽略請求體的內容。

      <2>在發送時可以指定請求體了：xmlHttp.send(“username=yuan&password=123”)

6.7　AJAX實現小結

 

6.8  請求完整代碼：

 

思考：啟動后台后，直接運行html，會怎么樣？這就涉及到咱們一會要講到的同源策略機制和跨域請求；

七　AJAX實例（用戶名是否已被注冊）

7.1　功能介紹

在注冊表單中，當用戶填寫了用戶名后，把光標移開后，會自動向服務器發送異步請求。服務器返回true或false，返回true表示這個用戶名已經被注冊過，返回false表示沒有注冊過。

客戶端得到服務器返回的結果后，確定是否在用戶名文本框后顯示“用戶名已被注冊”的錯誤信息！

7.2　案例分析

• 頁面中給出注冊表單；
• 在username表單字段中添加onblur事件，調用send()方法；
• send()方法獲取username表單字段的內容，向服務器發送異步請求，參數為username；
• django 的視圖函數：獲取username參數，判斷是否為“yuan”，如果是響應true，否則響應false 

7.3 代碼

 

八 jquery實現的ajax

8.1  快捷API：

 

8.2  核心API的基本使用：

 

8.3  核心API的重要字段(參數)：

 

8.4 實例代碼

 

 

 

8.5 csrf跨站請求偽造

 

九 跨域請求

9.1 同源策略機制

      瀏覽器有一個很重要的概念——同源策略(Same-Origin Policy)。所謂同源是指，域名，協議，端口相同。不同源的客戶端腳本(javascript、ActionScript)在沒明確授權的情況下，不能讀寫對方的資源。

簡單的來說，瀏覽器允許包含在頁面A的腳本訪問第二個頁面B的數據資源，這一切是建立在A和B頁面是同源的基礎上。

如果Web世界沒有同源策略，當你登錄淘寶賬號並打開另一個站點時，這個站點上的JavaScript可以跨域讀取你的淘寶賬號數據，這樣整個Web世界就無隱私可言了。

9.2  jsonp的js實現

         JSONP是JSON with Padding的略稱。可以讓網頁從別的域名（網站）那獲取資料，即跨域讀取數據。

它是一個非官方的協議，它允許在服務器端集成Script tags返回至客戶端，通過javascript callback的形式實現跨域訪問（這僅僅是JSONP簡單的實現形式）。

JSONP就像是JSON+Padding一樣(Padding這里我們理解為填充)

實例：

 

      這其實就是JSONP的簡單實現模式，或者說是JSONP的原型：創建一個回調函數，然后在遠程服務上調用這個函數並且將JSON 數據形式作為參數傳遞，完成回調。

將JSON數據填充進回調函數，這應該就是JSONP的JSON+Padding的含義吧。

      一般情況下，我們希望這個script標簽能夠動態的調用，而不是像上面因為固定在html里面所以沒等頁面顯示就執行了，很不靈活。我們可以通過javascript動態的創建script標簽，這樣我們就可以靈活調用遠程服務了。

 

 為了更加靈活，現在將你自己在客戶端定義的回調函數的函數名傳送給服務端，服務端則會返回以你定義的回調函數名的方法，將獲取的json數據傳入這個方法完成回調：

 

11.3 jQuery對JSONP的實現

jQuery框架也當然支持JSONP，可以使用$.getJSON(url,[data],[callback])方法

 

      結果是一樣的，要注意的是在url的后面必須添加一個callback參數，這樣getJSON方法才會知道是用JSONP方式去訪問服務，callback后面的那個問號是內部自動生成的一個回調函數名。

      此外，如果說我們想指定自己的回調函數名，或者說服務上規定了固定回調函數名該怎么辦呢？我們可以使用$.ajax方法來實現

 

      當然，最簡單的形式還是通過回調函數來處理：

 

       jsonp: 'callbacks'就是定義一個存放回調函數的鍵，jsonpCallback是前端定義好的回調函數方法名'SayHi'，server端接受callback鍵對應值后就可以在其中填充數據打包返回了; 

       jsonpCallback參數可以不定義，jquery會自動定義一個隨機名發過去，那前端就得用回調函數來處理對應數據了。

　    利用jQuery可以很方便的實現JSONP來進行跨域訪問。