我在日志里介绍了很多使用jQuey load的方法来实现ajax。load()应该是jQuery里ajax的最简单的运用了,你不用了解ajax是怎么一回事,就可以把某个脚本的输出(通常是text/html类型)动态的赋给页面的某个元素(例如div和p)。但是在实际的运用中,你可能会发现load()常常不能满足要求,例如:你想对一个表单的多个控件使用ajax进行更新,可是load()一次只可以对其中一个控件起作用;如果使用多个load(),那么会增加服务器的负荷,因此肯定不是一个好办法。本文要介绍jQuery的ajax()方法,它是类似传统的ajax方法。jQuery的ajax()方法涉及的知识点很多,具体可以参考jQuery中文参考文档。这里要介绍的是如何使用XML数据类型以及如何对XML进行读取。
1.使用PHP输出XML,如果你只是使用echo,那么要注意要先输出正确的header: Content-Type是text/xml。如果你要给XML的某个节点用HTML代码赋值,你必须把HTML放在<![CDATA[" 和"]]>之间。例子如下: genXML.php
<?php
echo "header("Content-Type: text/xml; charset=UTF-8");";
echo <<< XML
<?xml version="1.0" encoding="UTF-8"?>
<rsp>
<name>Adam</name>
<site>http://www.61dh.com</site>
<note>
<![CDATA[
HTML代码可以放在这里
]]>
</note>
</rsp>
XML;
?>2. HTML样本:
<div id="name"></div>
<div id="note"></div>3.接下来我们要使用jQuery的ajax()方法,读取genXML.php的输出(xml),然后把相关节点的内容赋给HTML元素:#name和#node。代码如下:
$.ajax({
url: "genXML.php", //本例中,url为genXML.php
type: 'GET', //根据实际情况,可以是'POST'或者'GET'
//data: "name=adam&location=61dh",本例中没有用到data
dataType: 'xml', //指定数据类型
timeout: 1000, //设置超时1000 = 1秒
error: function(){
alert('Error loading XML document'); }, //错误提示
success: function(xml){ //ajax请求成功后 do something with xml
//把XML的相关节点值赋给HTML里相关ID
$('#name').html($(xml).find('name').text());
$('#note').html($(xml).find('note').text());
}
});我在上面的代码里已经做了比较详细地注释,值得再提的是使用jQuery提供find()的方法可以很简单的读取XML某个节点的值,例如:$(xml).find('name').text(); //读取节点name;然后使用html()的方法赋值给HTML里的某个元素。
注: 我在日志里写了很多有关jQuery的文章而且还挺受欢迎:-),所以我把它专门作为一个菜单放在上方导航条里。希望这些文章对jQuery初学者有所帮助。如果你有任何的问题和建议,请给我留言或者发Email。谢谢!
分享到:
相关推荐
Ajax-jquery-ajax-cache.zip,jquery插件,用于用“localstorage”或“sessionstorage”缓存ajax。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页...
Ajax,即Asynchronous JavaScript and XML,允许我们在不刷新整个页面的情况下与服务器交换数据并更新部分网页内容,提供更流畅的用户体验。 在“jQuery-ajax-用户名异步请求”这个场景中,我们可能是在设计一个...
使用jQuery xml-to-json插件,开发者需要首先在项目中引入jQuery库和插件文件。接着,可以调用插件提供的函数,传入XML字符串或DOM对象,即可得到JSON对象。插件可能还提供了一些自定义选项,例如设置是否展开嵌套的...
Ajax-online-chat-with-php-jquery-ajax-codeigniter.zip,这个应用程序表示使用codeigniter php框架、jquery和ajax的在线聊天。我还添加了表示用于测试应用程序的数据库的sql文件。只有首先导入数据库(chat.sql),...
jQuery是一个JavaScript库,简化了JavaScript的使用,使得DOM操作、事件处理、动画效果和Ajax交互变得更加简单。jQuery在现代Web开发中广泛使用,可以极大地提高开发效率。 3. **Ajax(Asynchronous JavaScript ...
Ajax-laravel-jquery-ajax-crud.zip,用jquery的ajax特性简单实现laravel crud,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分...
Ajax-JQuery-Ajax-POST-in-Codeigniter.zip,如何将带有数据的ajax post请求发送到codeigniter控制器,而不刷新页面并将数据返回到视图。,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json...
Ajax-jQuery-Ajax-Dynamic-Select.zip,从数据库中获取筛选记录的简单应用程序,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分...
Ajax-jquery-ajax-progress.zip,使用xhr.onprogress事件调用“progress”回调的jquery的一个简单补丁,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态...
Ajax-swagger-jquery-ajax.zip,这是对jquery ajax工具的一种炫耀,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载...
jQuery是一个强大的JavaScript库,它简化了JavaScript的使用,而Ajax(异步JavaScript和XML)则是一种在不刷新整个页面的情况下更新部分网页的技术。在这个名为“jquery-ajax-app-src”的项目中,我们看到一系列Ajax...
Ajax-crud-ajax-json-jquery-php.zip,crud-ajax、php、jquery,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页...
jQuery,作为一个广泛使用的JavaScript库,极大地简化了网页的DOM操作、事件处理、动画设计和Ajax交互。这份"jQuery API-090129"文档是2009年1月29日版本的官方API参考资料,对于学习和理解那个时期的jQuery功能与...
jQuery 插件利用 Ajax(异步 JavaScript 和 XML)技术,可以实现在用户输入时动态搜索并显示结果,极大地提高了用户的交互体验。本篇文章将深入探讨 jQuery 的 Ajax 搜索功能及其核心实现。 ### 一、Ajax 基础 ...
本篇将详细探讨如何使用 jQuery 的 AJAX 功能来处理 XML(可扩展标记语言)数据。 **1. jQuery 和 AJAX 简介** jQuery 是一个流行的 JavaScript 库,它简化了 DOM 操作、事件处理以及异步请求(如 AJAX)。AJAX ...
在jQuery中,我们可以使用`$.ajax()`方法或者`$.get()`、`$.post()`等简化版函数来获取XML数据。比如,使用`$.ajax()`加载XML文档: ```javascript $.ajax({ type: "GET", url: "employees.xml", dataType: "xml...
Ajax-fxp-jquery-table-pager.zip,表的jquery ajax寻呼机,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页的...
Ajax-jquery-ajaxreadystate.zip,jquery ajaxreadystate插件,ajax代表异步javascript和xml。它是多种web技术的集合,包括html、css、json、xml和javascript。它用于创建动态网页,其中网页的小部分在不重新加载网页...
首先,jQuery是一个广泛使用的JavaScript库,它简化了DOM操作、事件处理、动画效果和Ajax交互。通过使用jQuery,开发者可以更方便地与HTML元素进行交互,同时减少了代码量,提高了代码的可读性和维护性。 Ajax...
在`ajax-jquery-demos`压缩包中,可能包含了一系列的示例,这些示例展示了如何使用jQuery进行Ajax操作。例如,一个简单的Ajax请求可能如下所示: ```javascript $.ajax({ url: 'example.php', type: 'GET', data...