在jQuery中利用AJAX加载XML数据并解析

2008年1月18日 – 07:25

被cssrain翻了N多的关于AJAX加载XML的帖子尸体。。。。
总结一下:

1,Content-Type
很多时候无法解析就是Content-Type的问题。
如果本身就是xml文件,请跳过这一步
动态生成的XML一定要将其设置为text/xml,否则默认就是text/html也就是普通的文本了。
常见语言的Content-Type设置

  1. header("Content-Type:text/xml");    //php
  2. response.ContentType="text/xml"   //asp
  3. response.setHeader("ContentType","text/xml");  //jsp

2,xml结构。
XML一定要封闭的,很重要!
例:
错误的XML

  1. <?xml version="1.0" encoding="UTF-8"?>
  2.         <name>zhangsan</name>
  3.         <id>1</id>
  4.         <name>lisi</name>
  5.         <id>2</id>

正确的

  1. <?xml version="1.0" encoding="UTF-8"?>
  2. <stulist>
  3.         <student  email="1@1.com"> 
  4.                 <name>zhangsan</name>
  5.                 <id>1</id>
  6.         </student>
  7.         <student  email="2@2.com">
  8.                <name>lisi</name>
  9.                 <id>2</id>
  10.         </student>
  11. </stulist>

3,解析
这里引用macnie的
遍历student(这里还是用上面那个XML,子节点是student)

  1. $.ajax({
  2.     url:'ajax.asp',
  3.     type: 'GET',
  4.     dataType: 'xml',//这里可以不写,但千万别写text或者html!!!
  5.     timeout: 1000,
  6.     error: function(xml){
  7.         alert('Error loading XML document'+xml);
  8.     },
  9.     success: function(xml){
  10.         $(xml).find("student").each(function(i){
  11.             var id=$(this).children("id"); //取对象
  12.             var idvalue=$(this).children("id").text(); //取文本
  13.             alert(id_value);//这里就是ID的值了。
  14.             alert($(this).attr("email")); //这里能显示student下的email属性。
  15.  
  16.             //最后么输出了,这个是cssrain的写法,貌似比macnie更JQ一点
  17.             $('<li></li>')
  18.                 .html(id_value)
  19.                 .appendTo('ol');
  20.         });
  21.     }
  22. });

最后补充一条:保证服务器端是utf-8的编码,否则会乱码!

好啦,完工了,其实也不复杂,对吧?

jQuery 1.2.2发布信息的简单翻译

2008年1月18日 – 04:23

jQuery发布

[b]
jquery 1.2.2 完整版:[本站下载] 93.1 KB (推荐供测试、开发、学习用)
jquery 1.2.2 Packed压缩版:[本站下载] 28.6 KB (推荐没有开通GZip的网站使用)
jquery 1.2.2 去注释空格版:[本站下载] 51.4 KB (GZizp压缩后15kb。推荐开通GZip的网站使用)
[/b]
2008-1-14日,这个版本是针对jQuery 1.2的BUG修复,你可以在Bug Tracker查看详细列表

重大改变
$(DOMElement)提升300%速度(此处鼓吹的不高兴翻译了……大家自己看表,并结合实践再判断吧

Browser1.2.1 (ms)1.2.2 (ms)
Firefox 2 0.041 0.015
Firefox 3 0.033 0.01
Safari 3 0.017 0.005
Opera 9 0.023 0.004
IE 6 0.04 0.03

.ready()改变

  • IE中改变较多,我们不再必须写一个document.write(),感谢Diego Perini的灵感。
  • 所有浏览器都是等CSS就绪后执行脚本了而不只是DOM,因为用户希望在CSS加载后判断某个元素是否可见以及高度等信息。这次在Safari和Opera中实现了。
  • $(document).bind("ready", fn);你可以用bind来监控ready了。当然以往的.ready()依旧。

.bind("mouseenter") / .bind("mouseleave")
将.hover()的内核拆出两个新事件,这跟mouseover 不同 mouseout ,因为那些事件会在你进出子元素的时候也会触发,这往往不必如此。在1.2.2中,下面两段都有效:[code]$("li").hover(function(){
$(this).addClass("hover");
}, function(){
$(this).removeClass("hover");
});[/code][code]$("li").bind("mouseenter", function(){
$(this).addClass("hover");
}).bind("mouseleave", function(){
$(this).removeClass("hover");
});[/code]

.bind("mousewheel")
Brandon Aaron写的新插件,基于我们的新内核API,可以这样使用:[code]$("div").bind("mousewheel", function(event, delta){
if ( delta < 0 )
$(this).append("up");
else
$(this).append("down");
});[/code]

更复杂的:not()
虽然这个不是CSS 3的标准,但是由于大家都需要,所以我们也就加上了。
现在下面的写法都是可以用了

$(".hover:not(li.active)")

$("li:not(.active,.hover,:contains(test))")

Accept Headers
现在我们会在普通的AJAX中发送给服务器一个附加的 accept headers
如果你指定了dataType,我们就会放你发送了。具体如下

  • xml "application/xml, text/xml"
  • html "text/html"
  • script "text/javascript, application/javascript"
  • json "application/json, text/javascript"
  • text "text/plain"
  • Everything else: "*/*"

Bug Fixes

  • .clone() overhaul
  • Script evaluation overhaul
  • height() / width() overhaul
  • Cross-frame DOM manipulation
  • A few memory leaks have been resolved

Event API
这个是新的API,功能非常强大,通过上面那个新增事件的代码来学习这个强大的API。

附原文地址
http://docs.jquery.com/Release:jQuery_1.2.2

今日本站正式开张了

2008年1月18日 – 03:28

今日开张,不多说什么
这里主要放写个人动态以及一些技术性文章。
欢迎大家关注

博客第一文!

2008年1月13日 – 04:53

开山啦!!!!
终于,我又开始博客了
算下来这已经可能是我第4个博客了
从CNBLOG到SPACE,再后来校内
当然还有其他一些注册了几乎没写过东西的博客,不提咯~
感慨这几年的博客发展

这次的博客还是我自己的电脑上本地的,希望下次能够已经发布到互联网上了
先写起来,自己的网站独享的博客~~HOHO,挺开心的~~
总之就慢慢来了,暂时用这个PJ的BLOG,本来想用个.net的,但没找到成熟的,也知道作罢了。
呵呵,今日就先写到这里,以后再丰富咯~~