我们将之前写的应用使用xml返回数据，下面是如何修改:
程序清单
服务端Servelt:AjaxXMLServer.java
静态页面:ajaxXml.html
javascript脚本文件：verifyxml.js
AjaxXMLServer.java:
import java.io.IOException;
import java.io.PrintWriter;
import java.net.URLDecoder;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
//这个servlet返回的是XML的数据
public class AjaxXMLServer extends HttpServlet {
protected void doPost(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
doGet(httpServletRequest, httpServletResponse);
}
protected void doGet(HttpServletRequest httpServletRequest, HttpServletResponse httpServletResponse) throws ServletException, IOException {
try{
//修改点1------相应的ContentType必须为text/xml
httpServletResponse.setContentType("text/xml;charset=utf-8");
PrintWriter out = httpServletResponse.getWriter();
//inte用来记录验证次数
Integer inte = (Integer) httpServletRequest.getSession().getAttribute("total");
int temp = 0;
if (inte == null) {
temp = 1;
} else {
temp = inte.intValue() + 1;
}
httpServletRequest.getSession().setAttribute("total",temp);
//1.取参数
String old = httpServletRequest.getParameter("name");
//String name = new String(old.getBytes("iso8859-1"),"UTF-8");
String name = URLDecoder.decode(old,"UTF-8");
//修改点2-----返回的数据需要拼装成xml格式
StringBuilder builder=new StringBuilder();
builder.append("<message>");
//2.检查参数是否有问题
if(old == null || old.length() == 0){
builder.append("用户名不能为空").append("</message>");
} else{
if(name.equals("hpu")){
//4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户
//写法没有变化，本质发生了改变
builder.append("用户名[" + name + "]已经存在，请使用其他用户名, " + temp).append("</message>");
} else{
builder.append("用户名[" + name + "]尚未存在，可以使用该用户名注册, " + temp).append("</message>");
}
out.println(builder.toString());
System.out.println(builder.toString());
}
} catch(Exception e){
e.printStackTrace();
}
}
}
ajaxXml.html:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>用户校验ajax实例</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="js/verifyxml.js"></script>
</head>
<body>
<h1> 用户校验ajax实例</h1><br>
请输入用户名:<br/>
<!-- ajax不需要使用表单进行数据提交，因此不用写表单标签 -->
<!-- ajax不需要name属性，只需要一个id的属性 -->
<input type="text" id="username"/>
<input type="button" value="校验" onclick="verify()"/>
<!-- 这个div用于存放服务器返回的信息，开始为空 -->
<!-- id属性定义是为了利用dom的方式找到某一个节点，进行操作 -->
<div id="result">
</div>
<!-- div和span的值的差异，div的内容独占行，span的内容和其他内容相处良好 -->
</body>
</html>
verifyxml.js:
//用户名校验的方法
//这个方法使用XMLHttpRequest对象来进行AJAX的异步数据交互
var xmlhttp;
function verify(){
//1.使用最基本的DOM_API来获取文本框中的值
//document.getElementById("username")是dom中获取元素节点的一种方法，一个元素节点对应HTML
//页面中的一个标签，.value可以获取一个元素节点的value属性值
//
var username=document.getElementById("username").value;
//2.创建XMLHttpRequest对象
//这是XMLHttpRequest对象五步使用中最复杂的一步
//这是由于各种浏览器兼容问题造成的，要使用各种库来屏蔽掉这种差异
//下面根据IE和其它类型的浏览器建立这个对象的不同方式写不同的代码
if(window.XMLHttpRequest){
//针对FireFox、Mozillar、Opera、Safari、IE7、IE8
xmlhttp=new XMLHttpRequest();
//修复类似Mozillar浏览器的bug
if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//所有的IE中window.ActiveXObject条件都成立
//针对IE6、IE5.5、IE5(现在没人用了，可以把这条if分支删除)
//两个可以用于创建XMLHttpRequest对象的控件名称，保存在一个js的数组中
//排在前面的版本最新
var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i<activeName.length;i++){
try{
//获取一个控件名进行创建，如果创建成功就终止循环
//如果创建失败，会抛出异常，然后就可以继续循环，继续尝试创建
xmlhttp=new ActiveXObject(activeName[i]);
break;
}catch(e){
//仍然不能创建，抛出异常后，给出友好提示
}
}
}
//确认XMLHttpRequest对象创建成功
if(!xmlhttp){
alert("XMLHttpRequest对象创建失败！！");
}else{
alert(xmlhttp);
}
//2.注册回调函数
//后面写的是函数名，千万不要加括号，会把
//回调函数的返回值给XHR的回调函数对象
xmlhttp.onreadystatechange=callback;
//3.设置连接信息
//包括传输方式(get/post)，请求的url地址，异步还是同步方式(true/false)，账号和密码(可不写)
xmlhttp.open("POST","AjaxXMLServer", true);
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//4.发送数据，开始和服务器端进行交互
//同步方式下，send这句话会在服务器端数据回来之后才执行
//异步方式下，send这句话会立即完成执行
xmlhttp.send("name="+username);
}
//回调函数
function callback(){
//判断对象的状态是交互完成
//XHR的交互状态readyState代号有：
/**
* 监听服务器返回的状态一共有五个状态：
* 0,1,2,3,4
* 0是啥都没有连接的时候
* 1是open方法还没被调用
* 2是open方法调用了，send方法没有执行
* 3是open方法执行了，send方法也执行了
* 4是返回结果的时候的状态(status)
* */
if(xmlhttp.readyState==4){
//判断http的交互是否成功
if(xmlhttp.status==200){
//使用responseXML的方式来接收XML数据对象的DOM对象
var domobj=xmlhttp.responseXML;
if(domobj){
//<message>123123123</message>
//利用getElementsByTagName可以根据标签名来获取元素节点
var messgaeNode=domobj.getElementsByTagName("message");
if(messgaeNode.length>0){
//可能会找到很多message节点，所以接收到的是数组，因为就一个，所以取0号节点
//message标签中的文本在dom中是message标签所对应的元素节点的子节点，firstChild可以获取到
//当前节点的第一个子节点
//通过以下方式就可以获取到文本内容所对应的节点
var textNode=messgaeNode[0].firstChild;
//对于文本节点来说，可以通过nodeValue的方式返回文本节点的内容
var responseMessage=textNode.nodeValue;
//将数据显示在界面上
//通过DOM的方式找到div标签对应的元素节点
var divNode=document.getElementById("result");
//设置元素节点中的html内容
divNode.innerHTML=responseMessage;
}else{
alert("XML数据错误，原始文本内容为:"+xmlhttp.responseText);
}
}else{
alert("XML数据错误，原始文本内容为:"+xmlhttp.responseText);
}
}else{
alert("出错了！");
}
}
}
我们在js的回调函数中为了保证对数据处理的正确性，进行了多层次的判断
测试：输入123点击校验，服务器端返回的信息在界面上显示，试验成功！
总结----AJAX应用的五个步骤
1.建立XMLHttpRequest
2.设置回调函数
3.使用open方法与服务器建立连接
4.向服务器端发送数据
5.再回调函数针对不同相应状态进行处理
转载请注明出处：http://blog.csdn.net/acmman/article/details/47720153
时间： 2024-11-01 04:00:06