前端學習之ajax

一、什么是json
JSON(JavaScript Object Notation, JS 對象標記) 是一種輕量級的數據交換格式。
它基于 ECMAScript (w3c制定的js規范)的一個子集，采用完全獨立于編程語言的文本格式來存儲和表示
數據。簡潔和清晰的層次結構使得 JSON 成為理想的數據交換語言。 易于人閱讀和編寫，同時也易于
機器解析和生成，并有效地提升網絡傳輸效率。

json類型是js類型的子集
json對象到json字符串是序列化過程，json字符串到json對象是反序列化過程
python的json模塊，json.dumps(對象)，序列化，json.loads(json字符串)反序列化

合格的json對象：
["one", "two", "three"]

{ "one": 1, "two": 2, "three": 3 }

{"names": ["張三", "李四"] }

[ { "name": "張三"}, {"name": "李四"} ]

不合格的json對象
{ name: "張三", 'age': 32 }                     // 屬性名必須使用雙引號[32, 64, 128, 0xFFF] // 不能使用十六進制值
{ "name": "張三", "age": undefined }            // 不能使用undefined
{ "name": "張三",  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),  "getName":  function() {return this.name;}    // 不能使用函數和日期對象}

stringify和parse方法
JSON.parse(): 用于將json字符串轉化為javascript對象
console.log(JSON.parse('{"name":"Yuan"}'));
console.log(JSON.parse('{name:"Yuan"}')) ;   // 錯誤
console.log(JSON.parse('[12,undefined]')) ;   // 錯誤

JSON.stringify(): 用于將javascript對象轉化為JSON字符串
console.log(JSON.stringify({'name':"egon"})) ;

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

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

ajax優缺點
優點:
1、ajax異步請求
2、ajax無需刷新整個頁面
3、因為服務器響應內容不再是整個頁面，而是頁面中的局部，所以AJAX性能高；

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

ajax語法
$.ajax({
               url:"/handle_Ajax/",
               type:"POST",
               data:{username:"Yuan",password:123},

               success:function(data){
                   alert(data)
               }
               }）
               
data: 當前ajax請求要攜帶的數據，是一個json的object對象，ajax方法就會默認地把它編碼成某種格式
             (urlencoded:?a=1&b=2)發送給服務端；此外，ajax默認以get方式發送請求。

contentType：默認值: "application/x-www-form-urlencoded"。發送信息至服務器時內容編碼類型。
             用來指明當前請求的數據編碼格式；urlencoded:?a=1&b=2；如果想以其他方式提交數據，
             比如contentType:"application/json"，即向服務器發送一個json字符串：
               $.ajax("/ajax_get",{
             
                  data:JSON.stringify({
                       a:22,
                       b:33
                   }),
                   contentType:"application/json",
                   type:"POST",
             
               });                          //{a: 22, b: 33}

             注意：contentType:"application/json"一旦設定，data必須是json字符串，不能是json對象

csrf跨站請求偽造
$.ajaxSetup({
    data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
})

django 接受 ajax 傳來的數組對象
發送：ajax 通過 POST 方式傳來一個數組
接收：django 接受方式 
array = request.POST.getlist(‘key[]’)
其中，key為包含該數組的鍵值對的鍵。 
尤其要注意“[]”，少了它將不能接受成功
為什么要加”[]”？ 
分析前臺發送數據，我們會發現：ajax自動給數組中的數據的鍵名后添加了”[]”