原生Ajax XMLHttpRequest对象

一、Ajax请求

- 现在常见的前后端分离项目中，一般都是服务器返回静态页面后
浏览器加载完页面，运行script中的js代码，通过ajax向后端api发送异步请求
获取数据，然后调用回调函数，将数据添加到页面上

1.1 JQuery封装后的ajax请求

- 注意：jQuery Ajax本质 XMLHttpRequest 或 ActiveXObject

 1 jQuery.get(...)
 2     所有参数：
 3          url: 待载入页面的URL地址
 4         data: 待发送 Key/value 参数。
 5      success: 载入成功时回调函数。
 6     dataType: 返回内容格式，xml, json,  script, text, html
 7 
 8 
 9 jQuery.post(...)
10     所有参数：
11          url: 待载入页面的URL地址
12         data: 待发送 Key/value 参数
13      success: 载入成功时回调函数
14     dataType: 返回内容格式，xml, json,  script, text, html
15 
16 
17 jQuery.getJSON(...)
18     所有参数：
19          url: 待载入页面的URL地址
20         data: 待发送 Key/value 参数。
21      success: 载入成功时回调函数。
22 
23 
24 jQuery.getScript(...)
25     所有参数：
26          url: 待载入页面的URL地址
27         data: 待发送 Key/value 参数。
28      success: 载入成功时回调函数。
29 
30 
31 jQuery.ajax(...)
32 
33     部分参数：
34 
35             url：请求地址
36            type：请求方式，GET、POST（1.9.0之后用method）
37         headers：请求头
38            data：要发送的数据
39     contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
40           async：是否异步
41         timeout：设置请求超时时间（毫秒）
42 
43      beforeSend：发送请求前执行的函数(全局)
44        complete：完成之后执行的回调函数(全局)
45         success：成功之后执行的回调函数(全局)
46           error：失败之后执行的回调函数(全局)
47     
48 
49         accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
50        dataType：将服务器端返回的数据转换成指定类型
51                        "xml": 将服务器端返回的内容转换成xml格式
52                       "text": 将服务器端返回的内容转换成普通文本格式
53                       "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
54                     "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
55                       "json": 将服务器端返回的内容转换成相应的JavaScript对象
56                      "jsonp": JSONP 格式
57                               使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数
58 
59                       如果不指定，jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string
60 
61      converters： 转换器，将服务器端的内容根据指定的dataType转换类型，并传值给success回调函数
62              $.ajax({
63                   accepts: {
64                     mycustomtype: 'application/x-some-custom-type'
65                   },
66                   
67                   // Expect a `mycustomtype` back from server
68                   dataType: 'mycustomtype'
69 
70                   // Instructions for how to deserialize a `mycustomtype`
71                   converters: {
72                     'text mycustomtype': function(result) {
73                       // Do Stuff
74                       return newresult;
75                     }
76                   },
77                 });

View Code

jQuery.get(...)
    所有参数：
         url: 待载入页面的URL地址
        data: 待发送 Key/value 参数。
     success: 载入成功时回调函数。
    dataType: 返回内容格式，xml, json,  script, text, html


jQuery.post(...)
    所有参数：
         url: 待载入页面的URL地址
        data: 待发送 Key/value 参数
     success: 载入成功时回调函数
    dataType: 返回内容格式，xml, json,  script, text, html


jQuery.getJSON(...)
    所有参数：
         url: 待载入页面的URL地址
        data: 待发送 Key/value 参数。
     success: 载入成功时回调函数。


jQuery.getScript(...)
    所有参数：
         url: 待载入页面的URL地址
        data: 待发送 Key/value 参数。
     success: 载入成功时回调函数。


jQuery.ajax(...)

    部分参数：

            url：请求地址
           type：请求方式，GET、POST（1.9.0之后用method）
        headers：请求头
           data：要发送的数据
    contentType：即将发送信息至服务器的内容编码类型(默认: "application/x-www-form-urlencoded; charset=UTF-8")
          async：是否异步
        timeout：设置请求超时时间（毫秒）

     beforeSend：发送请求前执行的函数(全局)
       complete：完成之后执行的回调函数(全局)
        success：成功之后执行的回调函数(全局)
          error：失败之后执行的回调函数(全局)
    

        accepts：通过请求头发送给服务器，告诉服务器当前客户端课接受的数据类型
       dataType：将服务器端返回的数据转换成指定类型
                       "xml": 将服务器端返回的内容转换成xml格式
                      "text": 将服务器端返回的内容转换成普通文本格式
                      "html": 将服务器端返回的内容转换成普通文本格式，在插入DOM中时，如果包含JavaScript标签，则会尝试去执行。
                    "script": 尝试将返回值当作JavaScript去执行，然后再将服务器端返回的内容转换成普通文本格式
                      "json": 将服务器端返回的内容转换成相应的JavaScript对象
                     "jsonp": JSONP 格式
                              使用 JSONP 形式调用函数时，如 "myurl?callback=?" jQuery 将自动替换 ? 为正确的函数名，以执行回调函数

                      如果不指定，jQuery 将自动根据HTTP包MIME信息返回相应类型(an XML MIME type will yield XML, in 1.4 JSON will yield a JavaScript object, in 1.4 script will execute the script, and anything else will be returned as a string

     converters： 转换器，将服务器端的内容根据指定的dataType转换类型，并传值给success回调函数
             $.ajax({
                  accepts: {
                    mycustomtype: 'application/x-some-custom-type'
                  },
                  
                  // Expect a `mycustomtype` back from server
                  dataType: 'mycustomtype'

                  // Instructions for how to deserialize a `mycustomtype`
                  converters: {
                    'text mycustomtype': function(result) {
                      // Do Stuff
                      return newresult;
                    }
                  },
                });

1.2.2 一个简单的Ajax请求

原生Ajax XMLHttpRequest对象

猜你喜欢