jquery ajax学习笔记2 使用XMLHttpRequest对象的responseXML

 更新时间:2011年10月16日 23:11:25   作者:  
使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象
摘要:本节补充ajax学习笔记1中
第二种方式:使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象
在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍,本节主要介绍需要修改的代码以及新增的代码
.新增一个servlet类
AJAXXMLServer.java
复制代码 代码如下:

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;
//XML的数据
public class AJAXXMLServer extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
//response.setContentType("text/html;charset=utf-8");
response.setContentType("text/xml;charset=utf-8"); //修改此次为text/xml
PrintWriter out=response.getWriter();
//1.取参数
String old=request.getParameter("name");
StringBuffer sb=new StringBuffer();
sb.append("<message>");
//2.检查是否有问题
if(old==null||old.length()==0){
sb.append("用户名不能为空").append("</message>"); //拼装XML
}else{
//3.校验操作
String name=old;
if(name.equals("pan")){
//4.和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面端,而不是将一个新的页面发送给用户
//写法没有变,本质变了
sb.append("用户名["+name+"]已经存在").append("</message>"); //拼装XML
}else{
sb.append("用户名["+name+"]可以使用").append("</message>"); //拼装XML
}
}
out.println(sb.toString());//注意,此句一定不能少了,并且注意放置的位置
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request,response);
}
}

.修改web.xml
加入AJAXXMLServer类的配置
web.xml
复制代码 代码如下:

<servlet>
<servlet-name>AJAXXMLServer</servlet-name>
<servlet-class>AJAXXMLServer</servlet-class>
</servlet>
<servlet-mapping>
<servlet-name>AJAXXMLServer</servlet-name>
<url-pattern>/AJAXXMLServer</url-pattern>
</servlet-mapping>

.修改verify.js文件
第一处:
复制代码 代码如下:

把xmlhttp.open("GET","AJAXServer?name="+username,true);

改为
复制代码 代码如下:

xmlhttp.open("GET","AJAXXMLServer?name="+username,true);//responseXML方式,修改类名

第二处:

responseText
复制代码 代码如下:

//获取服务器端返回的数据
//第一种方式:获取服务器端输出的纯文本数据
//var responseText=xmlhttp.responseText;
//将数据显示在页面上 通过dom的方式找到div标签对应的元素节点
//var divNode=document.getElementById("result");
//设置元素节点中的html的内容
//divNode.innerHTML=responseText;

改为:
responseXML
复制代码 代码如下:

//第二种方式:使用responseXML的方式来接受XML数据对象的DOM对象
var domObj = xmlhttp.responseXML;
var messageNodes = domObj.getElementsByTagName("message");
//获取message节点中的文本内容
//message标签中的文本是在dom中是message标签所对应的元素节点的子节点,firstChild可以获取当前节点的第一个子节点
if (messageNodes.length > 0) {
var textNode = messageNodes[0].firstChild;
//对于文本节点来说,可以通过nodeValue的方式返回文本
var responseMessage = textNode.nodeValue;
//把值responseMessage显示在div上
var divNode=document.getElementById("result");
divNode.innerHTML=responseMessage;
} else {
alert("XML数据格式错误,原始文本内容为:" + xmlhttp.responseText);
}

第三处:

text/html
复制代码 代码如下:

if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/html");
}

改为:
text/xml
复制代码 代码如下:

if(xmlhttp.overrideMimeType){
xmlhttp.overrideMimeType("text/xml");//XML的方式时需要修改这个地方
}

对于IE浏览器如果第三处不修改不会报错,但是对于firefox浏览器,如果此处不修改,以下语句会报错
var domObj = xmlhttp.responseXML;
可以通过增加alert语句来验证,IE浏览器的时候第三处修改的代码的if语句不会被执行,firefox浏览器的时候这个if语句就会被执行

说明:访问路径、运行截图与ajax学习笔记1中都是已经的,就省略了。

相关文章

  • 使用jquery实现IE下按backspace相当于返回操作

    使用jquery实现IE下按backspace相当于返回操作

    后退键在各浏览器下默认为点击了一下后退按钮,下面为大家介绍下如何实现实现IE下按backspace相当于返回操作,需要的朋友可以参考下
    2014-03-03
  • jQuery实现上下滚动公告栏详细代码

    jQuery实现上下滚动公告栏详细代码

    之前做项目的时候,一直都想着做一个上下滚动的公告栏,作为展示网站的最新公告信息,给用户带来极好的用户体验,下面小编通过实例代码给大家分享基于jQuery实现上下滚动公告栏,感兴趣的朋友一起看看吧
    2018-11-11
  • jquery图片播放浏览插件prettyPhoto使用详解

    jquery图片播放浏览插件prettyPhoto使用详解

    这篇文章主要详细介绍了jquery图片播放浏览插件prettyPhoto使用方法,以及支持的每种类型的详细示例,非常的不错,有需要的小伙伴参考下
    2014-12-12
  • 基于Jquery的动态创建DOM元素的代码

    基于Jquery的动态创建DOM元素的代码

    jquery动态创建页面元素,mark一下,以备以后查询时使用。以创建div和input为例。
    2010-12-12
  • 让checkbox不选中即将选中的checkbox不选中

    让checkbox不选中即将选中的checkbox不选中

    把选中的checkbox置空,即将选中的checkbox不选中,实现的方法很多,下面为大家分享个不错可行,已测试的好方法,希望对大家有所帮助
    2014-07-07
  • jQuery网页定位导航特效实现方法

    jQuery网页定位导航特效实现方法

    这篇文章主要介绍了jQuery网页定位导航特效实现方法,结合实例形式分析了jQuery网页定位导航的功能描述、原理与核心实现代码,需要的朋友可以参考下
    2016-12-12
  • jQuery实现的checkbox级联选择下拉菜单效果示例

    jQuery实现的checkbox级联选择下拉菜单效果示例

    这篇文章主要介绍了jQuery实现的checkbox级联选择下拉菜单效果,涉及jQuery鼠标事件响应及表格table动态操作的相关技巧,需要的朋友可以参考下
    2016-12-12
  • jQuery中filter()方法用法实例

    jQuery中filter()方法用法实例

    这篇文章主要介绍了jQuery中filter()方法用法,实例分析了filter()方法的功能、定义及筛选的几种使用技巧,需要的朋友可以参考下
    2015-01-01
  • jQuery基于Ajax方式提交表单功能示例

    jQuery基于Ajax方式提交表单功能示例

    这篇文章主要介绍了jQuery基于Ajax方式提交表单功能,结合实例形式分析了jQuery使用ajax方式提交表单的具体步骤与常见操作技巧,需要的朋友可以参考下
    2017-02-02
  • jQuery特殊符号转义的实现

    jQuery特殊符号转义的实现

    下面小编就为大家带来一篇jQuery特殊符号转义的实现。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-11-11

最新评论