使用XMLHTTPRequest对象完成ajax

最新推荐文章于 2023-06-11 16:33:12 发布

lufeng4321

最新推荐文章于 2023-06-11 16:33:12 发布

阅读量134

点赞数

分类专栏： ajax 文章标签： Ajax XML Servlet Safari Firefox

本文链接：https://blog.csdn.net/lufeng4321/article/details/83435403

版权

ajax 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

[color=blue]第一步，编写HTML页面代码[/color]

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<script type="text/javascript" src="jslib/verifyxml.js"></script>
</head>
<body>

username:<br/>
<input type="text" id="userName" οnblur="verify();"><br/>

<div id="result"></div>

</body>
</html>

[color=blue]第二步，编写实现AJAX的JS代码[/color]

//使用XMLHTTPRequest对象来完成ajax
var xmlhttp;
function verify(){
//alert("hello racky");
//1取得文本框的值
var userName=document.getElementById("userName").value;
//2创建 XMLHTTPRequest对象
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){
//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){

}
}
}
if(!xmlhttp){
alert("Object XMlHttpRequest created failed");
return;
}else{
//alert(xmlhttp);
//alert("after create:"+xmlhttp.readyState)
}
//3注册回调函数
//注册回调函数时，函数名后面不能加括号
//将函数名注册，如果加上括号，会将函数的返回值注册上
xmlhttp.onreadystatechange=callback;
//4设置连接信息
//设置与服务器的连接信息，HTTP的请求方式，URL，采用异步还是同步，TRUE是异步
//xmlhttp.open('GET','ajaxserver?name='+userName,true);
//POST方式请求的代码 ,URL中不能带参数
xmlhttp.open('POST','AJAXXMLServer',true);
//设置POST请求头
xmlhttp.setRequestHeader('Content-Type',"application/x-www-form-urlencoded");
//POST方式发送数据
xmlhttp.send("name="+userName);
//alert("after open:"+xmlhttp.readyState);
//5发送数据，开始和服务器交互
//同步方式下，send要等到服务器端数据返回后才执行，异步方式会立即完成执行
//xmlhttp.send(null);
//alert("after send:"+xmlhttp.readyState);

}
//回调函数 readyState一改变，回调函数就会调用
function callback(){
//alert("load callback:"+xmlhttp.readyState);
//判断对象的交互状态是完成
if(xmlhttp.readyState==4){
//判断http的交互是否成功
if(xmlhttp.status==200){
//获取服务器端返回的数据
//使用responseText的方式来接受XML数据对象的DOM对象
//alert("hello racky");
var domObj=xmlhttp.responseXML;
if(domObj){
//alert(domObj);
//<message></message>
//根据getElementsByTagName获取元素节点，可能找到多个，返回的是数组
var msgNodes=domObj.getElementsByTagName("message");
//判断是否正确取得节点
if(msgNodes.length>0){
//获取msgNode的文本内容
var responseMsg=msgNodes[0].firstChild.nodeValue;
//将数据显示在页面上
var divNode=document.getElementById('result');
divNode.innerHTML=responseMsg;
//获取服务器端输出的纯文本数据
//var responseText=xmlhttp.responseText;
//将数据显示在页面上
//var divNode=document.getElementById('result');
//divNode.innerHTML=responseText;
}else{
alert("data xml error,the xml content:"+xmlhttp.responseText);
}
}else{
alert("data xml error,the xml content:"+xmlhttp.responseText);
}
}
}

}

[color=blue]第三步，编写服务端JAVA代码，这里仅仅是为了实现AJAX，因此服务端代码比较简单[/color]

package com.racky.servlet;

import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.ServletException;
import java.io.IOException;
import java.io.PrintWriter;

/**
* Created by IntelliJ IDEA.
* User: Administrator
* Date: 2009-6-29
* Time: 22:42:14
* To change this template use File | Settings | File Templates.
*/
public class AJAXXMLServer extends HttpServlet {
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doGet(request,response);
}

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
//1取参数
//2判断参数是否有问题
//3校验
//4将用户感兴趣的数据发回页面，而不是返回一个新的页面
//xml，响应的 Content-Type必须是text/xml
response.setContentType("text/xml;charset=utf-8");
PrintWriter out=response.getWriter();
String old=request.getParameter("name");
StringBuilder builder=new StringBuilder();
//将返回的数据拼装成XML格式
builder.append("<message>");
if(old==null||old.length()==0){
builder.append("用户名不能为空").append("</message>");
}else{
String name=new String(old.getBytes("iso8859-1"));

if(old.equals("racky")){
builder.append("用户名["+old+"]已经存在").append("</message>");
}else{
builder.append("用户名【"+old+"】不存在，可以使用").append("</message>");
}
}
out.println(builder.toString());
System.out.println(builder.toString());
}
}

[color=blue]第四步，配置web.xml文件[/color]

<?xml version="1.0" encoding="UTF-8"?>
<web-app xmlns="http://java.sun.com/xml/ns/javaee"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-app_2_5.xsd"
version="2.5">
<servlet>
<servlet-name>AJAXXMLServer</servlet-name>
<servlet-class>com.racky.servlet.AJAXXMLServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AJAXXMLServer</servlet-name>
<url-pattern>/AJAXXMLServer</url-pattern>
</servlet-mapping>
</web-app>
最后部署运行即可

lufeng4321

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用XMLHTTPRequest对象完成ajax

[color=blue]第一步，编写HTML页面代码[/color] username: [color=blue]第二步，编写实现AJAX的JS代码[/color]//使用XMLHTTPRequest对象来完成ajaxvar xmlhttp;f...
复制链接

扫一扫