jquery-ajax详解

浏览数：21 / 时间：2015年06月09日

Jquery-ajax 全景图

学习最好的办法就是看文档，深入学习最好的办法就是看源码。

声明:ajax与哪种web语言无关。以前总是用php使用ajax,今天用最近自己一直在使用的javaweb来实现一下。如果出现不能加载的情况试试重启tomcat(你所用的中间件)。

第一种方法:load

形式：load(url,[data],[callback])

概述：载入远程的HTML文件代码并且插入到DOM中

参数：

url->待载入的网址(php,java等等都可以)

data：发送到服务器的键值对 key/value

callback: 载入成功时的回掉函数

index.jsp中核心ajax代码

$(document).ready(function(){
    //加载servlet
    $("#state").load("JsonServlet",{test1:1,test2:2},function(){
        alert("sucess");
    }); 
});

JsonServlet.java中核心代码

protected 
void doGet(HttpServletRequest request, HttpServletResponse response) throws 
ServletException, IOException {
    doPost(request, response);
}
protected 
void doPost(HttpServletRequest request, HttpServletResponse response) throws 
ServletException, IOException {
    StringBuffer json = new 
StringBuffer();
    String line = null;
    BufferedReader reader = request.getReader();
    while((line=reader.readLine())!=null 
){
        json.append(line);
    }
    System.out.println(json.toString());
}<br>

注意：要想更好的处理json数据，你可以借助第三方的字符串到json的处理类 https://github.com/douglascrockford/JSON-java/blob/master/JSONObject.java

小结：

load其实很简单，一般的用途就是在页面加载的时候异步的获取另外的页面的部分或者全部内容。

第二种方法:get

形式：jQuery.get(url,[data],[callback],[type])

概述：通过远程http get请求载入信息。事实上这是一个简单的get请求取代复杂的.ajax

参数：

url:待载入页面的url地址

data:带发送的key/value

callback:载入成功时的回掉函数

type:返回的内容格式xml, html, script, json, text, _default

index.jsp中核心的js代码

$(function() {
    $("#btn").click(function(){ 
        $.get("GetServlet","",function(data){
            alert("data");
        });
    });
});
<div>
    <input type="button" 
value="刷新" 
id="btn" />
</div>
  

GetServlet.java中核心的java代码

protected 
void doGet(HttpServletRequest request, HttpServletResponse response) throws 
ServletException, IOException {
    doPost(request, response);
}
protectedvoidthrows  doPost(HttpServletRequest request, HttpServletResponse response)  ServletException, IOException {
    PrintWriter out = response.getWriter();
    out.write("hello ajax");
}