1. 程式人生 > >前端學習之ajax

前端學習之ajax

前端學習值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 }}‘ },
})


本文出自 “linux技術” 博客,請務必保留此出處http://haoyonghui.blog.51cto.com/4278020/1960538

前端學習之ajax