ajax学习笔记2
来源:互联网 发布:淘宝店怎么上一淘 编辑:程序博客网 时间:2024/05/17 02:21
第二种方式:使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象
在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍,本节主要介绍需要修改的代码以及新增的代码
1.新增一个servlet类
加入AJAXXMLServer类的配置
第一处:
把xmlhttp.open("GET","AJAXServer?name="+username,true);
改为
xmlhttp.open("GET","AJAXXMLServer?name="+username,true);//responseXML方式,修改类名
第二处:
把
把
对于IE浏览器如果第三处不修改不会报错,但是对于firefox浏览器,如果此处不修改,以下语句会报错
var domObj = xmlhttp.responseXML;
可以通过增加alert语句来验证,IE浏览器的时候第三处修改的代码的if语句不会被执行,firefox浏览器的时候这个if语句就会被执行
说明:访问路径、运行截图与ajax学习笔记1中都是已经的,就省略了。
在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍,本节主要介绍需要修改的代码以及新增的代码
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); } }2.修改web.xml
加入AJAXXMLServer类的配置
<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>3.修改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");}改为:
if(xmlhttp.overrideMimeType){ xmlhttp.overrideMimeType("text/xml");//XML的方式时需要修改这个地方}
对于IE浏览器如果第三处不修改不会报错,但是对于firefox浏览器,如果此处不修改,以下语句会报错
var domObj = xmlhttp.responseXML;
可以通过增加alert语句来验证,IE浏览器的时候第三处修改的代码的if语句不会被执行,firefox浏览器的时候这个if语句就会被执行
说明:访问路径、运行截图与ajax学习笔记1中都是已经的,就省略了。
- Ajax 学习笔记(2)
- Ajax学习笔记(2)
- ajax学习笔记2
- ajax学习笔记(2)
- ajax学习笔记---什么是Ajax
- [ajax 学习笔记] ajax初试
- Ajax学习笔记-Ajax数据格式
- AJAX学习笔记--慕课网Ajax
- AJAX 学习笔记(2) Ajax标准交互模式
- ASP.NET Ajax学习笔记(2) -- Ajax.NET
- 《Ajax基础教程》学习笔记---第2章
- Ajax学习笔记(2)DOM操作
- Ajax学习笔记(一)
- Ajax学习笔记(二)
- Ajax学习笔记(三)
- Ajax学习笔记(四)
- Ajax学习笔记(五)
- Ajax学习笔记(六)
- 5款替代微软Visio的开源免费软件
- java编程思想-关于final
- javascript中原型模式实现继承中this指向问题(未完)
- VS2010 C++创建、调用DLL图解
- 设计模式基本概念
- ajax学习笔记2
- awk中使用shell的环境变量
- 在ubuntu12.10 中安装google chrome
- time_after的原理
- [转载]HttpWatch工具简介及使用技巧
- C#调用C++dll的类型转换
- SS7--MTP2
- 获取项目的根路径
- JS 数组排序最大值