一、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”按钮，
「艾尔登法环」梅琳娜手办开订 立体手办▪
万代「艾尔登法环」白狼战鬼手办开订 立体手办▪
「夏目友人帐」猫咪老师粘土人开订 立体手办▪
「五等分的新娘∬」中野三玖·白无垢版手办开订 立体手办▪
「海贼王」乌索普Q版手办开订 立体手办▪
良笑社「初音未来」新手办开订 立体手办▪
「黑岩射手DAWN FALL」死亡主宰手办开订 立体手办▪
「盾之勇者成名录」菲洛手办登场 立体手办▪
「魔法少女小圆」美树沙耶香手办开订 立体手办▪
「咒术回战」七海建人粘土人登场 立体手办▪
「五等分的新娘」中野二乃白无垢手办开订 立体手办▪
「为美好的世界献上祝福！」芸芸粘土人开订 立体手办▪
「公主连结 与你重逢」六星可可萝手办开订 立体手办▪
「女神异闻录5」Joker雨宫莲手办开订 立体手办▪
「间谍过家家」约尔・福杰粘土人登场 立体手办▪
「街角魔族 2丁目」吉田优子手办开订 立体手办▪
「火影忍者 疾风传」旗木卡卡西·暗部版粘土人登场 立体手办▪
「佐佐木与宫野」宫野由美粘土人开订 立体手办▪
「盾之勇者成名录」第2季拉芙塔莉雅手办开订 立体手办▪
「咒术回战」两面宿傩Q版坐姿手办开订 立体手办▪
「DATE·A·BULLET」时崎狂三手办开订 立体手办▪
「狂赌之渊××」早乙女芽亚里粘土人开订 立体手办▪
「魔道祖师」魏无羨粘土人开订 立体手办▪
「新·奥特曼」奥特曼手办现已开订 立体手办▪
扫码关注我们