1.AJAX簡介
AJAX是實現web2.0服務中的核心技術，全稱為“異步JavaScript和XML技 術”（Asynchronous JavaScript and XML）；Ajax的核心技術理念在于使用XMLHttpRequest對象發送異步請求。最初為XMLHttpRequest對象提供瀏覽器支持的是微軟公司。AJAX技術的出現，可以說是挽救了傳統的B/S結構，并賦與web應用新的生命。簡單的說，通過AJAX，我們可以用XMLHttpRequest對象來直接與服務器進行通信，通過這個對象，我們就可以在不重載頁面的情況與 Web 服務器交換數據。
2.AJAX的優點
在傳統的 JavaScript 編程中，假如您希望從服務器上的文件或數據庫中得到任何的信息，或者向服務器發送信息的話，就必須利用一個 HTML 表單向服務器 GET 或 POST 數據。而用戶則需要單擊“提交”按鈕來發送/獲取信息，等待服務器的響應，然后一張新的頁面會加載結果。
由于每當用戶提交輸入后服務器都會返回一張新的頁面，傳統的 web 應用程序變得運行緩慢，且越來越不友好。
通過利用 AJAX，您的 JavaScript 會通過 JavaScript 的 XMLHttpRequest 對象，直接與服務器來通信。
通過使用 HTTP 請求，web 頁可向服務器進行請求，并得到來自服務器的響應，而不加載頁面。用戶可以停留在同一個頁面，他或她不會注意到腳本在后臺請求過頁面，或向服務器發送過數據。
3.AJAX中用到的技術
實際上，Ajax不是一種技術，而是幾種技術。每種技術都具有獨特之處，合在一起就形成功能強大的新技術。Ajax包括：
javaScript:實現客戶端的數據發送和界面更新，是ajax實現的編程語言；
XMLHttpRequest：瀏覽器內置的用以進行異步數據發送和接收的對象，是AJAX核心對象；
Css+div:對用戶而言，AJAX的價值是用戶界面更加友好---這當然還是依靠css+div實現；
DOM模型：AJAX常見的技巧就是使用js響應dom組件事件或更新其；
Xml:XML僅是一種傳輸數據的格式，在ajax應用中常以xml格式在c/s間交換數據；
Html
4.AJAx的實現步驟
實現AJAX的第一步就是要創建XMLHttpRequest對象
而在不同的瀏覽器中，創建該對象的方法是不同的
IE 瀏覽器使用 ActiveXObject，而其他的瀏覽器使用名為 XMLHttpRequest 的 JavaScript 內建對象。
為了是程序更加的兼容，我們可以使用if語句或者是try catch語句來創建該對象
如：function ajaxFunction（）
{
var xmlHttp;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest（）；
}
catch （e）
{
// Internet Explorer
try
{
; xmlHttp=new ActiveXObject（"Msxml2.XMLHTTP"）；
}
catch （e）
{
try
{
xmlHttp=new ActiveXObject（"Microsoft.XMLHTTP"）；
}
catch （e）
{
alert（"您的瀏覽器不支持AJAX！"）；
return false;
}
}
}
}
</script>
在上面的例子中 ，首先聲明一個保存 XMLHttpRequest 對象的 xmlHttp 變量。
然后使用 XMLHttp=new XMLHttpRequest（） 來創建此對象。這條語句針對 Firefox、Opera 以及 Safari 瀏覽器。假如失敗，則嘗試針對 Internet Explorer 6.0+ 的 xmlHttp=new ActiveXObject（"Msxml2.XMLHTTP"），假如也不成功，則嘗試針對 Internet Explorer 5.5+ 的 xmlHttp=new ActiveXObject（"Microsoft.XMLHTTP"）。
第二步是向服務器發送數據和請求
要想把請求發送到服務器，我們就需要使用 open（） 方法和 send（） 方法。
open（） 方法需要三個參數。第一個參數定義發送請求所使用的方法（GET 還是 POST）。第二個參數規定服務器端腳本的 URL。第三個參數規定應當對請求進行異步地處理。
主要形式為：xmlHttp.open（"GET",url,true）；
xmlHttp.send（null）；
第三步，也是很重要的一步就是獲得服務器的響應后采取相應的操作：如改變WEB頁面的某一個元素的值等
在獲得服務器的響應前，我們有必要解釋一下 XMLHttpRequest 對象的幾個重要的屬性。
1、onreadystatechange 屬性
onreadystatechange 屬性存有處理服務器響應的函數
2、responseText 屬性
可以通過 responseText 屬性來取回由服務器返回的數據。
下面是我用AJAX寫的一個小程序，目的是在不加載頁面的情況下，當鼠標從用戶欄離開時在時間欄里顯示當前時間
主要代碼如下：
頁面的代碼是：<html>
<head>
<title>Ajax1.0.html</title>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
</head>
<script type="text/javascript">
function AjaxFunction（）{
var xmlHttp;
//1、首先是創建XMLHttpRequest對象
try
{
//FireFox,Poera 8.0+,Safari
xmlHttp=new XMLHttpRequest（）；
}
catch（e）{
try{
//IE6.0+
xmlHttp=new ActiveXObject（"Msxml2.XMLHTTP"）；
}
catch（e）{
try{
//IE5.5+
xmlHttp=new ActiveXObject（"Microsoft.XMLHTTP"）；
}
catch（e）{
alert（"您的瀏覽器不支持AJAX！"）；
return false;
}
}
//3、獲取服務器的響應并顯示時間
}
xmlHttp.onreadystatechange=function（）
{
if（xmlHttp.readyState==4）{
document.myForm.time.value=xmlHttp.responseText;
}
}
//2、發送請求給服務器
xmlHttp.open（"GET","time",true）；//time是Servlet的名字，也是其URL地址
xmlHttp.send（null）；
}
</script>
<body>
<form name="myForm" >
<table>
<tr> <td>;用戶</td>
<td><input type="text" name="username" onblur ="AjaxFunction（）；"/></td>
//onblur ="AjaxFunction（）；來激活javascript中的代碼
</tr>
<tr> <td>時間</td>
<td><input type="text" name="time" /></td>
</tr>
</table>
</form><br>
</body>
</html>
Servlet time的主要代碼是：
public void doGet（HttpServletRequest request, HttpServletResponse response）
throws ServletException, IOException {
response.setContentType（"text/html;charset=UTF-8"）；
PrintWriter out = response.getWriter（）；
Date d=new Date（）；
int h=d.getHours（）；
int m=d.getMinutes（）；
int s=d.getSeconds（）；
System.out.println（d）；
out.println（h+":"+m+":"+s）；//這里就將剛創建的時間傳遞給了html頁面
out.flush（）；
out.close（）；
}
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉載自：網絡轉載
金喜正規買球 
110次
金喜正規買球相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線