您的位置：首页 > 理论基础 > 计算机网络

Ajax处理XML，XMLHttpRequest对象的创建和访问servlet并返回xml数据到页面展示

2012-09-11 00:16 851 查看

1，ajaxxml.js

//用户名检验方法
//这个方法将使用XMLHTTPRequest对象进行AJAX的异步数据交互
var xmlHttp;
function verify(){
//使用dom的方式获取文本框中的值
//.value可以获取一个元素节点的value属性
var userName = document.getElementById("userName").value;

//创建XMLHttprequest对象
//需要针对IE和其他类型的浏览器建议这个对象的不同方式写不同的代码

if(window.XMLHttpRequest){

//针对FireFox,Mozillar,opera,safari,ie7,ie8
xmlHttp = new XMLHttpRequest();
//针对某些特定版本的moziller浏览器的BUG进行修正
if(xmlHttp.overrideMimeType){
xmlHttp.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
//针对IE6,ie5.5 ie5
//两个可以用于创建XMLHTTPREQUEST对象控件名称，保存在一个JS数组中
//排在前面的版本较新
var activexName = new ActiveXObject["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0; i<activexName.length; i++){
try{
//取出一个控件名进行创建，如果创建成功就终止循环
//如果创建失败，会抛出异常，然后可以继续循环，继续尝试创建
xmlHttp = new ActiveXObject(activexName[i]);
break;
}catch(e){

}
}

}
//确认XMLHTTPREQUEST对象创建成功
/*if(!xmlHttp){
alert("xmlhttprequest对象创建失败");
return;
}else{
alert(xmlHttp);
}*/

//2.注册回调函数
//注册回调函数时，只需要函数名，不要加括号
//我们需要将函数名注册，如果加上括号，就会把函数的返回值注册上，这是错误的
xmlHttp.onreadystatechange = callback;
//3.设置连接信息
//第一个参数表示http的请求方式，支持所有http的请求方式，主要是get和post
//第二个表示请求的url地址，get方式请求的参数也是url中
//第三个参数表示采用异步还是同步方式交互，true表示异步
//xmlHttp.open("GET", "servlet/AjaxServlet?name=" + userName, true);

//post方式请求的代码并访问servlet
xmlHttp.open("POST", "servlet/AjaxXmlServlet", true);
//post方式需要自己设置http的请求头
xmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
//post方式发送数据
xmlHttp.send("name=" + userName);
//4.发送数据，开始和服务器端进行交互
//同步方式下，send这句话全在服务器端数据回来后才执行完
//异步方式下，send这句话会立即完成执行
//xmlHttp.send(null);
}
//回调函数
function callback(){
//5.接收响应数据
//判断对象的状态 是交互完成
if(xmlHttp.readyState == 4){
//判断http的交互是否成功
if(xmlHttp.status == 200){
//使用responseXML的方式来接收xml数据对象的DOM对象
var domObj = xmlHttp.responseXML;
//<message>ggggg</message>
//getElementsByTagName根据标签名获取元素节点,返回的是一个数组
var messageNodes = domObj.getElementsByTagName("message");
if(messageNodes.length >0){

//获取message节点的文本内容
var textNode = messageNodes[0].firstChild;
var responseMessage = textNode.nodeValue;
//将数据显示在页面上
//通过dom的方式到div标签所对应的元素节点
var divNode = document.getElementById("result");
//设置元素节点中的html内容
divNode.innerHTML = responseMessage;

}else{
alert("XML数据格式错误，原始文本内容为："+xmlHttp.responseText);
}
}else{
alert("出错了");
}
}
}

2，AjaxXmlServlet.java

package com.panlong.servlet;

import java.io.IOException;
import java.io.PrintWriter;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AjaxXmlServlet extends HttpServlet {

private static final long serialVersionUID = 1L;

protected void doGet(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {

Integer total = (Integer) req.getSession().getAttribute("total");
int temp = 0;
if(total == null ){
temp = 1;
}else{
temp = total.intValue() + 1;
}
req.getSession().setAttribute("total",total.intValue()+temp);
try {
//1.取参数
resp.setContentType("text/xml;charset=GB2312");
PrintWriter out = resp.getWriter();
StringBuilder builder = new StringBuilder();

String old = req.getParameter("name");

//2、检查参数是否有问题
String name = old;

builder.append("<message>");
if("".equals(old) || old == null){
builder.append("用户名必须输入").append("</message>");

}
else
{

if("lila".equals(name)){
builder.append("该用户名已经注册").append("</message>");
}else{
builder.append("该用户名未注册，您可以注册["+name+"]这个用户名").append("</message>");

}
}
out.println(builder.toString());

}catch (Exception e) {
e.printStackTrace();
//3.检验操作
}
}

protected void doPost(HttpServletRequest req, HttpServletResponse resp)
throws ServletException, IOException {
doGet(req, resp);
}

}

3，页面展示文件index.html

<!DOCTYPE html>
<html>
<head>
<title>AJAX实例</title>

<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=GB2312">
<script type="text/javascript" src="js/ajaxxml.js"></script>
<!--<link rel="stylesheet" type="text/css" href="./styles.css">-->

</head>

<body>
<font color="blue" size="2">请输入用户名：</font>
<input type="text" id="userName" /><font color="red" size="2"><span id="result" >*</span></font><br/><br/>
<input type="submit" name="提交" value="提交"  onclick="verify();"/>

</body>
</html>

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

标签：

相关文章推荐

新的分享

章节导航

Ajax处理XML，XMLHttpRequest对象的创建和访问servlet并返回xml数据到页面展示

相关说明全在注释中：

1，ajaxxml.js

2，AjaxXmlServlet.java

3，页面展示文件index.html