1三、Ajax的使用

時間 2019-11-08

標籤 ajax 使用欄目 Ajax 简体版

原文原文鏈接

1、AJAX 是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術。javascript

　　a）、AJAX = 異步 JavaScript 和 XML。html

　　b）、AJAX 是一種用於建立快速動態網頁的技術。java

　　經過在後臺與服務器進行少許數據交換，AJAX 可使網頁實現異步更新。這意味着能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。傳統的網頁（不使用 AJAX）若是須要更新內容，必需重載整個網頁面。例如咱們在用戶註冊的時候須要驗證該註冊名是否已經存在，這時候就可使用Ajax實現與服務器的的通訊來驗證。ajax

2、AJAX的使用：瀏覽器

　　一、建立 XMLHttpRequest 對象：全部現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 對象。老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 對象（詳見W3School）服務器

　　二、向服務器發送請求：與 POST 相比，GET 更簡單也更快，而且在大部分狀況下都能用app

　　三、處理返回數據異步

 1 <%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
 2 <%
 3 String path = request.getContextPath();
 4 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 5 %>
 6 
 7 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 8 <html>
 9   <head>
10       <script type="text/javascript">
11         function ajax(){
12           var url = "<%=request.getContextPath() %>/servlet/AjaxTest";
13           var value = document.getElementById("userName").value;
14             var xmlHttp = new XMLHttpRequest();
15             xmlHttp.onreadystatechange = function(){
16             if(xmlHttp.readyState == 4){
17                 if("unsucceed"== xmlHttp.responseText){
18                    document.getElementById("userName").value=null;
19                    document.getElementById("userName").placeholder="該用戶已被佔用，請從新輸入";  
20                  }
21             }
22         };
23             xmlHttp.open("POST", url, true);// true:異步調用    false:同步調用
24         xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");// 設置請求頭信息
25         xmlHttp.send("userName="+value);
26         }
27         function submit_user(){
28         if(document.getElementById("userName").value.length>1){
29             if(document.getElementById("passWord").value.length > 5)
30               document.getElementById("user").submit();
31           else{
32               document.getElementById("passWord").value=null;
33               document.getElementById("passWord").placeholder="請從新輸入密碼";
34               alert("請輸入6位數以上密碼");
35           } 
36         }else
37         alert("請先輸入用戶名");
38         }
39       </script>
40   </head>
41   <body>
42     <form id="user" method="get" action="<%=request.getContextPath()%>/servlet/LoginTest">
43         <table>
44       <tr>
45           <td>姓名<td/>
46           <td><input type="text" id="userName" name="userName" onblur="ajax()" placeholder="請輸入姓名"><td/>
47       <tr/>
48       <tr>
49           <td>密碼<td/>
50           <td><input type="password" id="passWord" name="passWord"  placeholder="請輸入密碼"><td/>
51       <tr/>
52       <tr>
53           <td><td/>
54           <td><input type="button"  onClick="submit_user()" value="註冊"/><td/>
55       <tr/>
56       </table>
57     </form>
58   </body>
59 </html>