jQuery Ajax总结

jQuery对Ajax的操作进行了封装。jQuery中$.ajax()属于最底层的方法，这个放在后面说，首先看看封装了$.ajax()的方法。

load()方法

load()可以远程载入HTML并插入到DOM中。结构为：

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

url(String):服务端资源的url。
data(Obejct):发送到服务器的key/value数据
callback(Function):请求完成时(无论成功或失败)的回调函数，在响应数据已经加载到包装集元素之后被调用。传入这个函数的参数是响应文本、状态码、以及xhr实例。

加载HTML文档

首先构造一个要被load()方法加载的新闻评论页面，comment.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>最新评论</title>

</head>

<body>

    <div class="comment">

        <p>

            <a href="#" class="username">张三</a>

            <span class="location">[北京市网友]</span>

        </p>

        <p class="contentTxt">一楼给度娘</p>

    </div>

    <div class="comment">

        <p>

            <a href="#" class="username">李四</a>

            <span class="location">[山东省济南市网友]</span>

        </p>

        <p class="contentTxt">没抢到沙发</p>

    </div>

    <div class="comment">

        <p>

            <a href="#" class="username">王五</a>

            <span class="location">[河南省郑州市网友]</span>

        </p>

        <p class="contentTxt">顶顶顶顶顶</p>

    </div>

</body>

</html>

然后创建load.html，添加一个button按钮触发Ajax事件，将加载进来的HTML内容存放到id为“resText”的元素中。

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>

    <script type="text/javascript">

        $(function () {

			// 点击按钮，触发加载动作

            $("#btn").click(function () {

				// 将comment.html加载进id为“resText”的元素里

                $("#resText").load("comment.html");

            });

        })

    </script>

</head>

<body>

    <input type="button" id="btn" value="load评论">

    <div>最新评论：</div>

    <div id="resText"></div>

</body>

</html>

load()的url参数的语法结构为“url selector”，可以加载指定的内容。例如，加载comment.html页面中class为“contentTxt”的内容：

$("#resText").load("comment.html .contentTxt");

load()的传递方式根据参数data来自动指定。如果没有参数，则采用GET方式传递，否则，会自动转换为POST方式。

回调函数

在load方法中，无论ajax请求是否成功，请求完成(complete)后，回调函数就会被触发，对应$.ajax()中的complete回调函数。

$("#resText").load("comment.html", function (responseText, textStatus, XMLHttpRequest) {

	alert(responseText);		// 请求返回的内容

    alert(textStatus);			// 请求状态

    alert(XMLHttpRequest);		// XMLHttpRequest对象

});

load()常用来从web服务器上获取静态的数据文件。如果要向服务器传递参数，可以使用$.get()或$.post()方法。

$.get()与$.post()

$.get()使用GET进行异步请求。服务器的状态和应用的模型数据不受GET操作的影响。无论进行多少次GET操作，返回的结果是完全一致的。$.post()发送到服务器的数据可以用来修改应用的模型状态。例如，可以添加或删除信息。

$.get()

$.get()结构为：

$.get(url [, data] [, callback] [, type])

$.get()参数说明：

url(String):请求的服务器端资源的url
data(Object):以key/value的形式构造查询字符串追加到url
callback(Function):在请求成功(success)时被调用。将请求结果和状态传递给该方法。
type(String):服务器端返回内容的格式

HTML文档

下面添加评论的html页面：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#send").click(function () {

                // 点击按钮触发get请求

                $.get("get1.jsp", {

                    // 向服务器传递参数，encodeURI进行完整编码

                    username: encodeURI($("#username").val()),

                    location: encodeURI($("#location").val()),

                    contentTxt: encodeURI($("#contentTxt").val())

                }, function (data, textStatus) {

                    // alert(textStatus);   // 返回请求状态

                    // alert(decodeURI(data)); // 返回请求的状态

					// 将返回的数据添加到id为“resText”的元素中

                    $("#resText").html(decodeURI(data));

                })

            });

        })

    </script>

</head>

<body>

<form id="form1">

    <p>添加评论:</p>

    <p>姓名:<input type="text" name="username" id="username"></p>

    <p>位置:<input type="text" name="location" id="location"></p>

    <p>内容:<textarea name="contentTxt" id="contentTxt"></textarea></p>

    <p><input type="button" id="send" value="提交"></p>

</form>

<div>最新评论：</div>

<div id="resText"></div>

</body>

</html>

接下来构造get1.jsp，模拟服务器处理请求并返回数据：

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<%

  String username = request.getParameter("username");

  String location = request.getParameter("location");

  String content = request.getParameter("contentTxt");

  out.println("<div class='comment'><a href='#' class='username'>" + username + "</a><span class='location'>"+ location +

	"</span></p><p class='contentTxt'>"+content+"</p></div>");

%>

然后需要将.jsp发布到tomcat等web容器进行访问。

JSON数据

相对于xml文件而言，json相当简洁、易读。接下来看看服务器返回json形式的数据的情况。

客户端页面get2.html:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>

    <title></title>

    <script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>

    <script type="text/javascript">

        $(function () {

            $("#send").click(function () {

                $.get("get2.jsp", {

                    username: encodeURI($("#username").val()),

                    location: encodeURI($("#location").val()),

                    contentTxt: encodeURI($("#contentTxt").val())

                }, function (data, textStatus) {

                    alert(textStatus);

                    var username = data.username;

                    var location = data.location;

                    var contentTxt = data.contentTxt;

                    username = decodeURI(username);

                    location = decodeURI(location);

                    contentTxt = decodeURI(contentTxt);

                    var txtHtml = "<div class='comment'><p><a href='#' class='username'>" + username +

                            "</a><span class='location'>" + location +

                            "</span></p><p class='contentTxt'>" + contentTxt + "</p></div>";

                    $("#resText").html(txtHtml);// 将返回的数据添加到页面

                }, "json");

            })

        })

    </script>

</head>

<body>

<form id="form1">

    <p>添加评论:</p>

    <p>姓名:<input type="text" name="username" id="username"></p>

    <p>位置:<input type="text" name="location" id="location"></p>

    <p>内容:<textarea name="contentTxt" id="contentTxt"></textarea></p>

    <p><input type="button" id="send" value="get提交"></p>

</form>

<div>最新评论：</div>

<div id="resText"></div>

</body>

</html>

上面encodeURI()是用于编码，否则中文就无法解析，这个希望以后有时间再总结，这里先记住。回调函数的第4个参数(type)设置为“json”,代表期待服务器返回的数据格式。

需要添加json-lib.jar，用于构造json格式的数据。get2.jsp:

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>

<%@ page import="net.sf.json.JSONObject" %>

<%

    String username = request.getParameter("username");

    String location = request.getParameter("location");

    String contentTxt = request.getParameter("contentTxt");

    JSONObject json = new JSONObject();

    json.put("username", username);

    json.put("location", location);

    json.put("contentTxt", contentTxt);

    out.println(json);

%>

json的格式非常严格，任何一个括号的不匹配或缺失都会导致页面的脚本终止运行。上面通过java代码首先创建了一个json对象。如果通过拼接的方式构造json数据，必须是标准的json格式：

out.println("{\"username\":\""+ username+ "\",\"location\":\"" + location + "\", \"contentTxt\":\""+ contentTxt+"\"  }");

$.post()

除了对服务器的状态和应用的模型数据的影响，$.get()和$.post()还有以下区别：

GET请求会将参数跟在url后进行传递，POST请求则作为HTTP消息的实体内容发送给Web服务器。在ajax中这种区别对用户是不可见的。
GET对传输的数据大小有限制(通常不大于2kb)，使用POST方式传递的数据量比GET大得多(理论上不受限制)
GET方式请求的数据会被浏览器缓存，这种情况可能带来安全问题。

$.get()和$.post()的结构和使用方式都相同。

$.getScript()和$.getJson()

$.getScript()

$.getScript()用来加载.js文件，与加载一个HTML片段一样，js文件会自动执行。

将$.load()的comment.html页面改写为js文件，将评论添加到id为“resText”的元素中。js1.js:

var comments = [

    {

        "username": "张三",

        "location": "[北京市网友]",

        "contentTxt": "一楼献度娘"

    },

    {

        "username": "李四",

        "location": "[山东省济南市网友]",

        "contentTxt": "没抢到沙发"

    },

    {

        "username": "王五",

        "location": "[河南省郑州市网友]",

        "contentTxt": "顶顶顶顶顶"

    }

];

var html = '';

$.each(comments, function (index, comment) {

    html += "<div class='comment'><a href='#' class='username'>" + comment['username'] +

        "</a><span class='location'>" + comment['location'] +

        "</span></p><p class='contentTxt'>" + comment['contentTxt'] + "</p></div>";

});

$("#resText").html(html);

$.getScript()直接加载进js，并自动执行:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title></title>

    <script type="text/javascript" src="../jquery/jquery-2.2.3.js"></script>

    <script type="text/javascript">

        $(function () {

			// 点击按钮加载js1.js文件

            $("#send").click(function () {

                $.getScript("js1.js");

            })

        })

    </script>

</head>

<body>

    <p>

        <input type="button" id="send" value="加载script">

    </p>

    <div class="comment">最新评论：</div>

    <div id="resText"></div>

</body>

</html>

$.getJSON()

$.getJSON()用于加载JSON文件，用法与$.getScript()相同。

json数据：

[

  {

    "username": "张三",

    "location": "[北京市网友]",

    "contentTxt": "一楼献度娘"

  },

  {

    "username": "李四",

    "location": "[山东省济南市网友]",

    "contentTxt": "没抢到沙发"

  },

  {

    "username": "王五",

    "location": "[河南省郑州市网友]",

    "contentTxt": "顶顶顶顶顶"

  }

]

jquery代码：

$(function () {

    $("#send").click(function () {

        $.getJSON("demo.json", function (data) {

            $("#resText").empty();

            var html = '';

            $.each(data, function (index, comment) {

                html += "<div class='comment'><a href='#' class='username'>" + comment['username'] +

                        "</a><span class='location'>" + comment['location'] +

                        "</span></p><p class='contentTxt'>" + comment['contentTxt'] + "</p></div>";

            });

            $("#resText").html(html);

        });

    })

});

$.ajax()方法

$.ajax()是jquery最底层的实现。

$.ajax(options)

这个方法只包含了1个参数,这个参数里面包含了$.ajax()所需要的请求设置以及回调函数，参数以key/value形式存在。

$.ajax()参数说明：

url(String):发送请求地址。
type(String):请求方式(POST或GET)，默认为GET。其他HTTP请求方法如PUT、DELETE，仅部分浏览器支持。
data(Object或String):发送到服务器的数据。如果不是字符串，将自动转换为字符串格式。GET请求中将附加在url后。对象必须是key/value格式，例如{id:"xxyh", password:"123456"}转换为&id=xxyh&password=123456。如果是数组，将自动为不同值对应同一个名称。例如{name:["xxyh","dudu"]}转换为&name=xxyh&name=dudu。
dataType(String):预期服务器返回的数据类型。如果不指定，jquery将根据HTTP包MINE信息返回responseXML或responseText,并作为回调函数参数传递。可用类型：
- xml:返回XML文档，可用jquery处理
- html:返回纯文本HTML信息，包含的script标签会插入DOM时执行。
- script:返回纯文本JavaScript代码。如果没有设置cache参数，不会自动缓存结果。在远程请求时(不在同一个域下)，所有POST请求都将转为GET请求。
- json:返回JSON数据。
- jsonp:JSONP格式。使用JSONP形式调用函数时，例如myurl?callback=?,jquery将自动替换后一个“?”为正确的函数名，以执行回调函数。
- text:返回纯文本字符串。
complete(Function):请求完成后回调函数(请求成功或失败后均调用)。

参数：XMLHttpRequest对象和一个描述成功请求类型的字符串。
```
  function(XMLHttpRequest,textStatus){

  	this;	// 调用本次Ajax请求时传递的options参数

  }
```
success(Function):请求成功回调函数。有2个参数：

参数：由服务器返回，并根据dataType参数进行处理后的数据和描述状态的字符串。
```
  function(data, textStatus) {

  	// data 可能是xmlDoc,jsonObj,html,text等

  	this;	// 调用本次Ajax请求时传递的options参数

  }
```

error(Function):请求失败时被调用的函数。这个函数有3个参数，即XMLHttpRequest对象、错误信息和捕获的错误对象

  function(XMLHttpRequest, textStatus, errorThrown){

  	// 通常情况下textStatus和errorThrown只有一个包含信息

  	this;	// 调用本次Ajax请求时传递的options参数

  }

contentType(String):当发送信息至服务器时，内容编码类型默认为"application/x-www-form-urlencoded"。
jsonp(String):在一个jsonp请求中重写回调函数的名字。用来替代在“callback=?”这种GET或POST请求中URL参数里的“callback”部分，例如{jsonp:'onJsonPLoad'}会导致将“onJsonPLoad=?”传给服务器。

获取JSON数据

接下来通过$.ajax()获取json数据。jquery代码：

$(function () {

    $("#send").click(function () {

        $.ajax({

            type:"GET",

            url:"demo.json",

            dataType:"json",

            success: function (data) {

                $("#resText").empty();

                var html = "";

                $.each(data, function (commentIndex, comment) {

                    html += "<div class='comment'><a href='#' class='username'>" + comment['username'] +

                            "</a><span class='location'>" + comment['location'] +

                            "</span></p><p class='contentTxt'>" + comment['contentTxt'] + "</p></div>";

                });

                $("#resText").html(html);

            }

        })

    });

})