热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

摘要:本节补充ajax学习笔记1中 第二种方式:使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DO
摘要:本节补充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("");
//2.检查是否有问题
if(old==null||old.length()==0){
sb.append("用户名不能为空").append("
"); //拼装XML
}else{
//3.校验操作
String name=old;
if(name.equals("pan")){
//4.和传统应用不同之处。这一步需要将用户感兴趣的数据返回给页面端,而不是将一个新的页面发送给用户
//写法没有变,本质变了
sb.append("用户名["+name+"]已经存在").append(""); //拼装XML
}else{
sb.append("用户名["+name+"]可以使用").append(""); //拼装XML
}
}
out.println(sb.toString());//注意,此句一定不能少了,并且注意放置的位置
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request,response);
}
}

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


AJAXXMLServer
AJAXXMLServer


AJAXXMLServer
/AJAXXMLServer


.修改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中都是已经的,就省略了。
推荐阅读
  • javascript分页类支持页码格式
    前端时间因为项目需要,要对一个产品下所有的附属图片进行分页显示,没考虑ajax一张张请求,所以干脆一次性全部把图片out,然 ... [详细]
  • 网站访问全流程解析
    本文详细介绍了从用户在浏览器中输入一个域名(如www.yy.com)到页面完全展示的整个过程,包括DNS解析、TCP连接、请求响应等多个步骤。 ... [详细]
  • Cookie学习小结
    Cookie学习小结 ... [详细]
  • 在PHP中如何正确调用JavaScript变量及定义PHP变量的方法详解 ... [详细]
  • Web开发框架概览:Java与JavaScript技术及框架综述
    Web开发涉及服务器端和客户端的协同工作。在服务器端,Java是一种优秀的编程语言,适用于构建各种功能模块,如通过Servlet实现特定服务。客户端则主要依赖HTML进行内容展示,同时借助JavaScript增强交互性和动态效果。此外,现代Web开发还广泛使用各种框架和库,如Spring Boot、React和Vue.js,以提高开发效率和应用性能。 ... [详细]
  • 本文深入探讨了Ajax的工作机制及其在现代Web开发中的应用。Ajax作为一种异步通信技术,改变了传统的客户端与服务器直接交互的模式。通过引入Ajax,客户端与服务器之间的通信变得更加高效和灵活。文章详细分析了Ajax的核心原理,包括XMLHttpRequest对象的使用、数据传输格式(如JSON和XML)以及事件处理机制。此外,还介绍了Ajax在提升用户体验、实现动态页面更新等方面的具体应用,并讨论了其在当前Web开发中的重要性和未来发展趋势。 ... [详细]
  • 本文详细解析了ASP.NET 2.0中的Callback机制,不仅介绍了基本的使用方法,还深入探讨了其背后的实现原理。通过对比Atlas框架,帮助读者更好地理解和应用这一机制。 ... [详细]
  • HTTP(HyperTextTransferProtocol)是超文本传输协议的缩写,它用于传送www方式的数据。HTTP协议采用了请求响应模型。客服端向服务器发送一 ... [详细]
  • 为什么多数程序员难以成为架构师?
    探讨80%的程序员为何难以晋升为架构师,涉及技术深度、经验积累和综合能力等方面。本文将详细解析Tomcat的配置和服务组件,帮助读者理解其内部机制。 ... [详细]
  • 本文详细介绍了Java代码分层的基本概念和常见分层模式,特别是MVC模式。同时探讨了不同项目需求下的分层策略,帮助读者更好地理解和应用Java分层思想。 ... [详细]
  • 基于iSCSI的SQL Server 2012群集测试(一)SQL群集安装
    一、测试需求介绍与准备公司计划服务器迁移过程计划同时上线SQLServer2012,引入SQLServer2012群集提高高可用性,需要对SQLServ ... [详细]
  • 使用ArcGIS for Java和Flex浏览自定义ArcGIS Server 9.3地图
    本文介绍了如何在Flex应用程序中实现浏览自定义ArcGIS Server 9.3发布的地图。这是一个基本的入门示例,适用于初学者。 ... [详细]
  • 探索Web 2.0新概念:Widget
    尽管你可能尚未注意到Widget,但正如几年前对RSS的陌生一样,这一概念正逐渐走入大众视野。据美国某权威杂志预测,2007年将是Widget年。本文将详细介绍Widget的定义、功能及其未来发展趋势。 ... [详细]
  • 大类|电阻器_使用Requests、Etree、BeautifulSoup、Pandas和Path库进行数据抓取与处理 | 将指定区域内容保存为HTML和Excel格式
    大类|电阻器_使用Requests、Etree、BeautifulSoup、Pandas和Path库进行数据抓取与处理 | 将指定区域内容保存为HTML和Excel格式 ... [详细]
  • 如何高效利用Hackbar插件提升网页调试效率
    通过合理利用Hackbar插件,可以显著提升网页调试的效率。本文介绍了如何获取并使用未包含收费功能的2.1.3版本,以确保在不升级到最新2.2.2版本的情况下,依然能够高效进行网页调试。此外,文章还提供了详细的使用技巧和常见问题解决方案,帮助开发者更好地掌握这一工具。 ... [详细]
author-avatar
神秘怪我咯_525
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有