Jquery X Ajax

1 Jquery Ajax 简介

Jquery 对 Ajax 操作封装了一套跨浏览器，方便用户使用的 Api；
直接调用Jquery编写Ajax

2 Jquery Ajax Load方法

针对DOM,远程请求，把请求的数据载入到 DOM 里；
load(url,[,data],[,callback])
Url：请求地址
Data:请求参数
Callback:请求完成后的回调方法，（无论请求成功失败都会调用这个函数。好像finally）

data后台获取，即使是json格式，也可以用request.getParameter()换取！
实例：

 $(document).ready(function(){
  $("#b1").click(function(){
   $("#d1").load("/HeadFirstJquery/ajax?action=load",{name:"张三",age:14},function(){
    alert("执行完成");
   });
  });
  ......省略中间代码
  <input id="b1" type="button" value="Load加载"/>
<div id="d1"></div>
<hr/>

后台：

 private void load(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  response.setContentType("text/html;charset=utf-8");
  String name=request.getParameter("name");
  String age=request.getParameter("age");
  System.out.println("name:"+name);
  System.out.println("age:"+age);
  PrintWriter out=response.getWriter();
  out.println("jquery Ajax 大爷你好");
  out.flush();
  out.close();
 }

3 Jquery Ajax Get/Post方法

一般常用的：Ajax 请求后台；
$.post(URL,data,callback); （固定语法，一般建议都用post）
Url：请求地址
Data:请求参数
Callback:请求完成后的回调方

  $("#b2").click(function(){
   $.post("/HeadFirstJquery/ajax?action=post",{id:1},function(data,textStatus){
    alert("请求状态："+textStatus);//如果返回成功，就返回success；
    alert("返回数据："+data);//返回后台响应的文本
    data=eval("("+data+")");
    $("#name").val(data.name);
    $("#age").val(data.age);
   });
  });
 });
 ......省略中间代码
 <input id="b2" type="button" value="post/get加载"/><br/>
 姓名：<input type="text" id="name"/><br/>
 年龄:<input type="text" id="age"/>
 </body>
 </html>

后台：

 private void post(HttpServletRequest request, HttpServletResponse response)
   throws ServletException, IOException {
  response.setContentType("text/html;charset=utf-8");
  String id=request.getParameter("id");
  System.out.println("id:"+id);
  PrintWriter out=response.getWriter();
  out.println("{name:'张三',age:14}");
  out.flush();
  out.close();
 }

post和get效果相同，这不过请求头有稍微的变化。get请求的优点几乎被现在的浏览器都克服了，所以现在开发一般都用post，将数据包装在请求体中，更加安全。