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

最新推荐文章于 2022-09-23 13:02:43 发布

夏草v

最新推荐文章于 2022-09-23 13:02:43 发布

阅读量184

点赞数

分类专栏：原生JavaScript

本文链接：https://blog.csdn.net/qq_16546829/article/details/81742755

版权

原生JavaScript 专栏收录该内容

29 篇文章 0 订阅

订阅专栏

本文主要讲述在Ajax请求过程中xhr.onprogress以及两种方法的区别与使用

实例和源码将在wamp64上面进行测试，编辑器使用sublime3

详情见https://study.163.com/course/courseMain.htm?courseId=1004570051

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>

夏草v

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端重新学习（10）javascipt之ajax代码实例（1）

本文主要讲述在Ajax请求过程中xhr.onprogress以及两种方法的区别与使用实例和源码将在wamp64上面进行测试，编辑器使用sublime3详情见https://study.163.com/course/courseMain.htm?courseId=1004570051 Ajax在客戶端与服务器之间的关系 XMLHTTPReques...
复制链接

扫一扫