使用Ajax异步返回的两种类型
Ajax = 异步 JavaScript 和 XML,Ajax 是一种用于创建快速动态网页的技术,通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新,传统的网页(不使用 Ajax)如果需要更新内容,必需重载整个网页面。看下图
传统的Ajax写法:
/**
* @function 利用ajax动态交换数据(Text/HTML格式)
* @param url 要提交请求的页面
* @param jsonData 要提交的数据,利用Json传递
* @param getMsg 这个函数可以获取到处理后的数据
*/
function ajax_demo(url,jsonData,getMsg)
{
//创建Ajax对象,ActiveXObject兼容IE5,6
var oAjax = window.XMLHttpRequest?new XMLHttpRequest():new ActiveXObject("Microsoft.XMLHTTP");
//打开请求
oAjax.open('POST',url,true);//方法,URL,异步传输
//发送请求
var data = '';//拼装数据
oAjax.setRequestHeader("Content-type","application/x-www-form-urlencoded");
oAjax.send(data);
//接收返回,当服务器有东西返回时触发
oAjax.onreadystatechange = function () {
if(oAjax.readyState == 4 && oAjax.status == 200){
var text = oAjax.responseText;
//处理数据
}
}
}
使用jQuery使用:
function ajax_demo() {
var form_data = '';
$.ajax({
type:'POST',
url:'upload.do',
data:form_data,
cache : false,
processData : false,
contentType : false,
}).success(function (data) {
var result = JSON.parse(data);
alert(result.back());
}).error(function () {
alert("上传失败!")
});
}
后端返回前端的3种类型
1、返回html(jsp)格式的数据,后端处理完后,直接返回一个页面。前端直接将的到HTML添加到页面就行了,
2、返回xml格式的数据
3、返回json格式的数据
解析HTML
HTML由一些普通的文本组成,如果服务器通过XMLHttpRequest对象来发送HTML,文本将存储在ResponseText属性中。不必从ResponseText属性中读取数据,因为它本身就是希望的数据格式,可以直接将它插入页面中。
插入HTML代码最简单的方法是更新这个元素的innerHTML属性。
优点:
(1)从服务器端发送的HTML代码在浏览器端不需要用JavaScript进行解析;
(2)HTML的可读性好。
(3)HTML代码与innerHTML属性搭配,效率高。
缺点:
(1)若需要通过Ajax更新一篇文档的多个部分,HTML不合适(2)innerHTML并非DOM标准。
解析XML
优点:
1)XML是一种通用的数据格式。
2)不必把数据强加到已定义好的格式中,而是要为数据自定义合适的标记。
3)利用DOM可以完全掌控文档。
缺点:
1)如果文档来自于服务器,就必须保证文档含有正确的首部信息,若文档类型不正确,那么requestXML属性将是空的。2)当浏览器接收到长的XML文件后,DOM解析可能会很复杂。
解析JSON
JSON是一种简单的数据格式,比XML更加轻巧。JSON 是JavaScript原生格式,这意味着在javascript中处理JSON数据不需要任何特殊的API或者工具包。JSON的规则很简单:对象是一个无序的 “名称/值”对集合,一个对象以“{”(左括号)开始,以“}”(右括号)结束,每一个名称后面跟一个“:”(冒号),名称/值之间用逗号分隔开。JSON用冒号而不是等号来赋值。每一条赋值语句用逗号分开。整个对象用大括号封装起来,可用大括号分级嵌套数据。对象描述中存储的数据可以是字符串,数字或布尔值,对象描述也可存储函数,即对象的方法。JSON只是一种文本字符串,它被存储在responseText属性中。为了读取存储在responseText属性中的JSON数据,需要用到javascript的eval()语句,eval函数会把一个字符串当做它的一个参数,然后这个字符串会被当做javascript代码来执行,因为JSON的字符串就是javascript代码构成的,所以它本身是可以执行的。JSON提供了json.js包后,使用parseJSON()方法可以将JSON对象解析为js对象。
优点:
(1)作为一种数据传输格式,JSON与XML很相似,但是它更加灵巧。
(2)JSON不需要从服务器端发送含有特定内容类型的首部信息。
缺点:
(1)语法过于严谨。
(2)代码不易读。
(3)eval函数存在风险。