一、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
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,讀取資源文件下的數據
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，頁面顯示
<%@ 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的核心部分
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,控件的樣式
#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; } 注：該代碼來自慕課網的學習，自己進行了改進，希望有興趣的一起交流和學習.
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
