前端学习之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，如需转载请自行联系原作者