AJAX
2018-01-28 本文已影响0人
zy懒人漫游
ajax 是什么？有什么作用？
-
AJAX即“Asynchronous Javascript And XML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。
-
AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。
-
AJAX 是一种用于创建快速动态网页的技术。
-
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
-
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
具体来说，AJAX包括以下几个步骤。
1.创建AJAX对象
2.发出HTTP请求
3.接收服务器传回的数据
4.更新网页数据
概括起来，就是一句话，AJAX通过原生的XMLHttpRequest对象发出HTTP请求，得到服务器返回的数据后，再进行处理。
AJAX可以是同步请求，也可以是异步请求。但是，大多数情况下，特指异步请求。因为同步的Ajax请求，对浏览器有“堵塞效应”。
1.XMLHttpRequest对象
XMLHttpRequest对象用来在浏览器与服务器之间传送数据。
var ajax = new XMLHttpRequest();
ajax.open('GET', 'http://www.example.com/page.php', true);
//上面代码向指定的服务器网址，发出GET请求。
ajax.onreadystatechange = handleStateChange;
//然后，AJAX指定回调函数，监听通信状态（readyState属性）的变化。
一旦拿到服务器返回的数据，AJAX不会刷新整个网页，而是只更新相关部分，从而不打断用户正在做的事情。
这是XMLHttpRequest()典型用法;
var xhr = new XMLHttpRequest();
// 指定通信过程中状态改变时的回调函数
xhr.onreadystatechange = function(){
// 通信成功时，状态值为4
if (xhr.readyState === 4){
if (xhr.status === 200){
console.log(xhr.responseText);
} else {
console.error(xhr.statusText);
}
}
};
xhr.onerror = function (e) {
console.error(xhr.statusText);
};
// open方式用于指定HTTP动词、请求的网址、是否异步
xhr.open('GET', '/endpoint', true);
// 发送HTTP请求
xhr.send(null);
2.XMLHttpRequest实例的属性
readyState是一个只读属性，用一个整数和对应的常量，表示XMLHttpRequest请求当前所处的状态。
> 0，对应常量UNSENT，表示XMLHttpRequest实例已经生成，但是open()方法还没有被调用。
> 1，对应常量OPENED，表示send()方法还没有被调用，仍然可以使用setRequestHeader()，设定HTTP请求的头信息。
> 2，对应常量HEADERS_RECEIVED，表示send()方法已经执行，并且头信息和状态码已经收到。
> 3，对应常量LOADING，表示正在接收服务器传来的body部分的数据，如果responseType属性是text或者空字符串，responseText就会包含已经收到的部分信息。
> 4，对应常量DONE，表示服务器数据已经完全接收，或者本次接收已经失败了。
在通信过程中，每当发生状态变化的时候，readyState属性的值就会发生改变。这个值每一次变化，都会触发readyStateChange事件。
if (ajax.readyState == 4) {
// Handle the response.
} else {
// Show the 'Loading...' message or do nothing.
}
//上面代码表示，只有readyState变为4时，才算确认请求已经成功，其他值都表示请求还在进行中。
tatus属性为只读属性，表示本次请求所得到的HTTP状态码，它是一个整数。一般来说，如果通信成功的话，这个状态码是200。
200, OK，访问正常
301, Moved Permanently，永久移动
302, Move temporarily，暂时移动
304, Not Modified，未修改
307, Temporary Redirect，暂时重定向
401, Unauthorized，未授权
403, Forbidden，禁止访问
404, Not Found，未发现指定网址
500, Internal Server Error，服务器发生错误
基本上，只有2xx和304的状态码，表示服务器返回是正常状态
if (ajax.readyState == 4) {
if ( (ajax.status >= 200 && ajax.status < 300)
|| (ajax.status == 304) ) {
// Handle the response.
} else {
// Status error!
}
}
下面这是个实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>加载更多</title>
<style>
*{
margin: 0;
padding: 0;
}
#ct li{
list-style:none;
border: 1px solid #ccc;
padding: 10px;
margin-top: 10px;
cursor:pointer;
}
#ct li:hover{
background-color: green;
}
#load-more{
display: block;
margin: 10px auto;
text-align: center;
cursor: pointer;
}
/*#load-more img{
width: 40px;
height: 40px;
}*/
.btn{
display: inline-block;
height: 40px;
line-height: 40px;
width: 80px;
border: 1px solid #da6969;
border-radius: 3px;
text-align: center;
text-decoration: none;
color: #E27272;
}
.btn:hover{
background: #3aca46;
color: #fff;
}
</style>
</head>
<body>
<ul id ="ct">
</ul>
<!-- <a href="javascript:void(0)"></a> undefined不跳转-->
<a href="#" id="load-more" class= "btn">加载更多</a>
</body>
<script>
//获取a链接
var btn = document.querySelector("#load-more")
var ct = document.querySelector("#ct")
var pageIndex = 0
//网速特别慢的时候,在数据到来之前防止重复点击?
var isDataArrive = true
btn.addEventListener("click",function(e){
e.preventDefault()
if(!isDataArrive){
return;
}
var xhr = new XMLHttpRequest()
xhr.onreadystatechange = function(){
if (xhr.readyState === 4) {
if (xhr.status === 200 || xhr.status === 304) {
var result = JSON.parse(xhr.responseText)
var fragment = document.createDocumentFragment()
for (var i = 0; i < result.length; i++) {
var node = document.createElement("li")
node.innerText = result[i]
fragment.appendChild(node)
}
//插入li
ct.appendChild(fragment)
//数字每次变化5
pageIndex += 5
}else{
alert("出错啦")
}
isDataArrive = true
}
}
xhr.open("get","/loadMore?index="+pageIndex+"&length=5",true)
xhr.send()
isDataArrive = false
})
</script>
</html>
后端代码
//服务端 router.js
app.get('/loadMore', function(req, res) {
var curIdx = req.query.index
var len = req.query.length
var data = []
for(var i = 0; i < len; i++) {
data.push('新闻' + (parseInt(curIdx) + i))
}
res.send(data);
});
点击按钮，使用 ajax 获取数据，设置状态锁,可以在数据到来之前防止重复点击?
var flag=true;
btn.onclick=function(){
if(!flag){
return;
}else{
flag=false
ajax({
....
flag=true;//收到响应之后才把true赋值给flag，不管是成功响应还是失败的响应
})
}
}
