本文主要讲述在Ajax请求过程中xhr.onprogress以及两种方法的区别与使用
实例和源码将在wamp64上面进行测试,编辑器使用sublime3
Ajax在客戶端与服务器之间的关系
XMLHTTPRequest对象
已经封装好的,可以直接使用的Ajax技术库
状态码
readyState 状态码:
- 0:请求未初始化
- 1:服务器连接已建立
- 2:请求已接受
- 3:请求处理中
- 4:请求已完成,且响应已就绪
HTTP 状态码最常见的几个:
- 200 - 服务器成功返回网页
- 404 - 请求的网页不存在
- 503 - 服务器暂时不可用
以下实例和源码将在wamp64上面进行测试,编辑器使用sublime3
利用XHR-get获取txt文件
知识点1 xhr.onprogress
利用onprogress进程函数 在ajax获取资源时(http状态码为3)在函数中可以写一些方法事件进行实现。
如下
xhr.onprogress = function(){
console.log("测试READYSTATE: ",xhr.readyState);
//状态3时的事件
}
知识点2 两种方法-onreadystatechange()与onload()的不同
区别
onreadystatechange()的定义是只要返回的状态码只要变化时就回调一次函数,而onload只有状态码为4时才能回调一次函数。
这边提下onprogress(),也就是当状态码为3时,会执行这个函数。
当服务器正常的话基本上都会返回readyState 状态码0~4,但是不一定请求得到数据,所以有个http状态码来判断。
以下可以在ajax过程中查看两种方法的对比
document.getElementById('button').addEventListener("click",loadText);
function loadText(){
var xhr = new XMLHttpRequest();
xhr.open('GET','sample.txt',true);
console.log("READYSTATE: ",xhr.readyState);
//onprogress
xhr.onprogress = function(){
console.log("测试READYSTATE: ",xhr.readyState);//状态3
}
// 两种方式请求 onload / onreadystattechange
xhr.onload = function(){
console.log("onloadREADYSTATE: ",xhr.readyState);
}
xhr.onreadystatechange = function(){
console.log("onreadystatechangeREADYSTATE: ",xhr.readyState);
///readyState 当前服务器返回的readyState状态码
///status HTTP 状态码
}
// 发送请求
xhr.send();
}
具体源码如下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="Access-Control-Allow-Origin" content="*">
<title>Ajax 1 - 请求纯文本</title>
</head>
<body>
<button id="button">请求纯文本</button>
<br><br>
<div id="text"></div>
<script>
document.getElementById('button').addEventListener("click",loadText);
function loadText(){
//console.log("Hello World!");
// 创建XMLHttpRequest对象 XHR
var xhr = new XMLHttpRequest();
//console.log(xhr);//显示XHR对象所有的方法
// open(type,url/file,async) open两个参数
xhr.open('GET','sample.txt',true);
// console.log("READYSTATE: ",xhr.readyState);
//onprogress//状态3的检测
xhr.onprogress = function(){
console.log("测试READYSTATE: ",xhr.readyState);
}
// 两种方式请求 onload / onreadystattechange
xhr.onload = function(){
console.log(" xhr.onload-READYSTATE: ",xhr.readyState);
// console.log(this.responseText);
// document.getElementById('text').innerHTML = this.responseText;
}
xhr.onreadystatechange = function(){
console.log("xhr.onreadystatechange-READYSTATE: ",xhr.readyState);
///readyState 当前服务器返回的readyState状态码
///status HTTP 状态码
if (this.status == 200 && this.readyState == 4) {
console.log(this.responseText);
document.getElementById('text').innerHTML = this.responseText;
}else if(this.status == 404){
console.log("请求的网页不存在");
document.getElementById('text').innerHTML = "NOT Found";
}
}
// 发送请求
xhr.send();
}
</script>
</body>
</html>