Ajax工作原理和第一個Ajax實例
一、Ajax工作原理
如上圖，用戶在與瀏覽器的交互過程中，可能觸發(fā)一個JavaScript事件，例如表單中失去焦點事件，然后由JavaScript創(chuàng)建一個XMLHttpRequest 對象，并通過該對象異步地把請求發(fā)送到服務(wù)器端，這時，用戶可以繼續(xù)進行其它的操作，比如繼續(xù)瀏覽當前頁面，或者填寫其他表單等等，而不必去等待服務(wù)器的響應(yīng)。服務(wù)器端在接到請求后，通過服務(wù)器端程序處理并把結(jié)果返回，返回的結(jié)果被XMLHttpRequest捕獲到并返回給 JavaScript，再由JavaScript調(diào)用相應(yīng)的DOM進行顯示層的控制。?
二、Ajax實例
1、創(chuàng)建Ajax例子前提，必須先搭建Web服務(wù)器Tomcat，構(gòu)建服務(wù)器端環(huán)境。
2、使用Ajax來開發(fā)一個顯示當前時間的實例。
首先創(chuàng)建服務(wù)器端文件，打開記事本，輸入以下代碼：
<html>
<head>
<title>Simple AjaxExample </title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
???if(window.ActiveXObject) {
?????xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");//創(chuàng)建XMLHttpRequet對象
???}
??else if (window.XMLHttpRequest) {
?????xmlHttp=new XMLHttpRequest();//創(chuàng)建XMLHttpRequet對象
?????}
?}
function startRequest() {
?createXMLHttpRequest();
?xmlHttp.onreadystatechange=handleStateChange;
?xmlHttp.open("GET", "Ran.jsp", true);
?xmlHttp.send(null);
?}
function handleStateChange() {
??if(xmlHttp.readyState==4) {
?if(xmlHttp.status==200) {
??alert("第一個Ajax示例："+ xmlHttp.responseText);
?????}
??}
}
</script>
</head>
<body>
??<form action="#">
??<input type="button" value="Start ?Request " ?onclick="startRequest(); "/>
</form>
</body>
</html>
3、創(chuàng)建服務(wù)端代碼，打開記事本，輸入下列代碼：
<%@page contentType="text/html;charset=gb2312"%>
<%@page import="java.util.*"%>
<%
//此處可以自定義轉(zhuǎn)向頁面
??Date d=new Date();
??out.print(d);
%>
4、
重新啟動Tomcat服務(wù)器，打開IE瀏覽器，在其地址欄中輸入http://127.0.0.1：8080/Ajax/firstAjax.jsp，然后點擊“Start Request”按鈕，
