使用原生Ajax处理HTML,XML,JSON数据

来源：互联网发布：外汇实时分析软件编辑：程序博客网时间：2024/04/30 20:04

虽然在上一篇博客中介绍了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、准备发送请求的方式和URLvar 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

<!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>

ming.xml

<?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":"学霸"}}

阅读全文

0 0