前端學習之ajax

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

49

50

51

52

53

54

55

56

57

58

59

60

61

62

63

64

65

66

67

68

69

70

71

72

73

74

75

76

77

78

79

80

<code>一、什麼是json</code>

<code>JSON(JavaScript Object Notation, JS 對象标記) 是一種輕量級的資料交換格式。</code>

<code>它基于 ECMAScript (w3c制定的js規範)的一個子集，采用完全獨立于程式設計語言的文本格式來存儲和表示</code>

<code>資料。簡潔和清晰的層次結構使得 JSON 成為理想的資料交換語言。 易于人閱讀和編寫，同時也易于</code>

<code>機器解析和生成，并有效地提升網絡傳輸效率。</code>

<code>json類型是js類型的子集</code>

<code>json對象到json字元串是序列化過程，json字元串到json對象是反序列化過程</code>

<code>python的json子產品，json.dumps(對象)，序列化，json.loads(json字元串)反序列化</code>

<code>合格的json對象：</code>

<code>["one", "two", "three"]</code>

<code>{ "one": 1, "two": 2, "three": 3 }</code>

<code>{"names": ["張三", "李四"] }</code>

<code>[ { "name": "張三"}, {"name": "李四"} ]</code>

<code>不合格的json對象</code>

<code>{ name: "張三", 'age': 32 }                     // 屬性名必須使用雙引号[32, 64, 128, 0xFFF] // 不能使用十六進制值</code>

<code>{ "name": "張三", "age": undefined }            // 不能使用undefined</code>

<code>{ "name": "張三",  "birthday": new Date('Fri, 26 Aug 2011 07:13:10 GMT'),  "getName":  function() {return this.name;}    // 不能使用函數和日期對象}</code>

<code>stringify和parse方法</code>

<code>JSON.parse(): 用于将json字元串轉化為javascript對象</code>

<code>console.log(JSON.parse('{"name":"Yuan"}'));</code>

<code>console.log(JSON.parse('{name:"Yuan"}')) ;   // 錯誤</code>

<code>console.log(JSON.parse('[12,undefined]')) ;   // 錯誤</code>

<code>JSON.stringify(): 用于将javascript對象轉化為JSON字元串</code>

<code>console.log(JSON.stringify({'name':"egon"})) ;</code>

<code>二、ajax</code>

<code>同步互動：用戶端發出一個請求後，需要等待伺服器響應結束後，才能發出第二個請求；</code>

<code>異步互動：用戶端發出一個請求後，無需等待伺服器響應結束，就可以發出第二個請求。</code>

<code>AJAX除了異步的特點外，還有一個就是：浏覽器頁面局部重新整理；（這一特點給使用者的感受是在不知不覺</code>

<code>中完成請求和響應過程）</code>

<code>ajax優缺點</code>

<code>優點:</code>

<code>1、ajax異步請求</code>

<code>2、ajax無需重新整理整個頁面</code>

<code>3、因為伺服器響應内容不再是整個頁面，而是頁面中的局部，是以AJAX性能高；</code>

<code>缺點:</code>

<code>1、AJAX并不适合所有場景，很多時候還是要使用同步互動；</code>

<code>2、AJAX雖然提高了使用者體驗，但無形中向伺服器發送的請求次數增多了，導緻伺服器壓力增大；</code>

<code>3、因為AJAX是在浏覽器中使用Javascript技術完成的，是以還需要處理浏覽器相容性問題；</code>

<code>ajax文法</code>

<code>$.ajax({</code>

<code>               </code><code>url:"/handle_Ajax/",</code>

<code>               </code><code>type:"POST",</code>

<code>               </code><code>data:{username:"Yuan",password:123},</code>

<code>               </code><code>success:function(data){</code>

<code>                   </code><code>alert(data)</code>

<code>               </code><code>}</code>

<code>               </code><code>}）</code>

<code>               </code> 

<code>data: 目前ajax請求要攜帶的資料，是一個json的object對象，ajax方法就會預設地把它編碼成某種格式</code>

<code>             </code><code>(urlencoded:?a=1&amp;b=2)發送給服務端；此外，ajax預設以get方式發送請求。</code>

<code>contentType：預設值: "application/x-www-form-urlencoded"。發送資訊至伺服器時内容編碼類型。</code>

<code>             </code><code>用來指明目前請求的資料編碼格式；urlencoded:?a=1&amp;b=2；如果想以其他方式送出資料，</code>

<code>             </code><code>比如contentType:"application/json"，即向伺服器發送一個json字元串：</code>

<code>               </code><code>$.ajax("/ajax_get",{</code>

<code>             </code> 

<code>                  </code><code>data:JSON.stringify({</code>

<code>                       </code><code>a:22,</code>

<code>                       </code><code>b:33</code>

<code>                   </code><code>}),</code>

<code>                   </code><code>contentType:"application/json",</code>

<code>                   </code><code>type:"POST",</code>

<code>               </code><code>});                          //{a: 22, b: 33}</code>

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

<code>csrf跨站請求僞造</code>

<code>$.ajaxSetup({</code>

<code>    </code><code>data: {csrfmiddlewaretoken: '{{ csrf_token }}' },</code>

<code>})</code>

<code>django 接受 ajax 傳來的數組對象</code>

<code>發送：ajax 通過 POST 方式傳來一個數組</code>

<code>接收：django 接受方式 </code>

<code>array = request.POST.getlist(‘key[]’)</code>

<code>其中，key為包含該數組的鍵值對的鍵。 </code>

<code>尤其要注意“[]”，少了它将不能接受成功</code>

<code>為什麼要加”[]”？ </code>

<code>分析前台發送資料，我們會發現：ajax自動給數組中的資料的鍵名後添加了”[]”</code>

<code></code>

     本文轉自小白的希望 51CTO部落格，原文連結：http://blog.51cto.com/haoyonghui/1960538，如需轉載請自行聯系原作者