jQuery与Ajax(二)

kendezhu

浏览: 247134 次
性别:
来自: 葡萄牙

最近访客更多访客>>

wc12436109

qu118

凝枫霜颖

Oliver--ME

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

web前端

Ajax jQuery

1.jQuery中的AJAX服务器端返回方式

目前支持的数据类型有：Text，XML，HTML，Script，JSON，Jsonp格式。下面将分别介绍使用ajax函数接受服务器端返回这些数据类型时的处理方式。

①html方式

html方式是jQuery中在进行AJAX请求时的默认方式。如果返回的html代码中有javascript代码,用html(),append()这些函数将返回的html代码装载到当前页面的时候才会执行其中包含的javascript代码,并且该代码只执行一次并不缓存。

ajax()函数html方式页面

$("#ajax1").click(function(){$.ajax({url:"ajax.htm",dataType:"Html"

,success:function(data){$("#1").append(data)}})

})

ajax.htm

<body>

var btn=document.getElementById("Button1");

btn.onclick=function(){alert("oh,you clicked me")};

</script>

</body>

②text方式

与html方式很像，它们都是返回一个String对象

ajax()函数text方式页面

$("#ajax2").click(function(){$.ajax({url:"ajax.txt",dataType:"Text"

,success:function(data){$("#1").append(data)}})

})

ajax.txt

这里是一个文本文件

③xml方式

xml方式返回的是一个XML对象,如果被请求的XML写得不正确或不完整,jQuery会抛出一个异常,AJAX请求被强制终止。

这里只提一些关于javaScript中创建XML文档对象模型的问题,首先不同浏览器创建XML文档对象的方式不同,常规如下:

⑴function loadXML(xmlpath){ 根据不同浏览器创建xml文档对象模型

var xmlDoc=null;

if(window.ActiveXObject){ IE内核浏览器

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

}else if(document.implementation&&document.implementation.createDocument){ 非IE内核浏览器

xmlDoc=document.implementation.createDocument("","",null);

}else{alert("你的浏览器不能处理该脚本");}

xmlDoc.async=false;

xmlDoc.load(xmlpath);

return xmlDoc;

}

http://www.w3school.com.cn/xmldom/dom_loadxmldoc.asp

但起码在chrome下会抛出Object #<a document> has no method 'loas'的异常,可以改成如下:

⑵function loadXML(xmlpath){

var xmlDoc=null;

if(window.ActiveXObject){

xmlDoc=new ActiveXObject("Microsoft.XMLDOM");

xmlDoc.async=false;

xmlDoc.load(xmlpath);

}else if(document.implementation&&document.implementation.createDocument){ //非IE内核浏览器

var xmlhttp=new window.XMLHttpRequest();

xmlhttp.open("GET",xmlpath,false);

xmlhttp.send(null);

xmlDoc=xmlhttp.responseXML;

}else{alert("你的浏览器不能处理该脚本");}

return xmlDoc; 返回的是xml文档对象,不是xml字符串

}

http://mrthink.net/js-jq-xml-function/

⑶$.ajax({url:"ajax.xml",type:"GET",dataType:"XML",success:function(xmlDoc){

alert(xmlDoc); 返回的是xml字符串,不是xml文档对象

}})

④script方式

这种方式在前面的$.getScript()函数中有讲过

script方式严格意义上不属于AJAX范畴,属于浏览器对含有src属性标签的二次请求原理,这里的标签指的就是script标签。原理是在head中创建一个script标签,src属性就是url,浏览器自动加载javaScript文件,并执行该文件的内容,而且对该文件不作缓存,只执行一次。

需要注意的是script方式并不是真正意义上的AJAX，所以jQuery定义的全局AJAX事件并不能完全触发,只能触发两个事件:ajaxSuccess和ajaxComplete

⑤json方式

JSON(javaScript Object Natation)是一种轻量级,基于文本,语言无关的数据交换格式,它是从ECMAScript语言标准衍生而来的。

前面在使用$.get()函数获取json数据时使用了eval()函数将得到的json格式的字符串转化为json对象,而使用$.getJSON()函数貌似得到的是一个json对象而非字符串

⑥jsonp方式

jQuery支持jsonp方式,这种方式主要在跨域请求中使用。我们在后面的学习内容中会使用AJAX进行跨域操作。

分享到：

jQuery与Ajax(三) | jQuery与Ajax(一)

2011-04-07 21:59
浏览 1675
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论