前端重新学习（12）javascipt之ajax代码实例（1）

本文主要讲述在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>

前端重新学习（12）javascipt之ajax代码实例（1）

知识点1 xhr.onprogress

知识点2 两种方法-onreadystatechange()与onload()的不同

猜你喜欢