在Ajax应用中,使用XMLHTTPRequest处理的请求后台可以返回给纯文本数据,也可以是XML数据,但是XML数
据比纯文本更好一些。可以在其中包含大量的数据,更可以使用dom4j这样的XML工具进行XML文本的解析,下面我们
通过两种方式,分别是纯JavaScript创建XMLHTTPRequest对象和Dom 解析XML,然后再使用jQuery处理XML对象,
比较一下就可以发现jQuery写Ajax应用的优势。
首先是JavaScript实现XML数据的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax1.html</title>
<script type="text/javascript">
var xmlhttp;
function verify(){//这个方法使用XMLHttpRequest对象来进行Ajax异步交互数据
//1.使用dom的方式获取文本框的内容
var userName = document.getElementById("userName").value;
//2.创建XMLHTTPRequest对象
if(window.XMLHttpRequest){
xmlhttp = new XMLHttpRequest();
}else if(window.ActiveXObject){
//针对ie6以下版本
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
//两个可以用来创建XMLHTTPRequest对象的控件,进行尝试创建
for(var i=0; i < activexName.length; i++){
try{
xmlhttp = new ActiveXObject(activexName[i]);
break;
}catch(e){
}
}
}
//最后 确认xmlhttprequest对象创建成功
if(!xmlhttp){
alert("请更换更新版本的浏览器");
return;
}else{
//2.注册回调函数,只需要函数名不需要加括号
xmlhttp.onreadystatechange = callback;
//3.设置连接信息
xmlhttp.open("GET","/Ajax/servlet/AjaxXmlServer?name="+userName, true);
//4.发送数据,开始和服务器端进行交互
xmlhttp.send(null);
}
}
//回调函数
function callback(){
//判断对象交互完成
if(xmlhttp.readyState==4){
//判断http交互是否成功
if(xmlhttp.status==200){
//获取服务器的数据
//获取XML包装的的数据
var responseText = xmlhttp.responseXML;
var messageNodes = responseText.getElementsByTagName("message");
var messageNode = messageNodes[0];
var text = messageNodes[0].firstChild.nodeValue;
document.getElementById("div1").innerHTML=text;
}
}
}
</script>
</head>
<body>
用户名:<input type="text" id="userName" onblur="verify();"/><span id="div1" style="color: red"></span>
<br/>
密码:<input type="password" id="password" /><br/>
邮箱:<input type="text" id="mail" />
</body>
</html>
下面的是后台的servlet的代码
package com.bird.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
public class AjaxXmlServer extends HttpServlet {
/**
* 返回XML数据
*/
private static final long serialVersionUID = 1L;
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
request.setCharacterEncoding("UTF-8");
response.setContentType("text/xml;charset=UTF-8");
String name = request.getParameter("name");
// name = new String(name.getBytes("ISO-8859-1"),"UTF-8");
PrintWriter out = response.getWriter();
StringBuilder builder = new StringBuilder();
builder.append("<message>");
if(name.equals("bird")){
builder.append("用户名"+name+"已经存在").append("</message>");
}else{
builder.append("用户名不存在,可以使用"+"</message>");
}
out.println(builder.toString());
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request, response);
}
}
然后是jQuery的代码
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>ajax.html</title>
<script type="text/javascript" src="/Ajax/js/jquery-1.7.2.js"></script>
<script type="text/javascript">
function test(){
//1.获取文本框中的值
var value = $("#userName").val();
//2.将文本框中的内容发送给后台服务器
//JavaScript定义一个简单的对象如下
//var obj = {name:"123",age:20};
$.ajax({
type: "POST",////http请求方式
url: "/Ajax/servlet/AjaxXmlServer", //服务器的地址
data: "name="+value, //发送的数据
dataType: "xml", //数据的返回类型
success: callback //注册回调函数
});
}
function callback(data){//回调函数
//需要将data这个dom对象中的数据解析出来,首先需要将dom对象转换成jQuery对象
var jqueryObj = $(data);
//获取messahe节点
var message = jqueryObj.children();
var text = message.text();
$("#div1").html(text);
}
</script>
</head>
<body>
用户名:<input type="text" id="userName" onblur="test();"/><span id="div1" style="color: red"></span>
<br/>
密码:<input type="password" id="password" /><br/>
邮箱:<input type="text" id="mail" />
</body>
</html>
可以发现,jquery的方法简单很多,所以建议使用后面的这种方法。
分享到:
相关推荐
"xml": 返回 XML 文档,可用 jQuery 处理。 "html": 返回纯文本 HTML 信息;包含 script 元素。 "script": 返回纯文本 JavaScript 代码。不会自动缓存结果。 "json": 返回 JSON 数据 。 "jsonp": JSONP 格式。...
有效的类型(返回的类型的结果值会作为第一个参数传递给success指定的回调函数)有: "xml": 返回一个可以由jQuery处理的XML文档。 "html": 返回文本格式的HTML代码。包括求值后的脚本标记。 "script": 将响应...
/*通过异步传输XMLHTTP发送参数到ajaxServlet,返回符合条件的XML文档*/ var xhr; function createXHR() { if (typeof XMLHttpRequest != "undefined") {//检查原生XHR对象是否存在,如果存在则返回她的实例 return...
《锋利的jQuery(第2版)》循序渐进地对jQuery的各种函数和方法调用进行了介绍,读者可以系统地掌握jQuery的选择器、DOM操作、事件和动画、AJAX应用、插件、jQuery Mobile、jQuery各个版本变化、jQuery性能优化和技巧...
(详情可以参见:jQuery.ajax文档) 此外,系统的可扩展性大大增强,可以附加各种数据处理器、过滤器和传输机制,为开发新的Ajax插件提供了方便。 2. 延迟对象 延迟对象(Deferred Object,jQuery.Deferred对象)是...
本套Java教程涵盖Ajax的实现原理,XMLHttpRequest实现Ajax,回调函数,Ajax数据交换格式(HTML、XML、JSON),Ajax发送GET和POST请求,异步编程模型和同步编程模型,解决Ajax的GET请求缓存问题,使用Ajax验证用户名...
简单的说,就是使用XMLHttpRequest对象和服务器端交换数据(以XML或是JSON等格式),使用JavaScript处理数据并更新页面内容。 为什么要使用AJAX? 借助AJAX,我们可以实现: 在不重载页面的情况下,向服务器发送...
一:jQuery.ajax语法基础 jQuery.ajax([options]) ...其中,text和xml类型返回的数据不会经过处理。如果指定为html类型,任何内嵌的JavaScript都会在HTML作为一个字符串返回之前执行。如果指定为js
AJAX大家已经都知道了,是为了实现异步通讯,提高用户体验度,而将很多旧知识(XML,DOM,JavaScript,...而,XMLHttpRequest对象则是其中的重重之中,本篇文章主要给大家介绍通过XMLHttpRequest和jQuery实现ajax的几种方式
注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。
摘要:本节补充ajax学习笔记1中 第二种方式:使用XMLHttpRequest对象的responseXML的方式来接受XML数据对象的DOM对象 在ajax学习笔记1中已经对准备工作和需要用到的知识做了比较详细的介绍,本节主要介绍需要修改的...
本书循序渐进的对jQuery的各种方法和使用进行介绍,读者可以系统的掌握jQuery关于DOM操作、事件监听和动画、表单操作、AJAX以及插件方面知识点,并结合每个章节后面的案例演示进行练习,达到掌握本章节知识点的目的...
找了很久终于搞到了锋利的jQuery书中源代码,真不错,希望与各位分享:-) 本书内容的编排 jQuery介绍-->选择器-->DOM操作-->...第5篇介绍了jQuery加载并解析xml. 第6篇是第七章的插件的API 第7篇是jQuery API速查表.
第1篇介绍了jQuery中的$ document ready 方法 第2篇介绍了前端开发调试工具 Firebug 第3篇介绍了Ajax的核心对象 XMLHttpRequest 第4篇介绍了jQuery中的...第5篇介绍了jQuery加载并解析xml 第6篇是第七章的插件的API
结合jquery制作,如果不要jquery,需要自己写简历XMLHttpRequest 2011-04-29更新 内部发现了一点小问题,IE下不兼容:解决方法法:将attributes["value"].value全部替换为getAttribute("value").
本文实例讲述了jQuery学习笔记之Ajax用法。分享给大家供大家参考,具体如下: 一、Ajax请求 1、jQuery.ajax(options) ...注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml
不光是IE,其他浏览器通吃的xmlhttprequeset的对象代码。
其使用基于 Web2.0 标准的 XHTML+CSS 表示方式,使用DOM (Document Object Model) 进行动态显示及交互,使用 XML 和 XSLT 进行数据交换及其相关操作,使用 XMLHttpRequest 进行异步数据查询、检索,使用 JavaScript ...