前端學習之ajax
阿新 • • 發佈:2017-08-29
前端學習值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