一、Ajax簡介
Ajax被認為是（Asynchronous JavaScript and XML）的縮寫，允許瀏覽器與服務器通信而無需刷新當前的頁面的技術都被叫做Ajax
eg：百度搜索、實時地圖、etc，在Ajax模型中，數據在客戶端與服務器之間獨立傳輸，服務器用不刷新整個頁面便可更新數據；
二、Ajax的工作原理圖
三、Ajax發送和接收相應的方法
1、發送請求相應的方法
1）、onreadystatechange事件處理函數：該函數由服務器觸發而不是用戶，每次readyState屬性的改變都會觸發onreadystatechange事件
2）、open(method,url,asynchronized):XMLHttpRequest對象的open()允許程序用一個Ajax調用服務器發送請求,method請求類型可以為“GET” or “POST”，url為路徑字符串，sysnchronized表示請求是否要異步傳輸
3）、send(data):data為將也傳遞給服務器的字符串，若選用的為“GET”請求，data為null即可.
2、接收相應的方法
1）、readyState:表示Ajax的當前狀態，用數值表示，0表示初始化，1表示正在加載，2表示已加載完，3表示服務器正在發送響應，4表示響應發送完畢，當請求結束的時候，每個瀏覽器都會把readyState的值設為4；
2）、status:和javaweb中一樣，404沒有找到頁面，403禁止訪問，500內部服務器出錯，200一切正常，304沒有被修改，XMLHttpRequest對象中，服務器發送的狀態碼都保存在status屬性里，通過這個值，可以確保服務器是否已發送了一個成功的響應；
3）、responseText:包含了從服務器發送的數據，一般為HTML，XML或者普通文本，當readyState的值為4且status為200時，responseText屬性才可以用，表面Ajax請求已經結束，如果服務器返回的是XML，則數據將存儲在responseXML中.
四、代碼演示（仿百度搜索框）
1、創建javaweb工程（工程目錄結構如下）
2、SearchServlet.java
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
package cn.jon.ajax; import java.io.IOException; import java.util.List; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; import net.sf.json.JSONArray; import cn.jon.ajax.data.DataUtils; public class SearchServlet extends HttpServlet { private static final long serialVersionUID = 1L; public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { //設置請求和響應的輸出格式為utf-8 request.setCharacterEncoding("utf-8"); response.setCharacterEncoding("utf-8"); String keyword=request.getParameter("keyword"); if(keyword!=null) { DataUtils dataResource=new DataUtils(); List<String> list=dataResource.findDataList(keyword); //System.out.println(JSONArray.fromObject(list).toString()); response.getWriter().write(JSONArray.fromObject(list).toString()); } } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request,response); } } |
3、DataUtils.java,讀取資源文件下的數據
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
|
package cn.jon.ajax.data; import java.io.BufferedReader; import java.io.IOException; import java.io.InputStream; import java.io.InputStreamReader; import java.util.ArrayList; import java.util.List; public class DataUtils { private static List<String> dataList=new ArrayList<String>(); public static final String URL="/test.txt"; static { readResource(URL); // dataList.add("aa"); // dataList.add("ajax"); // dataList.add("afinal"); // dataList.add("bb"); }// public static void readResource(String url) { InputStream is=null; InputStreamReader isr=null; BufferedReader br=null; String line=null; try { is=DataUtils.class.getClassLoader().getResourceAsStream(url); isr=new InputStreamReader(is); br=new BufferedReader(isr); line=br.readLine(); while (null!=line) { if (!line.isEmpty()) { dataList.add(line); } line=br.readLine(); }//while } catch (IOException e) { e.printStackTrace(); }finally { if (null!=br) { try { br.close(); } catch (IOException e) { } } if (null!=isr) { try { isr.close(); } catch (IOException e) { } } if (null!=is) { try { is.close(); } catch (IOException e) { } } } } public List<String> findDataList(String str) { List<String> data=new ArrayList<String>(); for(String sData:dataList) { if (sData.contains(str)) { data.add(sData); } }//for return data; } } |
4、index.jsp，頁面顯示
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
|
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%> <html> <head> <link rel="stylesheet" href="css/my.css"> <script type="text/javascript" src="js/my.js"> </script> </head> <body> <div id="mydiv"> <img alt="baidu" src="img/baidu.png" > <!-- 輸入框 --> <input type="text" size="50" id="keyword" onkeyup="getMoreContents()" onblur="keywordBlur()" onfocus="getMoreContents()"/> <input id="button" type="button" value="百度一下" width="50px"/> <!-- 下面是內容展示區域 --> <div id="popDiv"> <table id="content-table" bgcolor="#FFFAFA" border="0" cellspacing="0" cellpadding="0"> <tbody id="content_table_body"> <!-- 動態查詢出來的數據顯示在這里 --> </tbody> </table> </div> </div> </body> </html> |
5、my.js,ajax的核心部分
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
|
var xmlHttp; //1.獲得用戶輸入內容的關聯信息的函數 function getMoreContents(){ //首先獲得用戶輸入 var content = document.getElementById("keyword"); if(content.value == ""){ //當輸入框為空時，清空之前的數據 clearContent(); return; } //alert(content.value); //2.然后要給服務器發送用戶輸入的內容,因為我們采用的是ajax異步發送數據，所以我們要使用xmlHttp對象 //xmlHttp = 獲得xmlHttp對象; xmlHttp = createXMLHttp(); //alert(xmlHttp); //3.要給服務器發送數據,首先定義一個服務器的地址， var url = "search?keyword="+escape(content.value); //true表示JavaScript腳本會在send()方法之后繼續執行，而不會等待來自服務器的響應。 xmlHttp.open("GET",url,true); //xmlHttp綁定回調方法，這個回調方法會在xmlHttp狀態改變的時候會被調用 //xmlHttp的狀態：0-4，我們只關心4(complete)這個狀態，所以說當完成之后，再調用回調函數才有意義。 xmlHttp.onreadystatechange = callback; //參數已經在url中了，不用在此處添加參數 xmlHttp.send(null); } //獲得xmlHttp對象 function createXMLHttp(){ //對于大多數瀏覽器都適用的 var xmlHttp; if(window.XMLHttpRequest){ xmlHttp = new XMLHttpRequest(); } //要考慮瀏覽器的兼容性 if(window.ActiveXObject){ xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //如果瀏覽器有ActiveXObject對象，但沒有Microsoft.XMLHTTP的參數 if(!xmlHttp){ xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } } return xmlHttp; } //回調函數 function callback(){ //4表示完成 if(xmlHttp.readyState == 4){ //200代表服務器響應成功，404代表資源未找到，500代表服務器內部錯誤 if(xmlHttp.status == 200){ //交互成功，獲得相應的數據，是文本格式。 var result = xmlHttp.responseText; //解析獲得的數據 var json = eval("("+result+")"); //獲得這些數據之后，就可以動態的顯示數據了。把這些數據展示到輸入框下面。 //alert(json); setContent(json); } } } //設置關聯數據的展示，參數代表服務器傳遞過來的關聯數據 function setContent(contents){ //清空之前的數據 clearContent(); //設置位置 setLocaltion(); //首先獲得關聯數據的長度，以此來確定生成多少個<tr></tr> var size = contents.length; //設置內容 for(var i =0;i < size;i++){ var nextNode = contents[i];//代表json數據的第i個元素 var tr = document.createElement("tr"); var td = document.createElement("td"); td.setAttribute("borde","0"); td.setAttribute("gbcolor","#FFFAFA"); //為td綁定兩個樣式（鼠標進入和鼠標移出時事件） td.onmouseover = function(){ this.className = 'mouseOver'; }; td.onmouseout = function(){ this.className = 'mouseOut'; }; td.onclick = function(){ //這個方法實現的是，當用鼠標點擊一個關聯數據時，關聯數據自動填充到輸入框中。 }; td.onmousedown = function(){ //當鼠標點擊一個關聯數據時，自動在輸入框添加數據 document.getElementById("keyword").value =this.innerText; }; //鼠標懸浮于關聯數據上時，自動添加到輸入框中 /* td.onmouseover = function(){ this.className = 'mouseOver'; if(td.innerText != null) document.getElementById("keyword").value =this.innerText; } */ //創建一個文本節點 var text = document.createTextNode(nextNode); td.appendChild(text); tr.appendChild(td); document.getElementById("content_table_body").appendChild(tr); } } //清空之前的數據 function clearContent(){ var contentTableBody = document.getElementById("content_table_body"); var size = contentTableBody.childNodes.length; //刪除時，從下往上刪 for(var i = size-1;i>=0;i--){ //指定刪除第i個子節點 contentTableBody.removeChild(contentTableBody.childNodes[i]); } //清除關聯數據的外邊框 var popDiv = document.getElementById("popDiv").style.border="none"; } //當輸入框失去焦點時，清空之前的數據 function keywordBlur(){ clearContent(); } //設置顯示關聯信息的位置 function setLocaltion(){ //關聯信息的顯示位置要和輸入框一致 var content = document.getElementById("keyword"); var width = content.offsetWidth;//輸入框的長度 var left = content["offsetLeft"];//到左邊框的距離 var top = content["offsetTop"]+content.offsetHeight;//到頂部的距離(加上輸入框本身的高度) //獲得顯示數據的div var popDiv = document.getElementById("popDiv"); popDiv.style.border = "gray 1px solid"; popDiv.style.left = left+"px"; popDiv.style.top = top+"px"; popDiv.style.width = width+"px"; document.getElementById("content-table").style.width = width+"px"; } |
6、my.css,控件的樣式
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
|
#mydiv { position: absolute; left: 50%; top: 50%; margin-left: -200px; margin-top: -120px; } #button { background-color: #5566ee; } .mouseOver { background: #708090; color: #fffafa; } .mouseOut { background: #fffafa; color: #000000; } |
注：該代碼來自慕課網的學習，自己進行了改進，希望有興趣的一起交流和學習.
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持服務器之家。
