AJAX(Asynchronous JavaScript and XML):基於XML的異步JavaScript，簡稱AJAX,是多種技術的綜合.
一種客戶端技術 ,爲互聯網用戶提供更加友善的交互界面,更加流暢的用戶體驗.也就是所謂的胖客戶端,使網頁的效果能夠像安裝在計算機上的應用軟件或系統一樣友好華麗.
它由如下四種技術組成:CSS + DOM + XMLHttpRequest+ JavaScript .
各部分功能如下:
CSS : 控制頁面的顯示 。
DOM : 控制文檔結構 。
XMLHttpRequest: 負責與服務器進行異步通信 。
JAVAScript : 調用，控制其他三個組成部分。
如果去掉XMLHttpRequest則爲DHTML技術.
==========================================================
基本流程如下:
1) 事件觸發通信過程
2)
2.1 創建XMLHttpRequest對象 createXHR()
2.2 準備要發送到服務器的參數 .
2.3 指定用於處理應答的函數 . xhr.onreadystatechange = fn [ 回調函數 ] ;
2.4 open() , send() ;
3) 編寫回調函數 .
3.1
通信過程結束 ： xhr.readyState == 4
服務器執行 ： xhr.status == 200
3.2 對服務器的應答結果進行處理 :
複雜的用xhr.responseXML (DOM方式)
簡單的用xhr.responseText(返回的字符串)
==========================================================
XMLHttpRequest與服務器之間數據交換的方式有get和post兩種.
使用POST方式提交:
url = "/ajax/test.jsp" ;
XMLHttpRequest.open( "POST" , url );
XMLHttpRequest.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" );//如果是POST,那麼必須指定請求頭.
XMLHttpRequest.send( "name=zhangsan&age=12&email=xxxxx" ) ;
==========================================================
使用GET方式提交
url = "/ajax/test.jsp" ;
XMLHttpRequest.open( "GET" , url?a=1&b=2 ) ;
XMLHttpRequest.send(null);
==========================================================
以下給出簡單示例代碼,以供參考:
**************************************
test.html
**************************************
<html>
<head>
<script type="text/javascript">
var xhr ;
//初始化 XMLHttpRequest 對象
// return value : 1 : IE , 2 , Mozila , 0 : create XMLHttpRequest's object error ;
function createXHR(){
//創建XMLHttpRequest對象xhr .
if( window.ActiveXObject ){
/*對window.ActiveXObject的調用會返回一個對象，也可能返回null，
if語句會把返回的結果看作是true或false,如果返回對象則爲true，返回null則爲false,
以此指示瀏覽器是否支持ActiveX控件，相應的得知瀏覽器是不是Internet Explorer.
以下類同.*/
xhr = new ActiveXObject( "Microsoft.XMLHTTP" ) ;
return 1 ;
}else if( window.XMLHttpRequest ){//此句是支持XMLHttpRequest則進行如下操作
xhr = new XMLHttpRequest();
return 2 ;
}else{//不支持XMLHttpRequest則返回0
return 0 ;
}
}
//將用戶填寫的用戶名發送給服務器端驗證
function checkUserName(){
var ret = createXHR();//<!--step 2.創建XHR -->
if( ret == 0 ){
alert( "create xhr error" ) ;
}else{
//在xhr中註冊用於處理應答的函數(callBack)
xhr.onreadystatechange = callBack ;<!--step 3.設置回調函數,用於返回數據的處理 -->
//此處回調後面沒有加括號是因爲如果javascript將函數復給變量時在後邊加了(),那麼就會立刻執行了.此處需特別注意
/**/
//使用Get方式向服務器發送請求 .
var url = makeQueryString( "/ajax/check.jsp" );
xhr.open( "get" , url ) ;
xhr.send( null );//<!--step 4.發送請求到服務器 -->
//<!--step 5.請求的處理,此處由chenk.jsp進行處理 -->
/*
//通過Post 形式向服務器發送數據 .
var url = "/ajax/check.jsp" ;
xhr.open( "post" , url ) ;
xhr.setRequestHeader( "Content-Type" , "application/x-www-form-urlencoded" ) ;//關於此處請參見後面附帶的相關文檔
xhr.send( makeQueryString( null ) ) ;
*/
}
}
//在指定的URL上添加參數
function makeQueryString( url ){
var name = document.getElementById( "nameId" ).value ;
var queryString ;
if( url == null ){//爲null時是使用POST進行發送
return "name=" + name ;
}else{//使用GET進行發送
return url + "?name=" + name ;
}
}
function callBack(){ <!--step 6.回調函數的應答 -->
//通信過程結束 .
//readyState :0:未初始化(uninitialized) 1: 初始化階段(loading)
//2 ：連接建立階段(loaded) 3 : 通信中階段(interactive)
//4 ： 通信結束(complete)
if( xhr.readyState == 4 ){
//status==200,表示服務器運行正常,其他值代表錯誤
if( xhr.status == 200 ){
processResult();
}else{
alert( "error!" ) ;
}
}
}
function processResult(){
//獲得應答內容 ,把應答內容顯示在網頁上
var span = document.getElementById( "msgId" ) ;
span.innerHTML = xhr.responseText ;
}
</script>
</head>
<body>
<table>
<tbody>
<tr>
<td>User Name</td>
<td><input type="text" id="nameId" οnblur="checkUserName();"/><!--step 1.進行函數觸發 -->
<span id="msgId"></span>
</td>
</tr>
<tr>
<td>Password</td>
<td><input type="password" /></td>
</tr>
<tr>
<td colspan="2">
<input type="button" value="user register" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
***********************************************************************
check.jsp
***********************************************************************
<%@page contentType="text/html;charset=utf-8" isELIgnored="false"%>
<%@page pageEncoding="GBK"%>
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!--step 5.請求的處理,此處由chenk.jsp進行處理 -->
<%
Thread.sleep( 2000 ) ;
%>
<c:if test="${ empty param.name}">
<font color="red"><b>必須填寫用戶名</b></font>
</c:if>
<c:if test="${ ! empty param.name}">
<c:if test="${ param.name == 'ajax'}">
<font color="red"><b>用戶名已存在</b></font>
</c:if>
<c:if test="${ param.name != 'ajax'}">
<font color="green"><b>用戶名可以使用</b></font>
</c:if>
</c:if>
以上代碼只作爲簡單演示,列出了基本的調用創建等方式等.
==========================================================
以下爲附加內容:
********************************************************************
關於application/x-www-form-urlencoded等字符編碼的解釋說明
在Form元素的語法中，EncType表明提交數據的格式 用 Enctype 屬性指定將數據回發到服務器時瀏覽器使用的編碼類型。 下邊是說明： application/x-www-form-urlencoded：
窗體數據被編碼爲名稱/值對。這是標準的編碼格式。 multipart/form-data： 窗體數據被編碼爲一條消息，頁上的每個控件對應消息中的一個部分。 text/plain： 窗體數據以
純文本形式進行編碼，其中不含任何控件或格式字符。
補充
form的enctype屬性爲編碼方式，常用有兩種：application/x-www-form-urlencoded和multipart/form-data，默認爲application/x-www-form-urlencoded。 當action爲get時候
，瀏覽器用x-www-form-urlencoded的編碼方式把form數據轉換成一個字串（name1=value1&name2=value2...），然後把這個字串append到url後面，用?分割，加載這個新的url。
當action爲post時候，瀏覽器把form數據封裝到http body中，然後發送到server。 如果沒有type=file的控件，用默認的application/x-www-form-urlencoded就可以了。 但是如
果有type=file的話，就要用到multipart/form-data了。瀏覽器會把整個表單以控件爲單位分割，併爲每個部分加上Content-Disposition(form-data或者file),Content-Type(默
認爲text/plain),name(控件name)等信息，並加上分割符(boundary)。
********************************************************************
注意:
javascript將函數復給變量一定不能寫後邊的(),如果寫了就執行了.
********************************************************************
使用xhr.responseXML時 dom的一些解析方法: .
getElementById( "id" ) ;
getElementsByTagNames( "tr" ) ;
appendChild( childNode ) ;
removeChild( childNode ) ;
============================================================