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

摘要：本节补充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中都是已经的，就省略了。

赞 (0)

相关推荐

  • JSP 中request与response的用法详解

    JSP 中request与response的用法详解 概要: 在学习这两个对象之前,我们应该已经有了http协议的基本了解了,如果不清楚http协议的可以看我的关于http协议的介绍.因为其实request和response的使用大部分都是对http协议的操作. request对象的介绍 我们先从request对象进行介绍: 我们知道http协议定义了请求服务器的格式: 请求行 请求头 空格 请求体(get请求没有请求体) 好了,这里我们就不详细介绍了,我们只看几个应用就可以了,没什么难度: 应

  • JSP中Servlet的Request与Response的用法与区别

    JSP中Servlet的Request与Response的用法与区别 简介:Web服务器收到客户端的http请求,会针对每一次请求,分别创建一个用于代表请求的request对象.和代表响应的response对象.request和response对象即然代表请求和响应,那我们要获取客户机提交过来的数据,只需要找request对象就行了.要向客户机输出数据,只需要找response对象就行了. 一,Request Request代表请求对象,其中封装了对请求中具有请求行.请求头.实体内容的操作的方法

  • ASP.NET笔记之 Request 、Response 与Server的使用

    ASP.NET笔记之 Request 、Response 与Server的使用

    1.Request 下面做一个实例,通过Request的一些方法来判断浏览图片是不是在内部浏览,还是直接按网址浏览或者被外部使用 复制代码 代码如下: <%@ WebHandler Language="C#" Class="image_Test" %> using System; using System.Web; public class image_Test : IHttpHandler { public void ProcessRequest(Ht

  • @ResponseBody 和 @RequestBody 注解的区别

    @ResponseBody 和 @RequestBody 注解的区别 1 前言 在详述 @ResponseBody 和 @RequestBody 注解之前,咱先了解一下 @RequestMapping 注解,@RequestMapping 是一个用来处理请求地址映射的注解,可用于类或方法上.用于类上,表示类中的所有响应请求的方法都是以该地址作为父路径:用于方法上,表示在类的父路径下追加方法上注解中的地址将会访问到该方法.例如. /** * 用于类上,可以没有 */ @RequestMapping

  • JSP内置对象:Request和Response的简单介绍及使用

    JSP内置对象之request对象客户端的请求信息被封装在request对象中,通过它才能了解到客户的需求,然后做出响应.它是HttpServletRequest类的实例.序号 方 法 说 明 1 object getAttribute(String name) 返回指定属性的属性值 2 Enumeration getAttributeNames() 返回所有可用属性名的枚举 3 String getCharacterEncoding() 返回字符编码方式 4 int getContentLen

  • Asp.net response对象与request对象使用介绍

    1.Response:服务器发给客户端信息,或者说是服务器的向用户发送输出结果. Redirect:让客户端重新定向到指定的 URL. Write:写出指定字符串. 2.request:客户端发给服务器,或者说是从客户端取得信息. form:从使用post提交方式的表单获取表单元素的值. querystring:取回查询字符串中的变量值,适用于get提交方式的表单. 举一个列子:一个登陆页面,还有一个主页面.当登陆页面登陆成功后,就自动跳转到主页面. 1.login.aspx 复制代码 代码如下

  • C#中Request.Cookies 和 Response.Cookies 的区别分析

    .NET中提供了读写Cookie的多种方法,Request.Cookies 是客户端通过 Cookie 标头形式由客户端传输到服务器的 Cookie:Response.Cookies 在服务器上创建并以 Set-Cookie 标头的形式传输到客户端.也就是说,一个是客户端向服务器端发送的来的,一个是服务器发送到客户端的. 第一次创建Cookies的时候,下面的2种读取方法读取到的内容是一样: C# 代码 复制代码 代码如下: HttpCookie hc = new HttpCookie("Use

  • AngularJS的ng Http Request与response格式转换方法

    本文实例讲述了AngularJS的ng Http Request与response格式转换方法.分享给大家供大家参考,具体如下: angular作为Single Page Application推荐的交互方式当然是基于json的ajax调用.但今天要说的是当你不幸工作在一个遗留或者不可控制的服务上,而这服务是基于非json提交方式(或许是常规表单(form)提交,或者其他自定义数据格式),那么我们只能改变ng内部$http默认request/response格式转化方式. 所幸的是ng $htt

  • http调用webservice操作httprequest、httpresponse示例

    REST WCF 使得我们调用Web服务时,可以通过HttpRequest的交互简单完成.那么老版的WebService能否做到呢?WebService中通过HttpContext.Current.Rquest/Response,我们一样也可以改造WebMethod. 客户端: 复制代码 代码如下: // 创建一个DataTable DataTable data = new DataTable("Project"); data.Columns.Add("Name")

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

    摘要:本节补充ajax学习笔记1中 第二种方式:使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象 在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍,本节主要介绍需要修改的代码以及新增的代码 .新增一个servlet类 AJAXXMLServer.java 复制代码 代码如下: import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServle

  • AJax 学习笔记一(XMLHTTPRequest对象)

    现在很多公司都在做标准的静态页面,为了增强客户的体验效果,经常会涉及到AJax效果,而设计AJax使用的一种重要技术(工具)就是XMLHttpRequest对象了.今天学习了点关于XMLHttpRequest对象的一些方法和属性,有点体会,在这里也想记录起来. 1.何为XMLHttpRequest 定义:XMLHttp是一套可以在Javascript.VbScript.Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API.XmlHttp最大的用处是可以更新网页的部分

  • Ajax学习笔记---3种Ajax的实现方法【推荐】

    Ajax学习笔记---3种Ajax的实现方法【推荐】

    Ajax:  Asynchronous JavaScript and Xml , 异步js脚本和xml , 常用来实现页面局部的异步刷新, 对提高用户体验有很大帮助. Xml在多语言时较有优势, 但Ajax技术实际上较多采用Json对象而不是Xml来处理数据. (一) Ajax历史....了解性知识 Ajax归属于Web前端开发技术, 与javascript有着异常紧密的联系. Ajax就是一种实现异步通信无刷新的技术, 而这种技术可以有很多种实现方式. 浏览器的鼻祖网景(NetScape)公司

  • 从Ajax到JQuery Ajax学习

    Ajax篇 XMLDocument和XMLHttpRequest对象 第一:创建XMLHttpRequest请求对象 复制代码 代码如下: function getXMLHttpRequest() { var xRequest=null; if(window.XMLHttpRequest) { xRequest=new XMLHttpRequest(); }else if(typeof ActiveXObject != "undefined"){ xRequest=new Active

  • JQuery中attr属性和jQuery.data()学习笔记【必看】

    用html直接data-key来存放,key必须全部小写. <div data-mydata="123"></div> consoloe.log($("div").data("mydata")); //output 123 二避免在key中使用短横线 <a id="bar" data-foo-bar-baz="fizz-buzz" href="#">f

  • jquery中ajax学习笔记3

    摘要: ajax学习1中介绍了使用jquery封装的ajax来接收服务器端的文本数据以及使用XMLHttpReques对象来接收服务器端的文本数据 ajax学习2中介绍了使用XMLHttpReques来接收服务器的端XML数据,本节主要介绍使用jqery封装的ajax使用XML格式接收服务器端的数据. 由于很多知识都已经做了详细介绍,本节只介绍需要修改的代码,使用jqery封装的ajax使用XML格式接收服务器端的数据,web.xml.后台的servet都不用改, 只是ajax.html中调用的

  • jquery中ajax学习笔记一

    jquery中ajax学习笔记一

    AJAX简单介绍: AJAX 指异步 JavaScript 及 XML(Asynchronous JavaScript And XML),是指一种创建交互式网页应用的网页开发技术.通过 AJAX,JavaScript 可使用 JavaScript 的 XMLHttpRequest 对象来直接与服务器进行通信.通过这个对象,您JavaScript 可在不重载页面的情况与 Web 服务器交换数据. jQuery是一种javascript框架,是对javascript的一种轻量级的封装,容易理解. A

  • 那些年，我还在学习Ajax 学习笔记

    那些年，我还在学习Ajax 学习笔记

    通俗的说,Ajax就是一种网页无刷技术,以提高用户体验,Ajax并不是什么新的技术,只是在那些年才火了起来(Ajax火起来时,哥只知道聊QQ),所以它就备受观注:当然,那些年就开始学习了. 一.完成Ajax请求 1. 在完成这个请求之前,先来了解一下Ajax是什么,它的全名叫异步的javascript与.XML,从名称可以看出,它与javascript和XML有不解之缘,Ajax使用XML地HTTP请求,通过浏览器建立的xmlHttpRequest对象,异步的向服务器发送请求,服务器处理请求后,

  • Jquery Ajax学习实例7 Ajax所有过程事件分析示例

    一.Ajax所有过程事件分析 JQuery在执行Ajax的过程中会触发很多事件.   这些事件可以分为两种事件,一种是局部事件(Local),一种是全局事件(Global).   局部事件:可以通过$.ajax来调用,你某一个Ajax请求不希望产生全局的事件,则可以设置global:false.   全局事件:跟click等事件类似,可以绑定到到每一个DOM元素上.   这些事件的按照事件的触发顺序如下介绍: 局部事件(Local) 全局事件(Global) ajaxStart 全局事件开始新的

  • JavaScript高级程序设计（第3版）学习笔记6 初识js对象

    在房子里面可以放你想放的任意事物--如果你有足够的美学造诣,你甚至可以弄一个房中房试试--当然,为了方便管理,我们会给房子里存放的所有事物都会取上一个不重复的名字,比如医药房间里的各种药品名称.在ECMAScript中,你可以在对象中存放任意你想放的数据,同样,我们需要给存放的数据取一个名字--也就是对象的属性名,再存放各种数据.再看看ECMA-262中对象的定义:无序属性的集合,其属性可以包含简单数据类型值.对象或者函数. 进入对象,我开始有些激动了,说实话,让我想起做这系列学习笔记的最初原因

随机推荐