本文已参与「新人创作礼」活动，一起开启掘金创作之路。
目录
什么是Ajax
什么是 AJAX ？
AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。
有很多使用 AJAX 的应用程序案例：新浪微博、Google 地图、开心网等等。
Ajax使用步骤
1.创建ajax对象
2.打开这个对象
3.发送请求
4.监听请求
小案例
1.在同目录下创建一个 文本1.txt 文件，在里面输入要读取的内容
2.创建ajax的使用的html文件
代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<h1></h1>
<script type="text/javascript">
//1.创建ajax对象
var xhr = new XMLHttpRequest();
//4.监听请求
xhr.onreadystatechange= function(){
//当xhr对象的readState属性发生了改变,这个事件就会触发
//readState:
//0===>xhr对象已经创建,但是还没有进行初始化操作
//1===>xhr已经调用了open（）
//2===>xhr已经发出了请求
//3===>已经返回了部分数据
//4===>数据已经全部返回(只关心这个)
if(xhr.readyState!=4){
return;
}
if(xhr.status>=200 &&xhr.status<=300){
//数据放在了xhr.responseText的属性中(String)
document.querySelector('h1').innerText=xhr.responseText;
}
else{
console.log("请求失败");
}
}
//2.打开这个对象
//?t='+new Date():添加时间戳,可以实时更新数据
xhr.open('get','文本1.txt?t='+new Date().getTime(),true)
//3.发送请求
xhr.send();
</script>
</body>
</html>
可以将txt文件下的数据请求到HTML文件中
封装ajax
function ajax(url,fnSucc,fnFaild)
url是请求的文件名数据
fnSucc是请求成功是要执行的函数
fnFaild是请求失败后要执行的函数
function ajax(url,fnSucc,fnFaild){
//1.创建ajax对象
if(window.XMLHttpRequest){
var xhr = new XMLHttpRequest();
}
else{
var xhr = new ActiveXObject("Microsoft.XMLHttp");
}
//4.监听请求
xhr.onreadystatechange= function(){
//当xhr对象的readState属性发生了改变,这个事件就会触发
//readState:
//0===>xhr对象已经创建,但是还没有进行初始化操作
//1===>xhr已经调用了open（）
//2===>xhr已经发出了请求
//3===>已经返回了部分数据
//4===>数据已经全部返回(只关心这个)
if(xhr.readyState!=4){
return;
}
if(xhr.status>=200 &&xhr.status<=300){
//数据放在了xhr.responseText的属性中(String)
fnSucc(xhr.responseText);
}
else{
if(fnFaild){
fnFaild(xhr.status);
}
}
}
//2.打开这个对象
xhr.open('get',url+'?t='+new Date().getTime(),true)
//3.发送请求
xhr.send();
}
封装ajax测试一
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button" id="btn">按钮</button>
<script type="text/javascript">
var btn=document.getElementById("btn")
btn.onclick=function(){
ajax('文本1.txt',function(str){
alert(str);
});
}
</script>
</body>
</html>
运行结果是点击按钮会弹出 文本1.txt 的内容
Ajax使用json对象
什么是json
juejin.im/post/5d033c…
例如
[{no:1,name:"孔",addr:"赣州"},{no:2,name:"李",addr:"抚州"},{no:3,name:"李",addr:"南昌"},{no:4,name:"左",addr:"南昌"}]
在js中可以将这个文本对象进行解析：用eval(str);方法
str是使用ajax封装后，获取出来的文本对象
var arr=eval(str);
arr解析出来是一个对象数组
封装ajax测试二
具体执行代码如下
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="ajax.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<button type="button" id="btn">按钮</button>
<ul id="ull">
</ul>
<script type="text/javascript">
var btn=document.getElementById("btn");
var ull=document.getElementById("ull");
btn.onclick=function(){
ajax('文本2.txt',function(str){
var arr=eval(str);
for(var i=0;i<arr.length;i++){
var li=document.createElement("li");
li.innerHTML="序号：<strong>"+arr[i].no+"</strong>姓名：<span>"+arr[i].name+"</span>地址：<span>"+arr[i].addr+"</span>";
ull.appendChild(li);
}
});
}
</script>
</body>
</html>
运行效果如图
详细资料可参考：www.w3school.com.cn/ajax/ajax_i…
