JQuery AJAX

JQuery AJAX

JQuery - AJAX load()方法

jQuery load() 方法是简单但强大的 AJAX 方法。

load() 方法从服务器加载数据，并把返回的数据放入被选元素中。

语法：

$(selector).load(URL,data,callback);

必需的 URL 参数规定您希望加载的 URL。

可选的 data 参数规定与请求一同发送的查询字符串键/值对集合。

可选的 callback 参数是 load() 方法完成后所执行的函数名称。

例如最简单的：

$("#div1").load("demo_test.txt");

可选的 callback 参数规定当 load() 方法完成后所要允许的回调函数。回调函数可以设置不同的参数：

response - 包含调用成功时的结果内容
status - 包含调用的状态
xhr - 包含 XMLHttpRequest 对象

下面的例子会在 load() 方法完成后显示一个提示框。如果 load() 方法已成功，则显示“外部内容加载成功！”，而如果失败，则显示错误消息：

$("button").click(function(){
  $("#div1").load("demo_test.txt",function(response,status,xhr){
    if(status=="success")
      alert("外部内容加载成功！"+response);
    if(status=="error")
      alert("Error: "+xhr.status+": "+xhr.statusText);
  });
});

jQuery ajax - ajax() 方法

实例：

$.ajax({
    type:"post",
    url:"addCart.jsp",
    async:false,
    data:{"productid" : productid, "num" : parseInt($("#num").val())},
    dataType:"JSON",
    success:function(data, status, xhr){
        alert("success");
        data=JSON.parse(data);
        $("#quantity").text(data.num);
    },
    error:function(data, status, xhr){
        alert("failure");
    },
});

• type：请求方式，类型：String

  必须的。默认值: “GET”。请求方式 (“POST” 或 “GET”)， 默认为 “GET”。

• url：类型：String

  必须的。默认值是当前页地址。URL是发送处理请求的地址。

• async：类型：Boolean

  可选的。默认值: true。默认设置下，所有请求均为异步请求。如果需要发送同步请求，请将此选项设置为 false。注意，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行。

• data：类型：String

  可选的。发送到服务器的数据。将自动转换为请求字符串格式。GET 方式请求中将附加在 URL 后。查看 processData 选项说明以禁止此自动转换。必须为 Key/Value 格式。如果为数组，jQuery 将自动为不同值对应同一个名称。如 {foo:[“bar1”, “bar2”]} 转换为 ‘&foo=bar1&foo=bar2’。我们上面的例子传递的是JSON数据格式的字符串。

  这里我们可以从页面上获取内容，上面就是。

• dataType：类型：String

  预期服务器返回的数据类型。如果不指定，jQuery 将自动根据 HTTP 包 MIME 信息来智能判断，比如 XML MIME 类型就被识别为 XML。在 1.4 中，JSON 就会生成一个 JavaScript 对象，而 script 则会执行这个脚本。随后服务器端返回的数据会根据这个值解析后，传递给回调函数。可用值:

  • ”xml”: 返回 XML 文档，可用 jQuery 处理。
  • “html”: 返回纯文本 HTML 信息；包含的 script 标签会在插入 dom 时执行。
  • “script”: 返回纯文本 JavaScript 代码。不会自动缓存结果。除非设置了 “cache” 参数。注意：在远程请求时(不在同一个域下)，所有 POST 请求都将转为 GET 请求。（因为将使用 DOM 的 script标签来加载）
  • “json”: 返回 JSON 数据 。
  • “jsonp”: JSONP 格式。使用 JSONP 形式调用函数时，如 “myurl?callback=?” jQuery 将自动替换 ? 为正确的函数名，以执行回调函数。
  • “text”: 返回纯文本字符串

  在这里我们最常用的就是JSON数据格式，我上面写类型为JSON类型，这种方式好像还是需要把返回内容转为JSON类型才能使用里面的数据，否则 data.num 为 undefined。

• success：类型：Function

  可选的。请求成功后的回调函数。参数：由服务器返回，data为返回内容，statue为调用状态，xhr为包含 XMLHttpRequest 对象，并根据 dataType 参数进行处理后的数据；描述状态的字符串。这是一个 Ajax 事件。

• error：error：类型：Function

  可选的。默认值: 自动判断 (xml 或 html)。请求失败时调用此函数。

  有以下三个参数：XMLHttpRequest 对象、错误信息、（可选）捕获的异常对象。

  如果发生了错误，错误信息（第二个参数）除了得到 null 之外，还可能是 “timeout”, “error”, “notmodified” 和 “parsererror”。

  这是一个 Ajax 事件。

上面我们把数据传到一个 addCart.jsp 的处理服务页面（实际上我就是在异步处理把商品添加到购物车，并把返回内容处理一下显示到页面上）。

处理服务页面，我们接收数据，并模拟处理数据，将数据生成JSON格式数据返回给调用者。关于gson工具，我写的关于JSON的博客里有，是JSON解析工具。

<%@ page language="java" pageEncoding="UTF-8" trimDirectiveWhitespaces="true"%>
<%@ page import="com.google.gson.Gson" %>
<%@ page import="java.util.Map" %>
<%@ page import="java.util.HashMap" %>
<%
    Integer productid=Integer.parseInt(request.getParameter("productid"));
    Integer num=Integer.parseInt(request.getParameter("num"));

    /*操作的标志*/
    boolean flag=true;

    Gson gson = new Gson();
    Map<String, Integer> map = new HashMap<String, Integer>();  
    map.put("productid", productid);  
    map.put("num", num);  

    /*生成JSON*/
    String responseResult= gson.toJson(map).trim();
    /*内容返回*/
    out.print(responseResult);
%>

因为这是一个JSP服务页面，不做显示，我们去掉HTML内容，但是我使用Google的开发者工具查看响应内容时，总是多了几个空行，这也是导致我之前总是出BUG的原因，如下：

我在JSP指令中配置了一下 trimDirectiveWhitespaces=”true” 属性，结果就不会多出那几行，这也就是使JSP输出的html时去除多余的空行。

当然，如果我们使用纯 Servlet 来处理则不会出现这种情况：

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
    request.setCharacterEncoding("UTF-8");
    Integer productid=Integer.parseInt(request.getParameter("productid"));
    Integer num=Integer.parseInt(request.getParameter("num"));

    /*操作的标志*/
    boolean flag=true;

    Gson gson = new Gson();
    Map<String, Integer> map = new HashMap<String, Integer>();  
    map.put("productid", productid);  
    map.put("num", num);  

    /*生成JSON*/
    String responseResult= gson.toJson(map).trim();
    /*返回响应内容*/
    response.getWriter().write(responseResult);
}

我把该Servlet配置的URL为 AsyncRequest，因此，请求的URL也应该改变。

jQuery ajax - post() & get()方法

ajax() 方法是 jQuery 底层 AJAX 实现。简单易用的高层实现是 $.get(),$.post() 等。$.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该函数，除非你需要操作不常用的选项，以获得更多的灵活性。

语法：

$.post(URL, data, function(data, status, xhr), xhr)

$.get(URL, data, function(data, status, xhr), xhr)

其中function是成功后的回调函数。

/* 添加到购物车 */
function addCart(productid){
/* AJAX请求JSP服务页面完成数据库的添加 */
var url="addCart.jsp";
/* JSON格式数据 */
var data={
        "productid" : productid,
        "num" : parseInt($("#num").val()),
};
var success=function(data, status, xhr){
    alert("success");   
    $("#quantity").text(data.num);
};
$.post(url, data, success, "json");

这种方法接收JSON格式数据时无需转换，不知道是什么BUG。。。