jQuery与Ajax(2)
日期：2014-05-16 浏览次数：20604 次
1.jQuery中的AJAX服务器端返回方式
目前支持的数据类型有：Text，XML，HTML，Script，JSON，Jsonp格式。下面将分别介绍使用ajax函数接受服务器端返回这些数据类型时的处理方式。
①html方式
html方式是jQuery中在进行AJAX请求时的默认方式。如果返回的html代码中有javascript代码,用html(),append()这些函数将返回的html代码装载到当前页面的时候才会执行其中包含的javascript代码,并且该代码只执行一次并不缓存。
ajax()函数html方式页面
<input type="button" id="ajax1" value="ajax(html)"/>
<div id="1"> </div>
$("#ajax1").click(function(){$.ajax({url:"ajax.htm",dataType:"Html"
,success:function(data){$("#1").append(data)}})
})
ajax.htm
<body>
<script type="text/javascript">
var btn=document.getElementById("Button1");
btn.onclick=function(){alert("oh,you clicked me")};
</script>
?? ?<input id="Text1" type="text" />
?? ?<input id="Password1" type="password" />
?? ?<input id="Button1" type="button" value="button" />
</body>
②text方式
与html方式很像，它们都是返回一个String对象
ajax()函数text方式页面
<input type="button" id="ajax2" value="ajax(text)"/>
<div id="1"> </div>
$("#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对象而非字
