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对象与Ajax XMLHttpRequest对象的属性和方法 Ajax编程 如何使用Ajax 初始化对象 指定响应处理函数 发出http请求 处理服务器返回的信息 一个初步的Ajax开发框架 异常处理机制 中文乱码问题及其解决方案...
responseXML 将响应信息格式化为Xml Document对象并返回，只读 status 返回当前请求的http状态码.只读 statusText 返回当前请求的响应行状态，只读 * 表示此属性是W3C文档对象模型的扩展. 方法： abort 取消...
所以我们相信，XML做为一种先进的数据处理方法，将使网络跨越到一个新的境界。 六. XML的严格格式 吸取HTML松散格式带来的经验教训，XML一开始就坚持实行"良好的格式"。 我们先看HTML的一些语句，这些语句在HTML中...
XMLHttpRequest对象用于和服务器交换数据。如需将请求发送到服务器，我们使用XMLHttpRequest对象的open()和send()方法。方法描述参数open(method,url,async)规定请求的类型、URL 以及是否异步处理请求method：请求的...
使用AJAX技术，就可以使Javascript通过XMLHttpRequest对象直接与器进行交互。 PHP培训教程之AJAX技术全文共3页，当前为第1页。 通过HTTPRequest，一个web页面可以一个请求到web器并且接受web器返回的信息(不用重新...
利用XmlHttpRequest让客户端与服务器之间进行通信，包含以下3个关键部分： 1、onreadystatechange事件处理函数 2、open方法 3、send方法 3.2.4.1onreadystatechange方法 1、该事件处理函数由服务器触发，而不是...
一.使用ajax有以下固定步骤： 1, 从页面触发Ajax的操作. 2, 定义创建XMLHttpRequest对象的方法(建立一个XMLHttpRequest...4, 处理Ajax回传的数据(xml或text类型),使数据能按你的意愿现实在客户端. 5, 回显到页面给用户.
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互...通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某
使用XMLHttpRequest对象与Web服务器进行异步数据交换； 使用JavaScript将所有的东西绑定在一起。 使用SOAP以XML的格式来传送方法名和方法参数。 类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地利用了一...
通过AJAX，您的JavaScript可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信。通过这个对象，您的JavaScript可在不重载页面的情况与Web服务器交换数据。AJAX在浏览器与Web服务器之间使用异步数据传输...
他还揭开了 Ajax 核心概念的神秘面纱，包括 XMLHttpRequest 对象。 五年前，如果不知道 XML，您就是一只无人重视的丑小鸭。十八个月前，Ruby 成了关注的中心，不知道 Ruby 的程序员只能坐冷板凳了。今天，如果想跟...
AJAX（异步的 JavaScript 和 XML）是用于创建快速动态网页的一种技术，它在不重新加载整个页面的情况下，与服务器交换数据并更新部分网页，ajax 使用XMLHttpRequest对象在后台与服务器交换数据，XMLHttpRequest 是 ...
使用 XMLHttpRequest 进行异步数据查询、检索； 使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文,原文题目(Ajax: A New Approach to Web Applications)。 类似于...
export ORACLE_HOME=/oracledata/.../bin: BufferedReader建构时接受java.io.Reader物件 可使用java.io.InputStreamReader 例: import java.io.InputStreamReader; import java.io.BufferedReader; class n{ ...
使用 XMLHttpRequest 进行异步数据查询、检索； 使用 JavaScript 将所有的东西绑定在一起。英文参见Ajax的提出者Jesse James Garrett的原文。 类似于DHTML或LAMP，AJAX不是指一种单一的技术，而是有机地...
在 HTML 表单中结合 Asynchronous JavaScript™ + XML (Ajax) 的服务器回调机制，对表单应用 Ajax，对于为...XMLHttpRequest对象用来响应通过HTTP传递的数据，一旦数据返回到客户端就可以立刻使用DOM将数据放到网面上。
第 3 部分 XMLHttpRequest 对象 第 4 部分: 利用 DOM 进行 Web 响应 第 5 部分: 操纵 DOM 第 6 部分: 建立基于 DOM 的 Web 应用程序 第 7 部分: 在请求和响应中使用 XML（上） 第 8 部分: 在请求和响应中使用 XML...
20.3 利用IE userData持久化数据 20.4 应用程序存储和离线Web应用 第21章 多媒体和图形编程 21.1 脚本化图片 21.2 脚本化音频和视频 21.3 SVG：可伸缩的矢量图形 21.4 中的图形 第22章 HTML5 API 22.1 地理位置 22.2...