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>