ajax异步修改新闻状态,AJAX

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!

}

}

下面这是个实例

加载更多

*{

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;

}

加载更多

//获取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

})

后端代码

//服务端 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.οnclick=function(){

if(!flag){

return;

}else{

flag=false

ajax({

....

flag=true;//收到响应之后才把true赋值给flag，不管是成功响应还是失败的响应

})

}

}