15-Java-Ajax知識整理

時間  2020-05-07
標籤 java ajax 知識 整理 欄目 Java 简体版
原文   原文鏈接

Ajax知識整理javascript

1、Ajax概念和原理介紹css

　　AJAX = Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。AJAX 不是新的編程語言，而是一種使用現有標準的新方法。html

　　　　以HttpRequest爲核心發送請求和接收響應前端

　　　　以JavaScript語言爲基礎使用XMLHttpRequestjava

　　　　以XML或JSON做爲數據交互格式jquery

　　　　以HTML和CSS做爲數據展示(渲染)web

　　　　

　　AJAX交互(異步)和傳統交互(同步)區別ajax

　　　　1.請求的發送和接收編程

　　　　　　傳統：瀏覽器直接發送HTTP請求，而後由瀏覽器直接接收服務器返回結果，直接呈現到瀏覽器頁面上。json

　　　　　　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

2、Ajax做用和優勢介紹

　　AJAX 最大的優勢是在不從新加載整個頁面的狀況下，能夠與服務器交換數據並更新部分網頁內容。

　　AJAX 不須要任何瀏覽器插件，但須要用戶容許JavaScript在瀏覽器上執行。

　　頁面能夠局部刷新處理，頁面不改變，異步請求和響應，使用戶操做更連續，提高用戶體驗感，Ajax交互傳輸數據量較小，提高程序性能，異步處理，能夠進行異步加載和請求處理，減小整個頁面刷新的頻率

3、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 }

　　案例效果截圖：

 5、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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程