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>

 

 

         

posted @ 2020-03-05 23:08  我只是一个码农  阅读(436)  评论(0编辑  收藏  举报