AJAX笔记-数据传输格式

HTML

优点:

传输的直接是HTML格式的内容,可以直接用innerHTML = XMLHttpRequest.responseText来获取操作。

缺点

如果是更新多个部分,则对responseText内容不容易拆分。

XML

var result = XMLHttpRequest.responseXML
返回的是XML文档,需要进行解析,然后重组成HTML文档。通常是通过类似下面的TagName等进行获取。
var data = result.getElementsByTagName("data")[0]...
通过获取xml中的内容,然后创建各种节点,自己构建HTML文档 document.createElemnt...

优点:

XML是一种通用的数据格式,不必把数据强加到已定义好的格式中,利用DOM可以完全解析数据。

缺点:

如果文档来自于服务器,就必须保证文档含有正确的头部信息<xml?...>。如果文档类型错误,那么responseXML的值将是空的。当浏览器接收到长的XML文件后,DOM解析会相当复杂。

JSON

JavaScript Object Notation
//数据格式
	window.onload = function(){
		var jsonObject = {
				"name":"high", //每个json元素间必须用逗号隔开
				"age":12, //值可以是字符串,整形等正常的类型
				"address":{"country":"China","City":"WuHan"}, //值可以是一个新的json对象
				"speak":function(){console.log("Hello json")} //可以是函数
		};
		console.log(jsonObject.name)
		console.log(jsonObject.age)
		console.log(jsonObject.address.country)
		jsonObject.speak(); //函数调用,后面要加()
	};


通过JSON传输的数据会议字符串的方式,放在XMLHttpRequest.responseText中。
在javascript中,eval函数可以将字符串转换为可执行的javascript语句。
对于json格式的字符串,则可以通过eval直接转换为json对象。
var jsonStr = "{'name':'high'}";
var testObject = eval("(" + jsonStr + ")"); //注意在转换时必须要加上括号
优点:

作为数据传输格式,JSON和XML很相似,使用方面更加灵巧。JSON不需要从服务器端发送含有特定内容类型的头部信息(不需要类似xml的头信息)。

缺点:

语法过于严谨,代码不如xml那样容易阅读。eval函数存在风险。可以执行传输过来的字符串,可能是恶意代码。

<完>

ajax经典怎样传输数据,$.ajax({ async: true, // 默认true(异步请求) cache: true, // 默认true,设置为 false 将不会从浏览器缓存中加载请求信息。 type: "POST", // 默认:GET 请求方式:[POST/GET] dataType: "xml", //默认["xml"/"html"] 返回数据类型:["xml" / "html" / "script" / "json" / "jsonp"] url: "Test.ashx", // 默认当前地址,发送请求的地址 data: { key: "value" }, // 发送到服务器的数据 error: function(xml) { alert('Error loading XML document' + xml); }, // 请求失败时调用 timeout: 1000, // 设置请求超时时间 success: function(xml) { // 请求成功后回调函数 参数:服务器返回数据,数据格式. $("#users").empty(); // 用Jquery处理xml数据 $(xml).find('Table').each(function() { var loginname = $(this).find("Loginname").text(); var name = $(this).find("Name").text(); $("#users").append("" + loginname + " - " + name + ""); }); /* $(xml).find('user').each(function(i) { var loginname = $(xml).find("user loginname").eq(i).text(); var name = $(xml).find("user name").eq(i).text(); $("#users").append("" + loginname + "" + "" + name + ""); }) $(xml).find("student").each(function(i){ var id=$(this).children("id"); //取对象 var id_value=$(this).children("id").text(); //取文本 alert(id_value);//这里就是ID的值了。 alert($(this).attr("email")); //这里能显示student下的email属性。 //最后输出了,这个是cssrain的写法,貌似比macnie更JQ一点 $('').html(id_value).appendTo('ol'); }); */ } })
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值