ajax
2017-06-30 本文已影响0人
chengfengwang
参考自 阮一峰JS教程
AJAX成为了javascript脚本发送HTTP请求的代名词，可同步可异步，一般指异步，同步会阻塞
基本四步骤：
1.创建AJAX对象
2.监听事件
3.open
4.send
经常用法
var xhr = new XMLHttpRequest();
// 指定通信过程中状态改变时的回调函数
xhr.onreadystatechange = function(){
// 通信成功时，状态值为4
if (xhr.readyState === 4){
if (xhr.status === 200 || xhr.status === 304){
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);
XMLHttpRequest对象
//从创建这个对象开始，后面的很多东西都是它的实例，
不要问这个对象从哪来，把它看成和date,Arry之类的就好了
var xhr=new XMLHttpRequest()
XMLHttpRequest对象的属性
readyState
表示XMLHttpRequest请求当前所处的状态（也可以看作请求的进度条），在请求的时候，它的状态会自己变化
0:UNSENT XMLHttpRequest对象已经生成，但是open()方法还没有被调用
1:opened open()方法已被调用，但是send()方法还没被调用
2：HEADERS_RECEIVED，表示后端的send方法已经调用，头信息和状态码已经收到
3：LOADING，表示正在接收服务器传来的数据
4：DONE表示服务器已经完全接收或者接收失败
onreadystatechange
//这个请求指向一个函数
xhr.onreadystatechange=function(){}
//请求时，readyState会变化，
每变化一次，这个函数就会被调用一次
response基友群
responseType用来指定返回数据的类型，可以是字符串，JSON，ArrayBuffer对象.Dom对象等
responseXML属性返回从服务器接收到的Document对象
responseText从服务器接收到的字符串，我们用到最多的还是它了
status好姐妹
status
HTTP请求得到的状态码，最多用到的是200，访问正常
304: not Modified未修改（从缓存过去）
404 : not found未发现网址
500 ： 服务器发生错误
//基本上只有2xx和3xx的状态码表示正常
statusText
同样表示HTTP状态，返回一个字符串
和status不同的是，他还包含状态信息，比如'200 OK'
XMLHttprequest方法
open()
配置HTTP请求参数
常用参数有open(method,url,true/false，username,password)
请求的方法，地址，是否异步，默认为true（异步）,用于验证的用户名和密码
send()
注意：所有监听事件，必须在send()方法调用前设定
实际发出http请求
send方法可以发送多种数据，包括表单，文件等
- 如果不带参数，表明HTTP请求只包含头部信息，也就是只有一个URL，常用于GET请求
- 如果带参数，表示除了头信息，还有具体数据，常用于POST请求
jQuery ajax写法
$.ajax({
method:'GET',
url:'',
data:{}
}).done(function(result){console.log(result)}).fail(function(){
})
JQ发送JSONP
请求这个接口后得到
func({数据})
$.ajax({
url:'http://platform.sina.com.cn/slide/album_tech',
dataType:'jsonp',
jsonp:'jsoncallback',
data:{
app_key:'1271687855',
num:'3',
page:'1'
} //会请求 http://platform.sina.com.cn/slide/album_tech?jsoncallback=func&app_key=1271687855&num=3&page=4
}).done(function(ret){
console.log(ret)
})
实例
//使用ajax模拟 加载更多
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="UTF-8">
<style>
.newslist div {
line-height: 60px;
text-align: center;
margin: 10px 0;
background: #f1f1f1;
}
#loadmore {
display: block;
margin: 30px auto;
text-align: center;
width: 200px;
height: 50px;
outline: none;
background: blue;
border: none;
color: #fff;
}
</style>
</head>
<body>
<div class="newslist">
<div class="news">
新闻1
</div>
<div class="news">
新闻2
</div>
<div class="news">
新闻3
</div>
<div class="news">
新闻4
</div>
</div>
<div><button id='loadmore'>加载更多</button></div>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js'></script>
<script>
var index = 5
$('#loadmore').click(function () { //ajaxJQ写法一
$.ajax({
method: 'GET',
url: '/loadMore',
data: {
index: index,
length: 4
}
}).done(function (result) {
console.log(result);
$.each(result, function (index, value) {
$('.newslist').append('<div>' + value + '</div>')
})
index += 4
})
})
/*var loadMore = document.getElementById('loadmore'); //原生写法
var newsList = document.getElementsByClassName('newslist')[0];
var xhr = new XMLHttpRequest();
var index = 5;
var isloading=false;
loadMore.addEventListener('click', function () {
if(isloading){return}
isloading=true;
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200 || xhr.status === 304) {
var arr = JSON.parse(xhr.responseText)
console.log(arr)
render(arr)
}else{
console.log('出错了')
}
isloading=false;
}
}
xhr.open('get', '/loadMore?index=' + index + '&length=4'); //请求的参数索引和长度
xhr.send()
index += 4
})
function render(arr) {
var fragment = document.createDocumentFragment();
for (var i = 0; i < arr.length; i++) {
var div = document.createElement('div');
div.innerText = arr[i];
fragment.appendChild(div)
}
newsList.appendChild(fragment)
}*/
</script>
</body>
</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)
})
