您的位置：首页 > 其它

简单Ajax例子

2015-06-25 01:04 309 查看

一、概述

1.程序执行流程：

(1)点击id="testBtn"的按钮，触发validate();

(2)validate()中有调用request.open方法与server交互(在url指定的jsp页面中，调用writer编写了xml文件并以responseXML返回给request);

(3)交互状态有变时会调用callback函数，callback判定状态，若交互成功则读取responseXML中的值;

(4)根据读取到的responseXML中的值动态生成innerHTML返回给页面。

二、代码

1.index.html

<html>
<head>
<script>

function validate(){
var idField = document.getElementById("testBtn");
var url = "validate.jsp?id="+escape(idField);
req = new XMLHttpRequest();
req.open("GET", url, true);
req.onreadystatechange = callback;
req.send(null);

}

function callback(){
if(req.readyState == 4){
//alert(req.status);
//alert(req.responseXML);
//alert( msg);
if(req.status == 200){
var msg = req.responseXML.getElementsByTagName("msg")[0];
setMsg(msg.childNodes[0].nodeValue);
}
}
}

function setMsg(msg){
var mdiv = document.getElementById("ajaxMsg");
if(msg == "abc"){
mdiv.innerHTML = "<div>America Born Chinese</div>";
}else if(msg == "123"){
mdiv.innerHTML = "<div>阿拉伯数字</div>";
}

}
</script>
</head>
<body>
<input type="submit" id="testBtn" onclick="validate()" value="mybutton"/>
<span id="ajaxMsg"></span>
</body>
</html>

2.validate.jsp

<%
response.setContentType("text/xml");
response.setHeader("Cache Control", "no store");
response.setHeader("Pragam","no-cache");
response.setDateHeader("Expires", 0);
response.getWriter().write("<msg>abc</msg>");
%>

三、运行结果

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航