15-Java-Ajax知识整理

Ajax知识整理

一、Ajax概念和原理介绍

　　AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

　　　　以HttpRequest为核心发送请求和接收响应

　　　　以JavaScript语言为基础使用XMLHttpRequest

　　　　以XML或JSON作为数据交互格式

　　　　以HTML和CSS作为数据展现(渲染)

　　AJAX交互(异步)和传统交互(同步)区别

　　　　1.请求的发送和接收

　　　　　　传统：浏览器直接发送HTTP请求，然后由浏览器直接接收服务器返回结果，直接呈现到浏览器页面上。

　　　　　　AJAX：浏览器利用js调用XMLHttpRequest对象发送HTTP请求，然后再利用XMLHttpRequest接收服务器返回结果，然后还需要利用js将结果显示到浏览器页面上。

　　　　2.如何区分Ajax请求和传统请求

　　　　　　请求的Header格式不同，Ajax请求会在请求Header部分多一组参数值

　　　　　　x-requested-with:XMLHttpRequest

　　　　　　如果存储该参数可以认为是ajax；不存在就可以认为是传统表单或超链接

　　　　3.服务器响应结果不同

　　　　　　传统：服务器一般都会去调用Servlet或JSP生成一个HTML界面给浏览器，然后浏览器显示

　　　　　　ajax：服务器一般都会去调用Servlet处理，然后生成一个JSON或者XML字符串结果给XMLHttpRequest

　　　　4.页面刷新不同

　　　　　　传统：整个页面刷新

　　　　　　Ajax：局部刷新

　　　　5.同步和异步不同

　　　　　　传统：同步交互模式：请求1--->响应1--->请求2--->响应2

　　　　　　Ajax：异步交互模式：请求1--->请求2--->响应1--->响应2

二、Ajax作用和优点介绍

　　AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

　　AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

　　页面可以局部刷新处理，页面不改变，异步请求和响应，使用户操作更连续，提升用户体验感，Ajax交互传输数据量较小，提升程序性能，异步处理，可以进行异步加载和请求处理，减少整个页面刷新的频率

三、Ajax的使用步骤

　　第一步：创建一个XMLHTTPRequest对象，发送请求，在客户端js中编程

　　第二步：创建Servlet重写service，接收请求并响应，在服务器端java中编程

四、Ajax案例-使用js配合Servlet单纯的实现ajax(有了JQuery就比这简单多了)

　　html和js代码：

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <base href="<%=basePath%>">
 5     
 6     <title>My JSP 'index.jsp' starting page</title>
 7     <meta http-equiv="pragma" content="no-cache">
 8     <meta http-equiv="cache-control" content="no-cache">
 9     <meta http-equiv="expires" content="0">    
10     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
11     <meta http-equiv="description" content="This is my page">
12     <!--
13     <link rel="stylesheet" type="text/css" href="styles.css">
14     -->
15     <script type="text/javascript">
16         function sendRequest(){
17             //第一步：创建一个XMLHTTPRequest对象
18             var xhr = null;
19             if(window.XMLHttpRequest){
20                 //支持chrom,IE7 8 9
21                 xhr = new XMLHttpRequest();    
22             }
23             else{//IE5 6支持
24                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
25             }
26             
27             //第二步：创建一个HTTP请求
28             xhr.open("get","hello.do",true);
29             
30             //第三步：设置回调处理函数
31             xhr.onreadystatechange = function(){//指定响应函数
32                 //判断响应接收状态是否成功，如果成功才进行
33                 if(xhr.readyState == 4 && xhr.status == 200){
34                     //获取服务器返回的字符串信息
35                     var msg = xhr.responseText;
36                     document.getElementById("msg").innerHTML = msg;
37                     document.getElementById("msg").style.color = "blue";
38                 }
39             };
40         
41             //第四步：发送ajax请求
42             xhr.send(null);
43         }
44         
45         //第五步：创建事件函数实现功能:每隔一秒钟调用hello.do请求刷新页面显示
46         function showMsg(){
47             setInterval('sendRequest()', 1000);
48         }
49     </script>
50   </head>
51   
52   <body>
53     <input type = "button" value = "显示信息" onclick = "showMsg();">
54     <div id="msg"></div>
55   </body>
56 </html>

　　Servlet的java代码：

 1 package ajaxServlet;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 import java.util.Random;
 6 
 7 import javax.servlet.ServletException;
 8 import javax.servlet.http.HttpServlet;
 9 import javax.servlet.http.HttpServletRequest;
10 import javax.servlet.http.HttpServletResponse;
11 
12 public class AjaxServlet extends HttpServlet{
13     
14     private static final long serialVersionUID = 1L;
15     
16     @Override
17     protected void service(HttpServletRequest request, HttpServletResponse response)
18             throws ServletException, IOException {
19         // TODO Auto-generated method stub
20         System.out.println("Ajax请求处理后台输出");
21         
22         //输出消息给前端响应
23         response.setCharacterEncoding("UTF-8");
24         PrintWriter out =  response.getWriter();
25         Random random = new Random();
26         out.println("ajax 后台输出"+random.nextInt(100));
27         out.close();
28     }
29 }

　　案例效果截图：

五、JQuery的Ajax案例实现

　　第一步：引入JQuery的js文件(放在webroot中，可以直接复制进去)

　　第二步：使用JQuery的Ajax

　　　　　　jQuery.get(url,[data],[callback],[type]);//用于发送get请求

　　　　　　语法：

　　　　　　　　$.get("请求地址",{请求参数，一般以JSON格式传输}，"回调函数"，"返回数据类型")；

　　　　　　举例：

　　　　　　　　$.get("login.do",{"username":"张三"，"password":"123"}，function(data){alert(data);},"json");

　　　　　　代码:(Servlet的java代码不变，前端js代码瞬间简单，最后效果一样)

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <base href="<%=basePath%>">
 5     
 6     <title>My JSP 'JQueryAjax.jsp' starting page</title>
 7     
 8     <meta http-equiv="pragma" content="no-cache">
 9     <meta http-equiv="cache-control" content="no-cache">
10     <meta http-equiv="expires" content="0">    
11     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
12     <meta http-equiv="description" content="This is my page">
13     <!--
14     <link rel="stylesheet" type="text/css" href="styles.css">
15     -->
16 
17       <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
18       <script type="text/javascript">
19           /*页面就绪函数，当页面加载时，自动执行，用于测试JQuery文件夹是否引用  */
20           $(function(){
21               alert("11");
22           });
23           
24           //第一步：创建指定响应函数
25           function sendRequest(){
26               $.get("hello.do",function(data){
27                                   document.getElementById("msg").innerHTML = data;
28                                 document.getElementById("msg").style.color = "blue";
29                               },"text");
30           }
31           //第二步：创建事件函数实现功能:每隔一秒钟调用hello.do请求刷新页面显示
32         function showMsg(){
33             setInterval("sendRequest()", 1000);
34         }
35       </script>
36   </head>
37   
38   <body>
39     <input type = "button" value = "显示信息" onclick = "showMsg();">
40     <div id="msg"></div>
41   </body>
42 </html>

　　　　　　jQuery.post(url,[data],[callback],[type]);//用于发送post请求，语法都和$.get一样

　　　　　　jQuery.ajax(url,[settings]);//用于发送ajax请求(既能实现get请求也能实现post请求)

　　　　　　语法：

　　　　　　　　$.ajax({

　　　　　　　　　　url:"请求地址"，

　　　　　　　　　　type:"请求类型"，

　　　　　　　　　　async:true,//默认为true,表示异步；如果为false，同步

　　　　　　　　　　data:{请求参数，一般以JSON格式传输}，//发送到Servlet的数据,如果没有，删除就行了

　　　　　　　　　　dataType:"返回数据类型"，//返回数据的数据类型 json | text

　　　　　　　　　　success:function(data){//回调成功，前端接收数据的函数

　　　　　　　　　　error:function(){//回调失败函数

　　　　　　　　　　　　alert("服务器异常");

　　　　　　　　　　}

　　　　　　　　});

　　　　　　举例：

　　　　　　　　$.ajax({

　　　　　　　　　　url:"login.do"，

　　　　　　　　　　type:"post"，

　　　　　　　　　　async:true,//默认为true,表示异步；如果为false，同步

　　　　　　　　　　data:{"username":"张三"，"password":"123"}，//发送到Servlet的数据,如果没有，删除就行了

　　　　　　　　　　dataType:"json"，//返回数据的数据类型 json | text

　　　　　　　　　　success:function(data){//回调成功，前端接收数据的函数

　　　　　　　　　　error:function(){//回调失败函数

　　　　　　　　　　　　alert("服务器异常");

　　　　　　　　　　}

　　　　　　　　});

　　　　　　 代码:(Servlet的java代码不变，前端js代码瞬间简单，最后效果一样)

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <base href="<%=basePath%>">
 5     
 6     <title>My JSP 'JQueryAjax.jsp' starting page</title>
 7     
 8     <meta http-equiv="pragma" content="no-cache">
 9     <meta http-equiv="cache-control" content="no-cache">
10     <meta http-equiv="expires" content="0">    
11     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
12     <meta http-equiv="description" content="This is my page">
13     <!--
14     <link rel="stylesheet" type="text/css" href="styles.css">
15     -->
16 
17       <script type="text/javascript" src="js/jquery-3.3.1.min.js"></script>
18       <script type="text/javascript">
19           /*页面就绪函数，当页面加载时，自动执行，用于测试JQuery文件夹是否引用  */
20           $(function(){
21               alert("11");
22           });
23           
24           //第一步：创建指定响应函数
25           function sendRequest(){
26               /* $.get("hello.do",function(data){
27                                   document.getElementById("msg").innerHTML = data;
28                                 document.getElementById("msg").style.color = "blue";
29                               },"text"); */
30               $.ajax({
31                   url:"login.do",
32                   type:"post",
33                   /* async:true,//默认为true,表示异步；如果为false，同步
34                   data:{"username":"张三"，"password":"123"},//发送到Servlet的数据,如果没有，删除就行了 */
35                   dataType:"text",//返回数据的数据类型   json | text
36                   success:function(data){//回调成功，前端接收数据的函数
37                         document.getElementById("msg").innerHTML = data;
38                         document.getElementById("msg").style.color = "blue";
39                 },
40                 error:function(){//回调失败函数
41                     alert("服务器异常");
42                 }
43             });
44           }
45           //第二步：创建事件函数实现功能:每隔一秒钟调用hello.do请求刷新页面显示
46         function showMsg(){
47             setInterval("sendRequest()", 1000);
48         }
49       </script>
50   </head>
51   
52   <body>
53     <input type = "button" value = "显示信息" onclick = "showMsg();">
54     <div id="msg"></div>
55   </body>
56 </html>