Ajax技术的基本原理
我用一個簡單的用戶名驗證的例子來談一談我對Ajax的了解:
這個例子用到了兩個JSP和一個JS,我沒有用后臺來驗證,因為原理是一樣的.
1.用戶注冊表單頁:ajaxCheckUser.jsp
<%@ page language="java" contentType="text/html; charset=UTF-8"
??? pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>商賬追收
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Ajax檢測用戶名</title>
<script type="text/javascript" src="../js/ajaxCheckUser.js"></script>
</head>
<body>
??? <form action="">
??? ??? 用戶名：<input type="text" id="username" οnblur="checkUserAjax();"/><br/>
??? ??? <div id="msg"></div>
??? ??? 密 碼：<input type="password" id="password"/><br/>
??? ??? Email：<input type="text" id="email"/><br/>
??? ??? <input type="button" id="submit" value="submit" />
??? ??? <input type="button" id="reset" value="reset" />
??? </form>
</body>
</html>
?2.用于說明Ajax技術的基本原理的JS文件:ajaxCheckUser.js
//當輸入框失去焦點時觸發些函數
function checkUserAjax(){
??? //第一步:創建XMLHttpRequest對象
??? var xhr = createXmlHttpRequest() ;
??? //第二步:建立對服務器的調用
??? /**
??? ?* open(method,url,asynch)方法和屬性介紹
??? ?* 1.XMLHttpRequest 對象的 open 方法允許程序員用一個Ajax調用向服務器發送請求。
??? ?* 2.method：請求類型，類似 "GET"或"POST"的字符串。
??? ?* ??? ? 若只想從服務器檢索一個文件，而不需要發送任何數據，使用GET(可以在GET請求里通過附加在URL上的查詢字符串來發送數據，不過數據大小限制為2000個字符)。
??? ?*??? 若需要向服務器發送數據，用POST。
??? ?* 3.url：路徑字符串，指向你所請求的服務器上的那個文件。可以是絕對路徑或相對路徑。
??? ?* ??? ? 在某些情況下，有些瀏覽器會把多個XMLHttpRequest請求的結果緩存在同一個URL。
??? ?*??? 如果對每個請求的響應不同，這就會帶來不好的結果。把當前時間戳追加到URL的最后，就能確保URL的惟一性，從而避免瀏覽器緩存結果。
??? ?* ??? ? 例如:var url = "GetAndPostExample?timeStamp=" + new Date().getTime();
??? ?* 4.asynch：表示請求是否要異步傳輸，默認值為true(異步)。
??? ?*??? 指定true，在讀取后面的腳本之前，不需要等待服務器的相應。
??? ?*??? 指定false，當腳本處理過程經過這點時，會停下來，一直等到Ajax請求執行完畢再繼續執行。
??? ?*/
??? var username = document.getElementById("username").value ;//獲得輸入的用戶名
??? xhr.open("post","checkUser.jsp?username="+username,true) ;
???
??? /**
??? ?* setRequestHeader()方法和屬性介紹
??? ?* 1.當瀏覽器向服務器請求頁面時，它會伴隨這個請求發送一組首部信息。這些首部信息是一系列描述請求的元數據(metadata)。
??? ?*????? 首部信息用來聲明一個請求是 GET 還是 POST
??? ?* 2.Ajax 請求中，發送首部信息的工作可以由 setRequestHeader完成
??? ?* 3.參數header： 首部的名字;? 參數value：首部的值。
??? ?* 4.如果用 POST 請求向服務器發送數據，需要將 "Content-type" 的首部設置為 "application/x-www-form-urlencoded".它會告知服務器正在發送數據，并且數據已經符合URL編碼了。
??? ?* 5.該方法必須在open()之后才能調用
??? ?*/
??? xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")//如果發送方式為POST時,需要設置首部信息 ;
???
??? //第三步:向服務器發送請求
??? /**
??? ?* send(data)方法和屬性介紹
??? ?* 1.open 方法定義了 Ajax 請求的一些細節。send 方法可為已經待命的請求發送指令
??? ?* 2.data：將要傳遞給服務器的字符串
??? ?* 3.若選用的是 GET 請求，則不會發送任何數據， 給 send 方法傳遞 null 即可：xhr.send(null);
??? ?* 4.當向send()方法提供參數時，要確保open()中指定的方法是POST，如果沒有數據作為請求體的一部分發送，則使用null.
??? ?*/
??? xhr.send(null) ;
??? //第四步:接收服務器的處理結果
??? /**
??? ?* 用 XMLHttpRequest 的方法可向服務器發送請求。在 Ajax 處理過程中，XMLHttpRequest 的如下屬性可被服務器更改：
??? ?* 1.readyState:
??? ?* ??? ??? 該屬性表示Ajax請求的當前狀態。它的值用數字代表:
??? ?* ??? ??? (1).0 代表未初始化。 還沒有調用 open 方法
??? ?* ??? ??? (2).1 代表正在加載。 open 方法已被調用，但 send 方法還沒有被調用
??? ?* ??? ??? (3).2 代表已加載完畢。send 已被調用。請求已經開始
??? ?* ??? ??? (4).3 代表交互中。服務器正在發送響應
??? ?* ??? ??? (5).4 代表完成。響應發送完畢
??? ?* ??? ??? 每次 readyState 值的改變，都會觸發 readystatechange 事件。
??? ?* ??? ??? 如果把 onreadystatechange 事件處理函數賦給一個函數，那么每次 readyState 值的改變都會引發該函數的執行。
??? ?* ??? ??? readyState 值的變化會因瀏覽器的不同而有所差異。但是，當請求結束的時候，每個瀏覽器都會把 readyState 的值統一設為 4
??? ?* 2.status:
??? ?* ??? ??? 服務器發送的每一個響應也都帶有首部信息。三位數的狀態碼是服務器發送的響應中最重要的首部信息，并且屬于超文本傳輸協議中的一部分。
??? ?* ??? ??? 常用狀態碼及其含義：
??? ?* ??? ??? (1).404 沒找到頁面(not found)
??? ?* ??? ??? (2).403 禁止訪問(forbidden)
??? ?* ??? ??? (3).500 內部服務器出錯(internal service error)
??? ?* ??? ??? (4).200 一切正常(ok)
??? ?* ??? ??? (5).304 沒有被修改(not modified)(服務器返回304狀態，表示源文件沒有被修改 )
??? ?* ??? ??? 在 XMLHttpRequest 對象中，服務器發送的狀態碼都保存在 status 屬性里。通過把這個值和 200 或 304 比較，可以確保服務器是否已發送了一個成功的響應
??? ?* 3.responseText:
??? ?* ??? ??? 該屬性包含了從服務器發送的數據。它是一個HTML,XML或普通文本，這取決于服務器發送的內容。
??? ?* ??? ??? 當 readyState 屬性值變成 4 時, responseText 屬性才可用，表明 Ajax 請求已經結束。
??? ?* 4.responseXML:
??? ?* ??? ??? 如果服務器返回的是 XML， 那么數據將儲存在 responseXML 屬性中。
??? ?* ??? ??? 只用服務器發送了帶有正確首部信息的數據時， responseXML 屬性才是可用的。 MIME 類型必須為 text/xml
??? ?*/
??? //指定響應處理函數
??? xhr.onreadystatechange = function(){
??? ??? //對象的狀態為4表示已完成
??? ??? if(xhr.readyState==4){
??? ??? ??? //成功返回200,沒有修改返回304
??? ??? ??? if(xhr.status==200||xhr.status==304){
??? ??? ??? ??? //開始處理信息
??? ??? ??? ??? //alert(xhr.responseText) ;
??? ??? ??? ??? document.getElementById("msg").innerHTML = xhr.responseText ;
??? ??? ??? }
??? ??? }
??? }
}
/**
?* 創建XMLHttpRequest實例(兼容IE和Firefox等瀏覽器)
?*/
function createXmlHttpRequest(){
??? var xmlhttp = null;
??? try{
??? ??? //適用的瀏覽器Firefox, Opera 8.0+, Safari
??????? xmlhttp=new XMLHttpRequest();
??? }catch(e){
??? ??? //IEIE7.0以下的瀏覽器以ActiveX組件的方式來創建XMLHttpRequest對象
??? ??? var MSXML =
??? ??? ['MSXML2.XMLHTTP.6.0','MSXML2.XMLHTTP.5.0',
??? ??? 'MSXML2.XMLHTTP.4.0','MSXML2.XMLHTTP.3.0',
??? ??? 'MSXML2.XMLHTTP','Microsoft.XMLHTTP'];
??? ??? for(var n = 0; n < MSXML.length; n ++){
??? ??? ??? try{
??? ??? ??? ??? //根據MSXML數組循環獲得支持ActiveX插件的IE版本號,如果拋出異常,那么繼續判斷下一個否則產生XMLHttpRequest對象跳出循環
??? ??? ??? ??? xmlhttp = new ActiveXObject(MSXML[n]);
??? ??? ??? ??? break;
??? ??? ??? }catch(e){}}
??? ??? }
??? return xmlhttp;
}
以上就OK了,我也是為了學習ExtJS所以才看了看Ajax,現在我把我的學習筆記貼上了,供大家參考,同時給予指正.
如果在后臺想往前臺傳XML格式的結果,那么可以在上面的JS文件中加入這個方法.并且修改返回結果的JSP文件.具體如下:
ajaxCheckUser.js文件增加函數如下:
//適用于返回結果為XML格式
function checkUserAjaxXML(){
??? //第一步:創建XMLHttpRequest對象
??? var xhr = createXmlHttpRequest() ;
??? //第二步:建立對服務器的調用
??? xhr.open("post","checkUserXML.jsp",true) ;
??? xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")//如果發送方式為POST時,需要設置首部信息 ;
???
??? //第三步:向服務器發送請求
??? var username = document.getElementById("username").value ;//獲得輸入的用戶名
??? xhr.send("username="+username) ;
??? //第四步:接收服務器的處理結果
??? //指定響應處理函數
??? xhr.onreadystatechange = function(){
??? ??? //對象的狀態為4表示已完成
??? ??? if(xhr.readyState==4){
??? ??? ??? //成功返回200,沒有修改返回304
??? ??? ??? if(xhr.status==200||xhr.status==304){
??? ??? ??? ??? //開始處理信息
??? ??? ??? ??? //document.getElementById("msg").innerHTML = xhr.responseText ;
??? ??? ??? ??? //此處用XML專有的方式接收
??? ??? ??? ??? var xmlResult = xhr.responseXML ;
??? ??? ??? ??? /*
??? ??? ??? ??? 第一種拆分XML的方法 start
??? ??? ??? ??? var root = xmlResult.documentElement ;//獲得XML的根節點
??? ??? ??? ??? var codeNode = root.firstChild ;//獲得Code節點
??? ??? ??? ??? var msgNode = root.lastChild ;//獲得Msg節點
??? ??? ??? ??? if(codeNode.firstChild.nodeValue){
??? ??? ??? ??? ??? document.getElementById("msg").innerHTML = lastNode.msgNode.nodeValue ;
??? ??? ??? ??? }
??? ??? ??? ??? 第一種拆分XML的方法 end
??? ??? ??? ??? */
??? ??? ??? ???
??? ??? ??? ??? //第二種拆分XML的方法DOM start
??? ??? ??? ??? var codeNode = xmlResult.getElementsByTagName("code")[0] ;//獲得code節點
??? ??? ??? ??? var msgNode = xmlResult.getElementsByTagName("msg")[0] ;//獲得msg節點
??? ??? ??? ??? if(codeNode.firstChild.nodeValue){
??? ??? ??? ??? ??? document.getElementById("msg").innerHTML = msgNode.firstChild.nodeValue ;
??? ??? ??? ??? }
??? ??? ??? ??? //第二種拆分XML的方法DOM end
??? ??? ??? ???
??? ??? ??? }
??? ??? }
??? }
}
注意:此處的下面部分,已經做了修改.
xhr.open("post","checkUserXML.jsp",true) ;
接收方式也改為.
var xmlResult = xhr.responseXML ;
之后重新建立一個checkUserXML.jsp文件,用于返回XML格式的結果.代碼如下:
<%@ page language="java" contentType="text/xml; charset=UTF-8"
??? pageEncoding="UTF-8"%><?xml version="1.0" encoding="UTF-8"?>
<%
??? String username = request.getParameter("username") ;
??? String msg = "" ;
??? int code = 0 ;
??? if(username!=null){
??? ??? if("admin".equals(username)){
??? ??? ??? msg = "用戶名已經存在" ;
??? ??? ??? code = 0 ;
??? ??? }else{
??? ??? ??? msg = "用戶名可以使用" ;
??? ??? ??? code = 1 ;
??? ??? }
??? }else{
??? ??? username = "" ;
??? }
??? //out.print(msg) ;
%><result><code><%=code%></code><msg><%=msg%></msg></result>
注意 :
1.<?xml version="1.0" encoding="UTF-8"?>這個XML首部分,必須追加到腳本末尾,不能有回車,不然會出現意想不到的結果.... ....
2.contentType="text/xml; charset=UTF-8"中已經由原來的text/html改為text/xml了.如果不改為xml會很麻煩.
如果想在后臺往回傳JSON格式的內容,那么請在ajaxCheckUser.js文件中增加下面這個函數:
//適用于返回結果為JSON格式
function checkUserAjaxJSON(){
??? //第一步:創建XMLHttpRequest對象
??? var xhr = createXmlHttpRequest() ;
??? //第二步:建立對服務器的調用
??? xhr.open("post","checkUserJSON.jsp",true) ;
??? xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded")//如果發送方式為POST時,需要設置首部信息 ;
???
??? //第三步:向服務器發送請求
??? var username = document.getElementById("username").value ;//獲得輸入的用戶名
??? xhr.send("username="+username) ;
??? //第四步:接收服務器的處理結果
??? //指定響應處理函數
??? xhr.onreadystatechange = function(){
??? ??? //對象的狀態為4表示已完成
??? ??? if(xhr.readyState==4){
??? ??? ??? //成功返回200,沒有修改返回304
??? ??? ??? if(xhr.status==200||xhr.status==304){
??? ??? ??? ??? //開始處理信息
??? ??? ??? ??? var xmlResult = xhr.responseText ;
??? ??? ??? ??? var msgJson = eval("("+xmlResult+")") ;//注意此處必須寫"("和")",目的是先解析xmlResult的內容,再將其轉換
??? ??? ??? ??? if(msgJson){
??? ??? ??? ??? ??? document.getElementById("msg").innerHTML = msgJson.msg ;
??? ??? ??? ??? ??? if(msgJson.code==1){
??? ??? ??? ??? ??? ??? //如果用戶名已經存在那么將光標重新定位
??? ??? ??? ??? ??? ??? document.getElementById("msg").focus ;
??? ??? ??? ??? ??? }
??? ??? ??? ??? }
??? ??? ??? }
??? ??? }
??? }
}
checkUserJSON.jsp文件內容如下:
<%@ page language="java" contentType="text/json; charset=UTF-8"
??? pageEncoding="UTF-8"%>
<%
??? String username = request.getParameter("username") ;
??? String msg = "" ;
??? int code = 0 ;
??? if(username!=null){
??? ??? if("admin".equals(username)){
??? ??? ??? msg = "用戶名已經存在" ;
??? ??? ??? code = 0 ;
??? ??? }else{
??? ??? ??? msg = "用戶名可以使用" ;
??? ??? ??? code = 1 ;
??? ??? }
??? }else{
??? ??? username = "" ;
??? }
??? //out.print(msg) ;
%>{"code":"<%=code %>","msg":"<%=msg %>"}
注意 :需要將contentType="text/html; charset=UTF-8"中的text/html改為text/json.
其他的沒啥了,請做試驗... ...
當然,我已經通過試驗了.
剛才有個哥們第一時間給我指出了錯誤,說我這個不是原理是步驟,我也是比較贊同的,呵呵.不過我還屬于菜鳥,剛開始接觸Ajax,所以還得大家多多指教啊.呵呵,我自己認為Ajax就是異步刷新的代名詞吧,且是局部刷新,呵呵.
轉載于:https://www.cnblogs.com/ctou45/archive/2011/05/26/2059043.html
總結
以上是生活随笔為你收集整理的Ajax技术的基本原理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Mysql读写分离php脚本
- 下一篇： 6个免费下载课件的资源网站，小学、初中、