Ajax工作原理和第一个Ajax实例
一、Ajax工作原理
如上图，用户在与浏览器的交互过程中，可能触发一个JavaScript事件，例如表单中失去焦点事件，然后由JavaScript创建一个XMLHttpRequest 对象，并通过该对象异步地把请求发送到服务器端，这时，用户可以继续进行其它的操作，比如继续浏览当前页面，或者填写其他表单等等，而不必去等待服务器的响应。服务器端在接到请求后，通过服务器端程序处理并把结果返回，返回的结果被XMLHttpRequest捕获到并返回给 JavaScript，再由JavaScript调用相应的DOM进行显示层的控制。
二、Ajax实例
1、创建Ajax例子前提，必须先搭建Web服务器Tomcat，构建服务器端环境。
2、使用Ajax来开发一个显示当前时间的实例。
首先创建服务器端文件，打开记事本，输入以下代码：
<html>
<head>
<title>Simple AjaxExample </title>
<script type="text/javascript">
var xmlHttp;
function createXMLHttpRequest(){
if(window.ActiveXObject) {
xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");//创建XMLHttpRequet对象
}
else if (window.XMLHttpRequest) {
xmlHttp=new XMLHttpRequest();//创建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、创建服务端代码，打开记事本，输入下列代码：
<%@page contentType="text/html;charset=gb2312"%>
<%@page import="java.util.*"%>
<%
//此处可以自定义转向页面
Date d=new Date();
out.print(d);
%>
4、
重新启动Tomcat服务器，打开IE浏览器，在其地址栏中输入http://127.0.0.1：8080/Ajax/firstAjax.jsp，然后点击“Start Request”按钮，
