虽然在上一篇博客中介绍了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.οnlοad= 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
<!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":"学霸"
}
}