Java基礎96 ajax技術的使用

時間 2019-12-07

標籤 java 基礎 ajax 技術使用欄目 Java 简体版

原文原文鏈接

本文知識點（目錄）：javascript

   一、ajax的概念
   二、使用ajax技術獲取服務端的數據_實例
   三、使用ajax技術檢查用戶名是否已存在_實例
   四、使用ajax技術驗證登陸頁面的用戶名和密碼_實例php

一、ajax的概念

ajax 是一種在無需從新加載整個網頁的狀況下，可以更新部分網頁的技術。
ajax的全稱是Asynchronous JavaScript and XML，即異步JavaScript+XML。它並非新的編程語言。css

1.二、XMLHttpRequest 對象html

1 var xhr;
2 if(window.XMLHttpRequest){
3   xhr = new XMLHttpRequest(); //IE7+,Firefox,Chrome,Opera,Safari... 4 }else{
5   xhr = new ActiveXObject("Microsoft.XMLHTTP"); //IE6,IE5... 6 }

1.三、XMLHttpRequest 發送請求java

1 request.open("GET","get.php",true); //方式1 2 request.send();
3 
4 request.open("POST","post.php",true); //方式2 5 request.send();
6 
7 request.open("POST","create.php",true); //方式3 8 request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
9 request.send("name=jack&sex=male");

1.四、ajax的優勢和缺點web

優勢：在不更新整個頁面的前提下維護數據，web應用程序更爲迅捷的迴應用戶動做。
缺點：
1.破壞了瀏覽器的後退功能。
      解決方案：HTML5建立或使用一個隱藏的iframe來重現頁面上的變動。
2.破壞加入收藏書籤功能。
      解決方案：
        1.HTML5用URL片斷標識符來保持追蹤，容許用戶回到指定的某個應用程序狀態。
        2.直接操做瀏覽歷史，以字符串的形式存儲網頁狀態，將網頁加入網頁書籤、收藏夾時狀態會被隱形保留。

除此以外，ajax還須要注意的一點是：網絡延遲，即用戶發出請求到服務器迴應之間的間隔。
處理方式是用可視化組件告訴用戶系統正在進行的後臺操做和正在讀取數據和內容。ajax

二、使用ajax技術獲取服務端的數據_實例

獲取服務器test.txt中的信息 數據庫

ajax.html 頁面（ajax）編程

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>ajax.html</title>
 5     
 6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 7     <meta http-equiv="description" content="this is my page">
 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 9     
10     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
11 
12   </head>
13   
14   <body>
15       <input type="button" value="獲取服務端數據" onclick="getData()">
16   </body>
17   <script>
18     //XMLHttpRequest:是js中惟一可以跟後臺進行交互的對象
19      var xhr;
20      function getData(){
21         //1.判斷瀏覽器,根據瀏覽器對xmlhttpRequest的支持建立對象
22         if(window.XMLHttpRequest){
23             xhr=new XMLHttpRequest();
24         }else{
25             //IE5  IE6
26             xhr=new ActiveXObject('Microsoft.XMLHTTP');        
27         }
28         //2.打開一個連接(提交方式,請求資源,是否異步請求)
29         xhr.open('get','test.txt',true);
30         //3.當請求狀態發生變化時觸發回調函數
31         xhr.onreadystatechange=callback;//callback：回調函數
32         //4.發送請求
33         xhr.send();
34      } 
35 
36      function callback(){//回調函數
37         //判斷請求狀態是否完成
38         if(xhr.readyState==4){
39             //判斷響應是否成功
40             if(xhr.status==200){
41                 //獲取服務端響應的數據
42                 var msg=xhr.responseText;
43                 alert(msg);
44             }
45         }
46       }    
47   </script>
48 </html>

結果圖json

三、使用ajax技術檢查用戶名是否已存在_實例

frame.js 文件

 1 function $(id){
 2     return document.getElementById(id);
 3 }
 4 
 5 function elesByName(name){
 6     return document.getElementsByName(name);
 7 }
 8 
 9 function elesByTag(name){
10     return document.getElementsByTagName(name);
11 }
12 
13 function createEle(name){
14     return document.createElement(name);
15 }
16 
17 //封裝trim函數（去除空格）
18 String.prototype.trim=function(){
19     return this.replace(/(^\s*)|(\s*$)/g,"");
20 };

CheckUnameServlet 類

 1 package com.shore.a_servlets;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.http.HttpServlet;
 8 import javax.servlet.http.HttpServletRequest;
 9 import javax.servlet.http.HttpServletResponse;
10 
11 public class CheckUnameServlet extends HttpServlet {
12 
13     public void doGet(HttpServletRequest request, HttpServletResponse response)
14             throws ServletException, IOException {
15         doPost(request, response);
16     }
17 
18     public void doPost(HttpServletRequest request, HttpServletResponse response)
19             throws ServletException, IOException {
20         //假設數據庫包含以下用戶
21         String[] names = {"admin","softeem","users1","rose","jack"};
22         //獲取要檢查的用戶名
23         String name = request.getParameter("uname");
24         System.out.println("進入後臺:"+name);
25         //假設該用戶不存在
26         boolean flag = false;
27         for(String s:names){
28             if(s.equals(name)){
29                 flag = true;
30                 break;
31             }
32         }
33         PrintWriter out=response.getWriter();
34         if(flag){
35             //帳號不可用（數據庫中已存在）
36             out.println("no");
37         }else {
38             //能夠註冊
39             out.println("yes");
40         }
41         out.flush();//刷新
42         out.close();//關閉資源
43     }
44 }

index.html 頁面（ajax）

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>index.html</title>
 5     
 6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 7     <meta http-equiv="description" content="this is my page">
 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 9     
10     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
11     <script type="text/javascript" src="js/frame.js"></script>
12   </head>
13   <body>
14     用戶名:<input type="text" id="uname"/>
15     <input type="button" value="檢查用戶名" onclick="check()">  
16       <span id="msg"></span>
17   </body>
18   <script>
19       var xhr;
20       //1.判斷瀏覽器
21     function getXhr(){
22         if(window.XMLHttpRequest){
23             xhr=new XMLHttpRequest();
24         }else{
25             xhr=new ActiveXObject("Microsoft.XMLHTTP");
26         }
27     }
28       function check(){
29           getXhr();
30           //獲取用戶名
31           var name=$('uname').value;
32           //2.打開一個連接
33           xhr.open('get','CheckUnameServlet?uname='+name,true);
34         //3.當請求狀態發生改變時觸發回調函數
35         xhr.onreadystatechange=callback;
36         //4.發送
37         xhr.send();
38         }
39       
40     function callback(){
41         //判斷請求是否完成
42         if(xhr.readyState==4){
43             //判斷響應是否完成
44             if(xhr.status==200){
45                 //獲取服務端相應數據
46                 var data=xhr.responseText;
47                 if(data.trim()=="yes"){
48                     $('msg').innerHTML="<font color='green'>帳號可用!</font>";
49                 }else{
50                     $('msg').innerHTML="<font color='red'>帳號已被註冊!</font>";
51                 }
52             }
53         }    
54     }
55   </script>
56 </html>

結果圖

四、使用ajax技術驗證登陸頁面的用戶名和密碼_實例

ServiceModel 實體類

 1 package com.shore.util;
 2 
 3 public class ServiceModel {
 4     private int code; //狀態碼
 5     private String msg;//提示信息
 6     
 7     public ServiceModel() {
 8     }
 9     public ServiceModel(int code, String msg) {
10         super();
11         this.code = code;
12         this.msg = msg;
13     }
14     public int getCode() {
15         return code;
16     }
17     public void setCode(int code) {
18         this.code = code;
19     }
20     public String getMsg() {
21         return msg;
22     }
23     public void setMsg(String msg) {
24         this.msg = msg;
25     }
26 }

LoginServlet 類

 1 package com.shore.a_servlets;
 2 
 3 import java.io.IOException;
 4 import java.io.PrintWriter;
 5 
 6 import javax.servlet.ServletException;
 7 import javax.servlet.http.HttpServlet;
 8 import javax.servlet.http.HttpServletRequest;
 9 import javax.servlet.http.HttpServletResponse;
10 
11 import com.shore.util.ServiceModel;
12 
13 public class LoginServlet extends HttpServlet {
14 
15     public void doGet(HttpServletRequest request, HttpServletResponse response)
16             throws ServletException, IOException {
17             doPost(request, response);
18     }
19 
20     public void doPost(HttpServletRequest request, HttpServletResponse response)
21             throws ServletException, IOException {
22         request.setCharacterEncoding("utf-8");
23         response.setCharacterEncoding("utf-8");
24         String uname=request.getParameter("uname");
25         String upass=request.getParameter("upass");
26         
27         System.out.println(uname+"---"+upass);
28         PrintWriter out=response.getWriter();
29         //建立業務模型對象
30         ServiceModel model=new ServiceModel();
31         if("admin".equals(uname)){
32             if("123456".equals(upass)){
33                 model.setCode(1);
34                 model.setMsg("登陸成功");
35             }else{
36                 model.setCode(0);
37                 model.setMsg("密碼錯誤");
38             }
39         }else{
40             model.setCode(-1);
41             model.setMsg("帳號不存在");
42         }
43         //json數據格式
44         String msg="{'code':'"+model.getCode()+"','msg':'"+model.getMsg()+"'}";
45         out.println(msg);//傳到頁面去
46         out.flush();
47         out.close();    
48     }
49 }

ajax_post.html 頁面（ajax）

 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 2 <html>
 3   <head>
 4     <title>ajax_post.html</title>
 5     
 6     <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
 7     <meta http-equiv="description" content="this is my page">
 8     <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 9     
10     <!--<link rel="stylesheet" type="text/css" href="./styles.css">-->
11         <script type="text/javascript" src="js/frame.js"></script>
12   </head>
13   
14   <body>
15       <div>
16         <table id="login_form">
17             <caption>用戶登錄</caption> 
18             <tr>
19                 <th colspan="2"><span id="msg"></span></th>  
20             </tr>         
21             <tr>
22                 <td>用戶名:</td>                
23                 <td><input type="text" id="uname"></td>                
24             </tr>
25             <tr>
26                 <td>密碼:</td>                
27                 <td><input type="password" id="upass"></td>                
28             </tr>
29             <tr>
30                 <td>
31                     <input type="button" value="登錄" onclick="login()"/>
32                 </td>                
33             </tr>
34         </table>
35         <span id="ok"></span>
36       </div></body>
37     <script>
38         var xhr;
39         function login(){
40             var name = $("uname").value;
41             var pass = $("upass").value;
42             //拼接須要提交的數據 "uname=admin&upass=123456"
43             var query = "uname="+name+"&upass="+pass;
44             //對須要提交的數據進行轉碼(防止亂碼)
45             query=encodeURI(query);
46             //1.判斷瀏覽器
47             if(window.XMLHttpRequest){
48                 xhr = new XMLHttpRequest();
49             }else{
50                 xhr = new ActiveXObject("Microsoft.XMLHTTP");
51             }
52             //2.打開鏈接
53             xhr.open('post','LoginServlet',true);
54             //3.當請求狀態發生改變時觸發回調函數
55             xhr.onreadystatechange=handlerData;
56             //設置請求頭信息(對於post)
57             xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
58             //4.發送請求(參數爲須要提交的數據)
59             xhr.send(query);
60         }
61         function handlerData(){
62             if(xhr.readyState == 4 && xhr.status == 200){
63                 var data = xhr.responseText;
64                 data = data.trim();
65                 //alert(data);//彈出框
66                 //把json字符串轉爲javascript對象
67                 data=eval("("+data+")");
68                 if(data.code==1){
69                     $("login_form").style.display="none";    
70                     $("ok").innerHTML="<font color='green'>"+data.msg+"</font>";
71                 }else if(data.code==0){
72                     $("msg").innerHTML="<font color='red'>"+data.msg+"</font>";
73                 }else{
74                     $("msg").innerHTML="<font color='red'>"+data.msg+"</font>";
75                 }
76             }
77             }        
78       </script>
79 </html>