传输格式
三种: xml, json, html
HTML:
实现:
andy.html: (返回的是: 这是html格式的数据)
<h2><a href="andy@163.com">Andy Budd</a></h2>
<a href="http://andybudd.com">http://andybudd.com</a>
jeremy.html: (返回的是: 这是html格式的数据)
<h2><a href="jeremy@163.com">Jeremy</a></h2>
<a href="http://jeremy.com">http://jeremy.com</a>
richard.html: (返回的是: 这是html格式的数据)
<h2><a href="richard@163.com">Richard</a></h2>
<a href="http://richard.com">http://richard.com</a>
index.jsp:
<script type="text/javascript">
window.onload = function() {
var aNode = document.getElementsByTagName("a");
for (var i=0; i<aNode.length; i++) {
aNode[i].onclick = function() {
var request = new XMLHttpRequest();
var url = this.href + "?time = " + new Date();
var method = "GET";
request.open(method, url);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200 || request.status == 304) {
document.getElementById("details").innerHTML = request.responseText;
}
}
}
return false;
}
}
}
</script>
<body>
<h2>People</h2>
<ul>
<li><a href="files/andy.html">andy</a></li>
<li><a href="files/richard.html">richard</a></li>
<li><a href="files/jeremy.html">jeremy</a></li>
</ul>
<!-- 实现三个超链接的Ajax, 将结果放在下面的区域 -->
<div id="details"></div>
</body>
测试:
总结:
XML:
index.jsp:
<script type="text/javascript">
window.onload = function() {
var aNode = document.getElementsByTagName("a");
for (var i=0; i<aNode.length; i++) {
aNode[i].onclick = function() {
var request = new XMLHttpRequest();
var url = this.href + "?time = " + new Date();
var method = "GET";
request.open(method, url);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200 || request.status == 304) {
// 结果为xml格式, 使用responseXML获取
var result = request.responseXML;
// 结果不能直接使用, 必须创建对应的节点, 再把节点加入到#details中
/* 转换后的格式:
<h2><a href="andy@163.com">andy</a></h2>
<a href="http://andy.com">http://andy.com</a>
*/
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;
alert(name);
alert(website);
alert(email);
}
}
}
return false;
}
}
}
</script>
<body>
<h2>People</h2>
<ul>
<li><a href="files/andy.xml">andy</a></li>
<li><a href="files/richard.xml">richard</a></li>
<li><a href="files/jeremy.xml">jeremy</a></li>
</ul>
<!-- 实现三个超链接的Ajax, 将结果放在下面的区域 -->
<div id="details"></div>
</body>
andy.xml:
<?xml version="1.0" encoding="UTF-8"?>
<details>
<name>Andy</name>
<website>website:http://andy.com</website>
<email>andy@163.com</email>
</details>
测试:
返回XML格式的文件:
修改:
if (request.status == 200 || request.status == 304) {
// 结果为xml格式, 使用responseXML获取
var result = request.responseXML;
// 结果不能直接使用, 必须创建对应的节点, 再把节点加入到#details中
/* 转换后的格式:
<h2><a href="andy@163.com">andy</a></h2>
<a href="website:http://andy.com">http://andy.com</a>
*/
var name = result.getElementsByTagName("name")[0].firstChild.nodeValue;
var website = result.getElementsByTagName("website")[0].firstChild.nodeValue;
var email = result.getElementsByTagName("email")[0].firstChild.nodeValue;
// 创建节点, 放入对应的内容 <h2><a href="andy@163.com">andy</a></h2>
// 创建a节点及其属性, 文本
var aNode1 = document.createElement("a"); // 创建a节点
aNode1.appendChild(document.createTextNode(name)); // a节点的文本
aNode1.href = email; // a节点的href
// 创建<h2>节点
var h2Node = document.createElement("h2"); // 创建h2节点
// 把a节点放入h2节点
h2Node.appendChild(aNode1);
// <a href="website:http://andy.com">http://andy.com</a>
var aNode2 = document.createElement("a");
aNode2.appendChild(document.createTextNode(website));
aNode2.href = website;
// 把上面创建的h2节点和a节点放入#details的节点中
var div = document.getElementById("details");
div.appendChild(h2Node);
div.appendChild(aNode2);
}
测试:
重复了!
测试:
JSON格式: 经常使用的一种格式(重点)
简单范例: 展示JSON数据的调用
testJson.html:
<script type="text/javascript">
// Json格式是原生的javascript格式, 就像是一个js对象一样
var jsonObject = {
// 属性
"name": "atguigu",
"age": 12,
"address": {
"city": "BeiJing",
"school": "尚硅谷"
},
// 方法
"teaching": function() {
alert("Java, Android,,,,");
}
};
// 调用属性和方法
alert(jsonObject.name);
alert(jsonObject.address.city);
jsonObject.teaching();
</script>
----------------------------
// json字符串
var jsonStr = "{'name': 'atguigu'}";
alert(jsonStr.name); // out: undefined
---------------------------
// 把json字符串转换成json对象, 使用eval()方法: 执行字符串里面的内容
var testObject = eval("(" + jsonStr + ")");
alert(testObject.name); // out: atguigu
json格式测试:
// 结果为json字符串格式, 使用responseText获取
var result = request.responseText;
var jsonObject = eval("(" + result + ")");
// 结果不能直接使用, 必须创建对应的节点, 再把节点加入到#details中
/* 转换后的格式:
<h2><a href="andy@163.com">andy</a></h2>
<a href="website:http://andy.com">http://andy.com</a>
*/
var name = jsonObject.person.name;
var website = jsonObject.person.website;
var email = jsonObject.person.email;
下面同xml创建节点
测试:
浙公网安备 33010602011771号