Jquery Ajax

Jquery Ajax简介：

Jquery Ajax操作封装了一套跨浏览器，方便用户使用的Api；

Jquery Ajax Load方法:

远程请求，把请求的数据载入到DOM里；

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

Url:请求地址

data:请求数据

callback:请求完成后的回调方法

Jquery Ajax Get/Post方法:

Ajax请求后台

$.post( URL, data, Callback);

url : 请求地址

data：请求参数

callback：请求完成后的回调方法

demo01.html

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Jquery操作DOM节点</title>
 6 <script type="text/javascript" src="../js/jquery-1.11.0.js"></script>
 7 <script type="text/javascript">
 8     $(document).ready(function(){
 9         $("#b1").click(function (){
10             $("#d1").load("/HeadFirstJquery/Ajax?action=load",{name:"张三",age:14},function(){
11                 alert("执行完成！");
12             });
13         })
14         $("#b2").click(function(){
15             $.post("/HeadFirstJquery/Ajax?action=post",{id:1},function(data,textStatus){
16                 alert("请求状态: "+textStatus);
17                 alert("返回数据: "+data);
18                 data=eval("("+data+")");
19                 $("#d2").val(data.name);
20                 $("#d3").val(data.age);
21             })
22         });
23     });
24 </script>
25 </head>
26 <body>
27 <input id="b1" type="button" name="b1" value="Ajax加载信息"/>
28 <div id="d1"></div>
29 <br/>
30 <hr/>
31 <input id="b2" type="button" name="b2" value="Jquery.Post/get方法"/>
32 <br/>
33 姓名：<input id="d2" type="text" name="d2" /><br/>
34 年龄：<input id="d3" type="text" name="d3"/>
35 </body>
36 </html>

com.java1234.web.AjaxServlet.java

 1 package com.java1234.web;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.http.HttpServlet;
 8 import javax.servlet.http.HttpServletRequest;
 9 import javax.servlet.http.HttpServletResponse;
10 
11 public class AjaxServlet extends HttpServlet{
12 
13     /**
14      * 
15      */
16     private static final long serialVersionUID = 1L;
17 
18     @Override
19     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
20         // TODO Auto-generated method stub
21         this.doPost(request, response);
22     }
23 
24     @Override
25     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
26         // TODO Auto-generated method stub
27         response.setCharacterEncoding("utf-8");
28         String action=request.getParameter("action");
29         if("load".equals(action)){
30             this.load(request,response);
31         }else if("post".equals(action)){
32             this.post(request, response);
33         }
34     }
35 
36     private void load(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
37         // TODO Auto-generated method stub
38         response.setContentType("text/html;charset=utf-8");
39         response.setCharacterEncoding("utf-8");
40         PrintWriter out=response.getWriter();
41         String name=request.getParameter("name");
42         String age=request.getParameter("age");
43         System.out.println("name = "+name +" age = "+age);
44         System.out.println("{name:'张三',age:18}");
45         out.println("AJax大爷你好啊");
46         out.flush();
47         out.close();
48     }
49     private void post(HttpServletRequest request, HttpServletResponse response)throws ServletException, IOException {
50         // TODO Auto-generated method stub
51         response.setContentType("text/html;charset=utf-8");
52         response.setCharacterEncoding("utf-8");
53         PrintWriter out=response.getWriter();
54         String id=request.getParameter("id");
55         System.out.println("id="+id);
56         out.println("{name:'张三',age:18}");
57         out.flush();
58         out.close();
59     }
60 }

web.xml

 1 <?xml version="1.0" encoding="UTF-8"?>
 2 <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://java.sun.com/xml/ns/javaee" xsi:schemaLocation="http://java.sun.com/xml/ns/javaee http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd" id="WebApp_ID" version="2.5">
 3   <display-name>HeadFirstJquery</display-name>
 4   <welcome-file-list>
 5     <welcome-file>index.html</welcome-file>
 6     <welcome-file>index.htm</welcome-file>
 7     <welcome-file>index.jsp</welcome-file>
 8     <welcome-file>default.html</welcome-file>
 9     <welcome-file>default.htm</welcome-file>
10     <welcome-file>default.jsp</welcome-file>
11   </welcome-file-list>
12   <servlet>
13       <servlet-name>AjaxServlet</servlet-name>
14       <servlet-class>com.java1234.web.AjaxServlet</servlet-class>
15   </servlet>
16   <servlet-mapping>
17       <servlet-name>AjaxServlet</servlet-name>
18       <url-pattern>/Ajax</url-pattern>
19   </servlet-mapping>
20 </web-app>