AJAX的使用

一、jQuery实现AJAX的操作

 1 <%@ page language="java" contentType="text/html; charset=UTF-8"
 2     pageEncoding="UTF-8"%>
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
 4 <html>
 5 <head>
 6 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
 7 <script type="text/javascript" src="../js/jquery-1.7.2.js"></script>
 8 <script type="text/javascript">
 9 /* $(function(){
10     //get方法进行AJAX请求    
11     $(":button").on("click",function(e){
12         
13         $.get(
14                 "../AjaxServlet",//请求的url
15                 {name:"张三",nationality:"阿尔及利亚"},//请求的参数
16                 function(data){   //请求处理成功后的回调函数,data为服务器端返回的数据
17                     alert(data);
18                 },
19                 "text" //响应数据类型
20              );
21     });
22     
23 });     */
24 
25 
26 $(function(){
27     //post方法进行AJAX请求    
28     $("button").click(function(){
29         
30         $.post(
31                 "../AjaxServlet",//请求的url
32                 $("#f1").serialize(),//将表单中数据序列化
33                 function(data)     //请求处理成功后的回调函数，data为服务器端返回的数据
34                 {
35                     if(data=="true")
36                     {
37                         alert("登录成功");
38                         location.href="Welcome.jsp"
39                     }else
40                     {
41                         alert("登录失败");
42                         location.href="Ajax1.jsp"                    
43                     }
44                 },
45                 "text" //服务器返回数据类型    
46              );
47     });
48     
49 }); 
50         
51     
52  
53 
54 </script>
55 <title>Insert title here</title>
56 </head>
57 <body>
58 <!-- <button type="button">点击</button> -->
59 
60 <form action="" id="f1">
61 姓名：<input type="text" name="userName"/><br/>
62 密码：<input type="password" name="password"/><br/>
63 <button type="button">提交</button>
64 </form> 
65 </body>
66 </html>
View Code
 1 package com.zdsofe.servlet;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.annotation.WebServlet;
 8 import javax.servlet.http.HttpServlet;
 9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 
12 /**
13  * Servlet implementation class AjaxServlet
14  */
15 @WebServlet("/AjaxServlet")
16 public class AjaxServlet extends HttpServlet {
17     private static final long serialVersionUID = 1L;
18        
19     /**
20      * @see HttpServlet#HttpServlet()
21      */
22     public AjaxServlet() {
23         super();
24         // TODO Auto-generated constructor stub
25     }
26 
27     /**
28      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
29      */
30     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
31     
32     /*  request.setCharacterEncoding("utf-8");
33       response.setCharacterEncoding("utf-8");
34       response.setContentType("text/html charset=utf-8");
35       String name= request.getParameter("name");
36       String nationality= request.getParameter("nationality");
37       
38        response.getWriter().print(name+"是"+nationality+"人");
39       PrintWriter out=response.getWriter();
40       out.print(name+"是"+nationality+"人");
41       */
42       
43     }
44 
45     /**
46      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
47      */
48     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
49 
50            //获取用户名
51            String userName= request.getParameter("userName");
52            //获取密码
53            String password=request.getParameter("password");
54            String result=null;
55            PrintWriter out=response.getWriter();
56            if("admin".equals(userName)&&"123".equals(password))
57            {
58                result="true";
59            }else
60            {
61                result="false";
62            }
63            out.print(result);
64     }
65 
66 }
View Code

 

二、AJAX在HTML中使用

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Insert title here</title>
 6 </head>
 7 <script type="text/javascript" src="jquery-1.7.2.js"></script>
 8 <script type="text/javascript">
 9 /* $(function(){
10     var xmlHttp;
11     $(":button").click(function(){
12         //创建XMLHttpRequest对象
13         if(window.XMLHttpRequest)
14         {
15             xmlHttp=new XMLHttpRequest();
16         }
17     
18         //注册XMLHttpRequest对象
19         xmlHttp.onreadystatechange=function()
20         {
21             var requestStatus=xmlHttp.readyState;//4是完成
22             var status=xmlHttp.status;//200是请求OK
23             if(requestStatus==4&&status==200)
24             {
25                 $("#d1").text(xmlHttp.responseText);
26             }
27         }
28         //发起请求
29         xmlHttp.open("GET","../AjaxServlet",true);
30         //发送请求
31         xmlHttp.send();
32     });
33 
34 }); */
35 
36 $(function(){
37     
38     var xmlHttp;
39     $(":button").click(function()
40     {
41         //获取名字
42         var name=$("[name='userName']").val();        
43         //获取密码
44         var password=$(":password").val();        
45         //创建XMLHttpRequest对象
46         if(window.XMLHttpRequest)
47         {
48             xmlHttp=new XMLHttpRequest();
49         }
50          //注册XMLHttpRequest对象
51         xmlHttp.onreadystatechange=function()
52         {
53             var requestStatus=xmlHttp.readyState;//4是完成
54             var status=xmlHttp.status;//200是请求OK
55             if(requestStatus==4&&status==200)
56             {
57                 $("#d1").text(xmlHttp.responseText);
58             }
59         }
60         
61          //发送请求
62         xmlHttp.open("POST","../AjaxServlet",true);
63          
64         xmlHttp.setRequestHeader("content-type","application/x-www-form-urlencoded"); 
65         //发送请求
66         xmlHttp.send("N="+name+"&P="+password);
67         });
68 });
69 
70 </script>
71 <body>
72 <form action="" >
73 姓名：<input type="text" name="userName"/><br/>
74 密码：<input type="password" name="password"/><br/>
75 
76 <button type="button">点击</button>
77 </form>
78 <div id="d1"></div>
79 </body>
80 
81 </html>
View Code
 1 package com.zdsofe.work;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.annotation.WebServlet;
 8 import javax.servlet.http.HttpServlet;
 9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 
12 /**
13  * Servlet implementation class AjaxServlet
14  */
15 @WebServlet("/AjaxServlet")
16 public class AjaxServlet extends HttpServlet {
17     private static final long serialVersionUID = 1L;
18        
19     /**
20      * @see HttpServlet#HttpServlet()
21      */
22     public AjaxServlet() {
23         super();
24         // TODO Auto-generated constructor stub
25     }
26 
27     /**
28      * @see HttpServlet#doGet(HttpServletRequest request, HttpServletResponse response)
29      */
30     protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
31 
32         PrintWriter out=response.getWriter();                
33         out.print("姓名："+request.getParameter("N")+"密码："+request.getParameter("P"));
34     }
35 
36     /**
37      * @see HttpServlet#doPost(HttpServletRequest request, HttpServletResponse response)
38      */
39     protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
40         doGet(request, response);
41     }
42 
43 }
View Code

 

posted @ 2017-08-05 15:12  初夏的一棵歪脖子树  阅读(89)  评论(0)    收藏  举报