使用原生Ajax處理HTML,XML,JSON資料
阿新 • • 發佈：2019-01-03
雖然在上一篇部落格中介紹了Ajax的基本知識，但還是需要溫習一下相關的知識點，我們還是從最簡單的實現步驟講起
index.html
<!DOCTYPE HTML> <html lang="en"> <head> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <title>Insert title here</title> <script type="text/javascript"> window.onload= function(){ document.getElementsByTagName("a")[0].onclick = function(){ // 1、建立一個XMlHttpRequest物件 var xhr = new XMLHttpRequest(); // 2、準備傳送請求的方式和URL var method = "GET"; var url = this.href; // 如果請求型別是POST請求，還應該有如下程式碼 //xhr.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); // 3、呼叫XMlHttpRequest物件的open方法 xhr.open(method, url); // 4、呼叫XMlHttpRequest物件的send方法 xhr.send(null); // 5、為XMlHttpRequest物件新增onreadystatechange屬性的響應函式 xhr.onreadystatechange= function(){ // 6、判斷響應是否完成：readyState屬性值為4即代表完成 if(xhr.readyState == 4){ // 7、判斷響應是否可用：status屬性值為200則代表可用 if(xhr.status == 200){ alert(xhr.responseText); } } } // 取消a節點的預設行為 return false; } }; </script> </head> <body> <a href="helloAjax.txt">hello Ajax</a> </body> </html>
程式碼中的註釋寫的很清楚了，實現Ajax的步驟一目瞭然。所以下面的三個部分我依舊是上程式碼不做解釋。
1、處理HTML資料
main.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>顯示名人資訊</title> <style type="text/css"> * { font-family: "微軟雅黑"; font-size: 15pt; } a { color: #ABABAF; } h2, h3 { color: green; } </style> <script type="text/javascript"> window.onload = function() { var aNodes = document.getElementsByTagName("a"); for (var i = 0; i < aNodes.length; i++) { aNodes[i].onclick = function() { var request = new XMLHttpRequest(); var method = "GET"; var url = this.href; request.open(method, url); request.send(null); request.onreadystatechange = function() { if (request.readyState == 4) { if (request.status == 200) { // 直接將返回的資料插入到頁面 document.getElementById("details").innerHTML = request.responseText; } } } return false; } } } </script> </head> <body> <ul> <li><a href="file/ming.html">rgx</a> <li><a href="file/hong.html">lj</a> </ul> <div id="details"></div> </body> </html>
ming.html
<h2>小明</h2>
<h3>學號：2017116512</h3>
<h3>屬性：學渣</h3>hong.html
<h2>小紅</h2>
<h3>學號：2017116505</h3>
<h3>屬性：學霸</h3>2、處理XML資料
main.html
ming.xml<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>顯示名人資訊</title> <style type="text/css"> * { font-family: "微軟雅黑"; font-size: 15pt; } a { color: #ABABAF; } h2{ color: red; } h3 { color: green; } </style> <script type="text/javascript"> window.onload = function() { var aNodes = document.getElementsByTagName("a"); for (var i = 0; i < aNodes.length; i++) { aNodes[i].onclick = function() { var request = new XMLHttpRequest(); var method = "GET"; var url = this.href; request.open(method, url); request.send(null); request.onreadystatechange = function() { if (request.readyState == 4) { if (request.status == 200) { /* 當資料傳輸格式變為xml的時候，我們應該先接收到資料，再解析資料，然後將解析到的資料，動態的建立 html元素，再將這些html元素加在div中 */ var result = request.responseXML; var name = result.getElementsByTagName("name")[0].firstChild.nodeValue; var studentId = result.getElementsByTagName("studentId")[0].firstChild.nodeValue; var param = result.getElementsByTagName("param")[0].firstChild.nodeValue; var name_h2 = document.createElement("h2"); name_h2.appendChild(document.createTextNode(name)); var studentId_h3 = document.createElement("h3"); studentId_h3.appendChild(document.createTextNode(studentId)); var param_h3 = document.createElement("h3"); param_h3.appendChild(document.createTextNode(param)); var details = document.getElementById("details"); details.innerHTML = ""; details.appendChild(name_h2); details.appendChild(studentId_h3); details.appendChild(param_h3); } } } return false; } } } </script> </head> <body> <ul> <li><a href="file/ming.xml">rgx</a> <li><a href="file/hong.xml">lj</a> </ul> <div id="details"></div> </body> </html>
<?xml version="1.0" encoding="utf-8"?>
<details>
<name>小明</name>
<studentId>學號：2017116512</studentId>
<param>屬性：學渣</param>
</details>hong.html
<?xml version="1.0" encoding="utf-8"?>
<details>
<name>小紅</name>
<studentId>學號：2017116505</studentId>
<param>屬性：學霸</param>
</details>3、處理json資料
main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>顯示名人資訊</title>
<style type="text/css">
* {
font-family: "微軟雅黑";
font-size: 15pt;
}
a {
color: #ABABAF;
}
h2, h3 {
color: green;
}
</style>
<script type="text/javascript">
window.onload = function() {
var aNodes = document.getElementsByTagName("a");
for (var i = 0; i < aNodes.length; i++) {
aNodes[i].onclick = function() {
var request = new XMLHttpRequest();
var method = "GET";
var url = this.href;
request.open(method, url);
request.send(null);
request.onreadystatechange = function() {
if (request.readyState == 4) {
if (request.status == 200) {
var result = request.responseText;
// 把result轉換為json物件，eval函式會把字串當做js程式碼執行
var object = eval("("+ result +")");
var name = object.person.name;
var studentId = object.person.studentId;
var param = object.person.param;
var name_h2 = document.createElement("h2");
name_h2.appendChild(document.createTextNode(name));
var studentId_h3 = document.createElement("h3");
studentId_h3.appendChild(document.createTextNode(studentId));
var param_h3 = document.createElement("h3");
param_h3.appendChild(document.createTextNode(param));
var details = document.getElementById("details");
details.innerHTML = "";
details.appendChild(name_h2);
details.appendChild(studentId_h3);
details.appendChild(param_h3);
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<ul>
<li><a href="file/ming.json">rgx</a>
<li><a href="file/hong.json">lj</a>
</ul>
<div id="details"></div>
</body>
</html>ming.json
{
"person":{
"name":"小明",
"studentId":"2017116512",
"param":"學渣"
}
}hong.json
{
"person":{
"name":"小紅",
"studentId":"2017116505",
"param":"學霸"
}
}