通过JQuery框架空白HTML文档加载

在开始之前我们需要做如下准备工作:

1.创建一个名为DEMO.html空白html文件;(推荐使用Editplus 3创建)

2.熟悉JQuery框架的基本语法;(不熟悉没关系,后面我会注释得很详细)

3.创建一个名为data.xml的XML文件用来存储数据,XML的结构下面会涉及到,你也可以下载我打包好的文件查看;

4.一个loading.gif图片,这个图片用于在将XML读取出来的等待时间里面显示在空白html文档中。

XML文件读取的数据。我们将会主要用到JQuery自带函数 $.get 。

正式开始:/www.huyang8.com

Step 1:首先让我们看看这个data.xml的简单结构,我这里演示的数据是"Saturn为您推荐的几本书",故为书籍信息,那么xml就包括书籍的名称,缩略图和书籍描述信息;

<?xml version="1.0" encoding="utf-8" ?>  
<books>  
  
<book title="藏地密码" imageurl="images/Tibet_Code.jpg">  
      
<description>  
  这里是概况(www.huyang8.com)  
      
</description>  
  
</book>  

<book title="剑桥雅思6" imageurl="images/ielts.jpg">  
        
<description>  
   这里是概况(www.huyang8.com)    
    
</description>  
    
</book>  
  
    
<book title="Professional ASP.NET" imageurl="images/asp.jpg">  
        
<description>  
             这里是概况(www.huyang8.com)          
        
</description>  
    
</book>  
</books>
其次,让我们看看加载在空白HTML文档里面的JavaScript代码: 
$(document).ready(function()  
     ...
{  
       $.get(
'myData.xml', function(d)...{  
       $(
'body').append('<h1> Saturn给你推荐几本书: </h1>');  
       $(
'body').append('<dl />');  
  
       $(d).find(
'book').each(function()...{  
  
          
var $book = $(this);    
            
var title = $book.attr("title");  
            
var description = $book.find('description').text();  
            
var imageurl = $book.attr('imageurl');  
  
            
var html = '<dt> <img class="bookImage" alt="" src="' + imageurl + '" /> </dt>';
            html
+= '<dd> <span class="loadingPic" alt="Loading" />';  
            html
+= '<p class="title">' + title + '</p>';  
            html
+= '<p> ' + description + '</p>' ;  
            html
+= '</dd>';  
  
            $(
'dl').append($(html));  
              
            $(
'.loadingPic').fadeOut(2000);  
        }
);  
    }
);  
);  
Step 2:这里,我只讲下JavaScript代码原理与运行流程,不过分讨论语法,如果你对语法有任何疑问,请给我留言或者查看JQuery相关文档。

  • 行1:当HTML文档准备完毕之后(即html和JavaScript都下载完毕),会自动触发JQuery的 $(document).ready方法及里面的过程。显然,这里首先执行的是$.get方法。
  • 行3:$.get 的第一个参数是XML文件的相对路径(注意路径要填写正确,这里我们把XML和网页文件放在同一文件夹)。第二个参数是一个Callback函数,即回调函数。就是说通过get方法来请求这个XML文件的内容,然后通过这个callback回调函数来操作里面的数据。而callback的参数d表示从XML回调过来的所有数据,有了这个参数d,我们就好进行下面的内容了
  • 行4:通过JavaScript在文档的BODY中动态添加一个标签<h1>,这个是页面的总标题,无关紧要;
  • 行5:同样在BODY中动态添加一个标签<dl>,用来作为包含循环下面的内容容器。(行20会用到)
  • 行7:这一行很重要,因为我们已经说过,回调函数的参数d表示从XML回调的所有数据,现在我们就需要对这些数据进行处理(筛选)和格式化;请注意:这里通过搜寻book标签(tag),然后循环执行each后面的函数,直到xml里面数据的条目完全循环完毕;(有点像PHP里面的foreach函数的功能)
  • 行9:$(this)实际上就创建一个对象,目的是将d的当前一条书籍信息对象实例化,方便进行操作,这就是$book;
  • 行10--行12:分别获取当前对象$book的书籍名称,描述和缩略图;(注意取属性值和取节点值的语法不同)
  • 行14-行18:格式化书籍信息,以便输出;
  • 行20:将格式化后的信息以HTML输出方式输出到文档中。
  • 行22:为了告诉用户我们当前的信息正在从XML中读取,2000毫秒(2秒)后,图片逐渐消失。
  •  

Step 3:至此,大功告成。欢迎大家给我留言,共同讨论JQuery的开发和你所碰到的问题,请不吝赐教。另外,请将下载后的文件夹放在WEB环境下运行(IIS或虚拟主机),请不要直接点开运行。

下面介绍一下正确用jQuery的AJAX加载XML并解析 
1,Content-Type
很多时候无法解析就是Content-Type的问题。(呵呵,我第一次做ajax的时候,就遇到这个问题.)
一定要将其设置为text/xml,否则默认就是text/html也就是普通的文本了。

常见语言的Content-Type设置 

header("Content-Type:text/xml");    //php
response.ContentType="text/xml"   //asp
response.setHeader("ContentType","text/xml");  //jsp   (我上次这没写,结果返回 是一个 "" )

2,xml结构。
XML一定要封闭的,很重要! (这个我一般不会范,我还是算比较细心的.)

例:
错误的XML 
<?xml version="1.0" encoding="UTF-8"?>
        
<name>zhangsan</name>
        
<id>1</id>
        
<name>lisi</name>
        
<id>2</id>

正确的
<?xml version="1.0" encoding="UTF-8"?>
<stulist>
        
<student  mailto:1@1.com" target=_blank>1@1.com">  
                
<name>zhangsan</name>
                
<id>1</id>
        
</student>
        
<student  mailto:2@2.com" target=_blank>2@2.com">
              
<name>lisi</name>
                
<id>2</id>
        
</student>
</stulist>

3,解析
遍历student(这里还是用上面那个XML,子节点是student) 
$.ajax({
    url:
'ajax.jsp',
    type:
'GET',
    dataType:
'xml',
    timeout:
1000,
    error:
function(xml){
        alert(
'Error loading XML document'+xml);
    }
,
    success:
function(xml){
        $(xml).find(
"student").each(function(i){
            
var id=$(this).children("id");   //取对象
            var id_value=$(this).children("id").text();  //取文本 或者 $("id" , xml).text();
            alert(id_value);//这里就是ID的值了。
            alert($(this).attr("email")); //这里能显示student下的email属性。
            $('<li></li>').html(id_value).appendTo('ol');
  

      });
    }

}
);