1.新建一个html文件。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajaxxml.html</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=UTF-8">
<script type="text/javascript" src="js/verifyxml.js"></script>
</head>
<body>
<h3>
用户名输入校验的例子
</h3>
<input name="username" type="text" id="username">
<br>
<input type="button" value="检验" onclick="verify()">
<div id="result"></div>
</body>
</html>
2.创建服务器端servlet程序
package com.zchen.ajax.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;
//返回XML数据
public class AJAXXMLServlet extends HttpServlet {
private static final long serialVersionUID = 3611240119854641367L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doPost(request, response);
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
try {
//修改点1：响应的Content-Type必须是text/xml
response.setContentType("text/xml;charset=utf-8");
PrintWriter out = response.getWriter();
String old = request.getParameter("name");
//修改点2：返回数据需要拼装成xml格式
StringBuilder builder = new StringBuilder();
builder.append("<message>");
if (old == null || old.length() == 0) {
out.println("用户名不能为空");
} else {
String name = new String(old.getBytes("ISO-8859-1"), "UTF-8");
if (name.equals("chenzhen")) {
builder.append("用户名[" + name + "]已经存在。").append("</message>");
} else {
builder.append("用户名[" + name + "]尚未存在。").append("</message>");
}
out.println(builder.toString());
}
} catch (Exception e) {
e.printStackTrace();
}
}
}
3.将servlet映射配置到web.xml文件中。
4.新建客户端js文件
//用户名校验的方法
//这个方法是用XMLHTTPRequest对象来进行AJAX的异步数据交互
var xmlhttp;
function verify(){
//1.使用dom的方式获取文本框的值
//document.getElementById("username")是dom中获取元素节点的一种方法，一个元素节点对应HTML页面的一个标签，例如<input >
//.value可以获取一个元素节点的value属性值
var username = document.getElementById("username").value;
//2.创建XMLHTTPRequest对象
//这XMLHTTPRequest是对象内部使用中最复杂的一步
//需要针对IE和其他类型的游览器建立这个对象的不同使用方式
if(window.XMLHttpRequest){
//针对FireFox、Mozillar、Opera、safari、IE7、IE8
xmlhttp = new XMLHttpRequest();
if(xmlhttp.overrideMineType){
//针对某些特定版本的mozillar游览器的BUG进行修正
xmlhttp.overrideMimeType("text/html");
}
}else if(window.ActiveXObject){
//针对IE6、IE5.5、IE5
//两个可以用于创建XMLHTTPRequest对象的控件名称，保存在一个js的数组中
//排在前面的版本较新
var activexName = ['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对象创建失败！");
}else{
//alert(xmlhttp.readyState);
}
//3.注册回调函数
//注册回调函数时，只需要函数名不需要括号
//我们需要将函数名之策，如果加上括号就会把函数的返回值注册上这是错误的
xmlhttp.onreadystatechange = callback;
//4.设置连接信息
//第一个参数表示http的请求方式，支持所有http的请求方式，只要使用get和post
//第二个参数表示请求的url地址，get方式请求的参数也在url中
//第三个参数表示采用异步还是同步方式交互 true表示异步
//xmlhttp.open("GET","servlet/AJAXServer?name="+username,true);
//POST方式请求的代码
xmlhttp.open("POST","servlet/AJAXXMLServlet",true);
//POST方式需要自己设置http的请求头
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//POst方式发送数据
xmlhttp.send("name="+username);
//5.发送数据，开始和服务器端进行交互
//同步方式下，send这句话会在服务器端数据回来后才执行完
//异步方式下，send这句话会立即完成执行
//xmlhttp.send(null);
}
function callback(){
//alert(xmlhttp.readyState);
//6.接受响应的数据
//判断对象的状态时交互完成
//一共有5种状态，4表示完成
if(xmlhttp.readyState == 4){
//判断http的交互是否成功 200表示成功
if(xmlhttp.status == 200){
//使用responseXML的方式来接受XML数据对象的DOM对象
var domObj = xmlhttp.responseXML;
if(domObj){
//<message>123456789</message>我们要获取message里面的文本信息
//dom中利用getElementByTagName可以根据标签名来获取元素的节点
var messageNode = domObj.getElementsByTagName("message");
if(messageNode.length > 0){
//获取message节点中的文本内容
//message标签中的文本在dom中是message标签所对应的元素节点的子节点，firstChild可以获取到当前节点的第一个元素
//通过以下方式就可以获得文本内容所对应的节点
var textNode = messageNode[0].firstChild;
//对应文本节点来说可以通过nodeValue的方式返回文本节点的文本内容
var responseMessage = textNode.nodeValue;
//将数据显示在页面上
//通过dom的方式找到div标签所对应的元素的节点
var divNode = document.getElementById("result");
//设置元素节点中的html内容
divNode.innerHTML = responseMessage;
}else{
alert("XML数据格式错误，原始文本内容为："+xmlhttp.responseMessage);
}
}
}else{
alert("出错了");
}
}
}
5.测试okay
分享到：
相关推荐
在本文件中，我们将深入探讨如何利用XMLHttpRequest接收和处理XML数据，从而使代码更加健壮。 一、XMLHttpRequest对象 XMLHttpRequest对象是JavaScript内置的，用于创建与服务器的连接并发送HTTP请求。创建一个新...
XMLHttpRequest对象是Ajax技术的基础，它允许JavaScript在页面不刷新的情况下与服务器进行通信。创建一个XMLHttpRequest实例非常简单： ```javascript var xhr = new XMLHttpRequest(); ``` 一旦创建了实例，我们...
本文档将详细介绍XMLHttpRequest对象的基本知识、属性和方法，并演示如何使用它来进行简单的请求与处理。 #### 二、XMLHttpRequest对象的历史与现状 XMLHttpRequest对象最初由微软公司在Internet Explorer中引入，...
XMLHttpRequest对象是Web开发中的关键组件，尤其对于实现AJAX（异步JavaScript和XML）技术至关重要。它允许在不刷新整个页面的情况下与服务器进行通信，极大地提升了用户体验。这个对象在所有现代浏览器中都得到了...
Ajax技术利用XMLHttpRequest对象发送HTTP请求并接收响应，从而在后台与服务器进行通信。例如，Gmail和Outlook Express等应用就广泛应用了Ajax技术。 XMLHttpRequest对象在所有主流浏览器中都有实现，尽管早期在...
例如，UpdatePanel控件背后的实现就是基于XMLHttpRequest对象的，它自动处理了请求和响应的处理逻辑，使得开发者无需直接操作XMLHttpRequest对象。 总的来说，VS2008的AJAX控件为开发者提供了一种高效、直观的方式...
- responseText或responseXML属性：分别用于获取响应的数据，前者为文本形式，后者为XML形式（如果服务器返回XML数据）。 - onreadystatechange事件：当readyState属性变化时触发，通常用来监控请求的进度。 - ...
在ASP.NET AJAX开发中，XMLHttpRequest对象是进行异步数据通信的核心组件，它允许我们向服务器发送请求并接收响应，而无需刷新整个页面。在这个例子中，我们将关注如何处理服务器返回的数据，特别是`ResponseXML`和`...
### XMLHTTPRequest对象详解 在现代Web开发中，Ajax（Asynchronous JavaScript and XML）技术的应用非常广泛，它使得网页能够实现局部刷新，提升了用户体验。而这一切的基础便是`XMLHttpRequest`对象，一个用于在...
1. **加载XML文件**：这可以通过创建XMLHttpRequest对象或使用现代浏览器支持的fetch API来实现。以下是一个使用XMLHttpRequest的例子： ```html var xhr = new XMLHttpRequest(); xhr.open("GET", "data.xml", ...
请注意，这种方法在现代浏览器中可能不适用，因为它们通常使用DOM接口和XMLHttpRequest对象来处理XML。 这些转换方法都是XML解析和操作的基础，对于处理XML数据交换至关重要。了解和熟练掌握这些转换技巧，能够帮助...
**XMLHTTPRequest** 是一套重要的 API，它允许在浏览器端利用 JavaScript、VbScript 或 Jscript 等脚本语言通过 HTTP 协议发送请求和接收 XML 及其他类型的数据。这一技术的核心优势在于能够实现网页局部内容的更新...
在这个场景中，我们将关注HTML5如何读取XML数据，并利用这些数据在Canvas上进行绘图。 首先，让我们了解HTML5中的XMLHttpRequest对象。这是一个异步通信接口，允许JavaScript在不刷新整个页面的情况下与服务器交换...
要实现Ajax获取XML数据，我们需要使用JavaScript的XMLHttpRequest对象或者更现代的fetch API。XMLHttpRequest是Ajax的核心，它允许我们在后台与服务器进行异步通信。以下是一个简单的Ajax请求XML数据的例子： ```...
这种问题通常出现在使用ASP（Active Server Pages）或其他服务器端脚本语言与IIS（Internet Information Services）服务器进行交互时，尤其是当用户尝试通过POST方法提交大量XML数据时。 IIS服务器出于安全考虑，对...
虽然最初的设计是处理XML数据，但如今XMLHttpRequest支持处理各种类型的数据，包括JSON、文本和二进制。 在ASP.NET Web服务（也称为ASMX服务）中，我们通常创建一个服务端的方法，该方法可以处理来自客户端的请求。...