jQuery-Ajax

WEB

在此是对实验楼的练习笔记的整理，有兴趣的小伙伴可以到实验楼这个非常棒的平台去练练～

原始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
<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8"/>
  <title>jQuery Ajax</title>
  <script src="jquery-1.11.2.min.js"></script>
  <script>
    $(function() {
      var xhr = new AjaxXmlHttpRequest();
      $("#btnAjaxOld").click(function(event) {
        var xhr = new AjaxXmlHttpRequest();
        xhr.onreadystatechange = function() {
          if (xhr.readyState == 4) {
            document.getElementById("divResult").innerHTML = xhr.responseText;
          }
        }
        //由于涉及到同源策略，需要服务器端的支持
        xhr.open("GET", "data/AjaxGetCityInfo.aspx?resultType=html", true);
        xhr.send(null);
      });
    });

    //跨浏览器获取 XmlHttpRequest 对象
    function AjaxXmlHttpRequest() {
      var xmlHttp;
      try {
        // Firefox, Opera 8.0+, Safari
        xmlHttp = new XMLHttpRequest();
      } catch (e) {
        // Internet Explorer
        try {
          xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
        } catch (e) {
          try {
            xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
          } catch (e) {
            alert("Your browser nonsupport AJAX！");
            return false;
          }
        }
      }
      return xmlHttp;
    }
  </script>
</head>
<body>
  <button id="btnAjaxOld">original ajax call</button>
  <div id="divResult"></div>
</body>
</html>

上面的实例中，data/AjaxGetCityInfo.aspx?resultType=html地址会返回一段 HTML 代码。

而用 jQuery 的Load方法，只需要一句话：

1
$("#divResult").load("data/AjaxGetCityInfo.aspx", { "resultType": "html" });

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!doctype html>
<html lang="zh">
<head>
  <meta charset="utf-8"/>
  <title>jQuery Ajax</title>
  <script src="jquery-1.11.2.min.js"></script>
  <script>
    $(function() {
      $("#btnAjaxJquery").click(function(event) {
        $("#divResult").load("data/AjaxGetCityInfo.aspx", { "resultType": "html" });
      });
    })
  </script>
</head>
<body>
  <button id="btnAjaxJquery">use jQuery load method</button>
  <div id="divResult"></div>
</body>
</html>

1. load( url, [data], [callback] )

1.它主要用于直接返回 HTML 的 Ajax 接口
2.load是一个 jQuery 包装集方法，需要在 jQuery 包装集上调用，并且会将返回的 HTML 加载到对象中，即使设置了回调函数也还是会加载

*提示:我们要时刻注意浏览器缓存, 当使用 GET 方式时要添加时间戳参数 (new Date()).getTime() 来保证每次发送的 URL 不同,可以避免浏览器缓存。

提示: 当在 url 参数后面添加了一个空格, 比如” “的时候,会出现”无法识别符号”的错误,请求还是能正常发送。但是无法加载 HTML 到 DOM. 删除后问题解决。*

2. jQuery.get( url, [data], [callback], [type] )

通过远程 HTTP GET 请求载入信息。

这是一个简单的 GET 请求功能以取代复杂\$.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 \$.ajax。

讲解:

此函数发送 Get 请求, 参数可以直接在 url 中拼接, 比如:

$.get("../data/AjaxGetMethod.aspx?param=btnAjaxGet_click");

或者通过 data 参数传递：

$.get("../data/AjaxGetMethod.aspx", { "param": "btnAjaxGet2_click" });

两种方式效果相同，data 参数会自动添加到请求的 url 中。

如果 url 中的某个参数，又通过 data 参数传递，不会自动合并相同名称的参数。
回调函数签名如下：

1
2
3
4
function (data, textStatus) {
    // data could be xmlDoc, jsonObj, html, text, etc...
    this; // the options for this ajax request
}

其中 data 是返回的数据，textStatus 表示状态码，可能是如下值：

“timeout”,”error”,”notmodified”,”success”,”parsererror”

type 参数是指 data 数据的类型, 可能是下面的值: “xml”, “html”, “script”, “json”, “jsonp”, “text”

默认为”html”

jQuery.getJSON( url, [data], [callback] ) 方法就相当于 jQuery.get(url, [data],[callback], “json”)

3. jQuery.getJSON( url, [data], [callback] )

Returns: XMLHttpRequest

相当于: jQuery.get(url, [data], [callback], “json”)

通过 HTTP GET 请求载入 JSON 数据。

在 jQuery 1.2 中，您可以通过使用JSONP形式的回调函数来加载其他网域的JSON 数据，如 “myurl?callback=?”。jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。

注意：此行以后的代码将在这个回调函数执行前执行。

getJSON 函数仅仅将 get 函数的 type 参数设置为”JSON”而已. 在回调函数中获取的数据已经是按照 JSON 格式解析后的对象了:

1
2
3
4
5
6
7
$.getJSON(
"../data/AjaxGetCityInfo.aspx", 
{ "resultType": "json" },
function(data, textStatus){
    alert(data.length);
    alert(data[0].CityName);
});

4. jQuery.getScript( url, [callback] )

相当于: jQuery.get(url, null, [callback], “script”)

首先了解此函数的 jQuery 内部实现, 仍然使用get函数, jQuery 所有的 Ajax 函数包括get最后都是用的是jQuery.ajax(), getScript 将传入值为”script”的 type 参数, 最后在 Ajax 函数中对 type 为 script 的请求做了如下处理:

1
2
3
var head = document.getElementsByTagName("head")[0];            
var script = document.createElement("script");
script.src = s.url;

上面的代码动态建立了一个 script 语句块，并且将其加入到 head 中：

head.appendChild(script);

当脚本加载完毕后，再从 head 中删除：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// Handle Script loading
if ( !jsonp ) {
    var done = false;
    // Attach handlers for all browsers
    script.onload = script.onreadystatechange = function(){
            if ( !done && (!this.readyState ||this.readyState == "loaded" || this.readyState == "complete") ) {
            done = true;
            success();
            complete();
            // Handle memory leak in IE
            script.onload = script.onreadystatechange = null;
            head.removeChild( script );
        }
    };
}

演示如何使用 getScript 函数:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$("#btnAjaxGetScript").click(function(event){
    $.getScript("../scripts/getScript.js", function(data, textStatus){
        alert(data);
        alert(textStatus);
        alert(this.url);
    });
});

$("#btnAjaxGetScriptCross").click(function(event){
    $.getScript("http://resource.elong.com/getScript.js", function(data, textStatus){
        alert(data);
        alert(textStatus);
        alert(this.url);
    });
});

5. jQuery.post( url, [data], [callback], [type] )

通过远程 HTTP POST 请求载入信息。

这是一个简单的 POST 请求功能以取代复杂 $.ajax 。请求成功时可调用回调函数。如果需要在出错时执行函数，请使用 $.ajax。

6. jQuery.ajax( options )

通过 HTTP 请求加载远程数据。

jQuery 底层 AJAX 实现。简单易用的高层实现见 $.get, $.post 等。

$.ajax()返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象，但特殊情况下可用于手动终止请求。

$.ajax() 只有一个参数：参数 key/value 对象，包含各配置及回调函数信息。详细参数选项见下。

注意： 如果你指定了 dataType 选项，请确保服务器返回正确的MIME信息，(如 xml 返回”text/xml”)。错误的MIME类型可能导致不可预知的错误。

注意：如果dataType设置为”script”，那么所有的远程(不在同一域名下)的POST请求都将转化为GET请求。(因为将使用 DOM 的 script 标签来加载)

jQuery 1.2 中，您可以跨域加载 JSON 数据，使用时需将数据类型设置为 JSONP。使用 JSONP 形式调用函数时，如 “myurl?callback=?”jQuery 将自动替换? 为正确的函数名，以执行回调函数。数据类型设置为 jsonp 时，jQuery 将自动调用回调函数。

这是 jQuery 中 Ajax 的核心函数,上面所有的发送 Ajax 请求的函数内部最后都会调用此函数。options 参数支持很多参数, 使用这些参数可以完全控制 ajax 请求。 在 Ajax 回调函数中的 this 对象也是 options 对象。