AJAX03
最基本版使用xml返回实现ajax
package yosemite.test.xml;
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 AJAXXMLServer extends HttpServlet {
/**
*
*/
private static final long serialVersionUID = -1775044733979556653L;
@Override
protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
doGet(req, resp);
}
@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
try {
// 修改点1----响应的Content-Type必须是text/xml
resp.setContentType("text/xml;charset=utf-8");
PrintWriter out = resp.getWriter();
// 1.取参数
String old = req.getParameter("name");
String name = new String(old.getBytes("iso8859-1"),"UTF-8");
// 修改点2-----返回的数据需要拼装成xml格式
StringBuilder builder = new StringBuilder();
builder.append("<message>");
// 2.检查参数是否有问题
if (old == null || old.length() == 0) {
builder.append("用户名不能为空").append("</message>");
} else {
// 3.校验操作
if (name.equals("wangxingkui")) {
// 4。和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面段，而不是将一个新的页面发送给用户
// 写法没有变化，本质发生了改变
builder.append("用户名[" + name + "]已经存在，请使用其他用户名").append("</message>");
} else {
builder.append("用户名[" + name + "]尚未存在，可以使用该用户名注册").append("</message>");
}
out.println(builder.toString());
System.out.println(builder.toString());
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
<!DOCTYPE html> <html> <head> <title>用户名校验ajax实例3</title> <meta name="keywords" content="keyword1,keyword2,keyword3"> <meta name="description" content="this is my page"> <meta name="content-type" content="text/html; charset=UTF-8"> <script src="js/verifyxml.js"></script> </head> <body> 用户名校验的ajax实例，请输入用户名： <br/> <input type="text" id="userName" /> <input type="button" value="校验" onclick="verify()"/> <div id="result"></div> </body> </html>
//用户名校验的方法
//这个方法将使用XMLHTTPRequest对象来进行AJAX的异步数据交互
var xmlhttp;
function verify() {
// 0。使用dom的方式获取文本框中的值
var userName = document.getElementById("userName").value;
// 1.创建XMLHttpRequest对象
if (window.XMLHttpRequest) {
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
var activexName = [ "MSXML2.XMLHTTP", "Microsoft.XMLHTTP" ];
for (var i = 0; i < activexName.length; i++) {
try {
// 取出一个控件名进行创建，如果创建成功就终止循环
// 如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
xmlhttp = new ActiveXObject(activexName[i]);
break;
} catch (e) {
}
}
}
// 2.注册回调函数
xmlhttp.onreadystatechange = callback;
// 3。设置连接信息
//第一个参数表示http的请求方式，支持所有http的请求方式，主要使用get和post
//第二个参数表示请求的url地址，get方式请求的参数也在url中
//第三个参数表示采用异步还是同步方式交互，true表示异步
// xmlhttp.open("GET", "AJAXServer?name=" + userName, true);
// 4.发送数据，开始和服务器端进行交互
// 同步方式下，send这句话会在服务器段数据回来后才执行完
// 异步方式下，send这句话会立即完成执行
// xmlhttp.send(null);
//POST方式请求的代码
xmlhttp.open("POST", "AJAXXMLServer", true);
// POST方式需要自己设置http的请求头
xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// POST方式发送数据
xmlhttp.send("name=" + userName);
}
// 回调函数
function callback() {
// 5。接收响应数据
// 判断对象的状态是交互完成
if (xmlhttp.readyState == 4) {
// 判断http的交互是否成功
if (xmlhttp.status == 200) {
// 使用responseXML的方式来接收XML数据对象的DOM对象
var domObj = xmlhttp.responseXML;
if (domObj) {
// <message>123123123</message>
// dom中利用getElementsByTagName可以根据标签名来获取元素节点，返回的是一个数组
var messageNodes = domObj.getElementsByTagName("message");
if (messageNodes.length > 0) {
// 获取message节点中的文本内容
// message标签中的文本在dom中是message标签所对应的元素节点的字节点，firstChild可以获取到当前节点的第一个子节点
// 通过以下方式就可以获取到文本内容所对应的节点
var textNode = messageNodes[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("出错了！！！");
}
}
}
<?xml version="1.0" encoding="UTF-8"?> <web-app xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns="http://xmlns.jcp.org/xml/ns/javaee" xsi:schemaLocation="http://xmlns.jcp.org/xml/ns/javaee http://xmlns.jcp.org/xml/ns/javaee/web-app_3_1.xsd" id="WebApp_ID" version="3.1"> <display-name>yosemite</display-name> <welcome-file-list> <welcome-file>index.html</welcome-file> <welcome-file>index.htm</welcome-file> <welcome-file>index.jsp</welcome-file> <welcome-file>default.html</welcome-file> <welcome-file>default.htm</welcome-file> <welcome-file>default.jsp</welcome-file> </welcome-file-list> <servlet> <servlet-name>AJAXXMLServer</servlet-name> <servlet-class>yosemite.test.xml.AJAXXMLServer</servlet-class> </servlet> <servlet-mapping> <servlet-name>AJAXXMLServer</servlet-name> <url-pattern>/AJAXXMLServer</url-pattern> </servlet-mapping> </web-app>