先补个知识点：

readyState 状态码：

0:请求未初始化

1:服务器连接已建立

2:请求已接受

3:请求处理中

4:请求已完成，且响应已就绪

HTTP 状态码：

200 - 服务器成功返回网页

404 - 请求的网页不存在

503 - 服务器暂时不可用

首先在自己目录下建立一个ajaxText.txt用来测试，ajax必须要服务器里面执行，我当前是在apach本地服务器测试的。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

<button id="btn" value="请求数据">请求数据</button>

<p id="c"></p>

<body>

        <!-- open(type, url/file,async) -->

        <script type="text/javascript">

            let btnRequest = document.getElementById('btn');

            btnRequest.addEventListener('click', load, false);

            function load() {

            let xhr = new XMLHttpRequest();

            xhr.open('GET', 'ajaxTest.txt',true);

            //两种方式请求 onload / onreadystatechange

            xhr.onload = function(){

                console.log(`onload 状态码${xhr.readyState}`);

                console.log(`这是onload函数请求的文本:${this.responseText}`);

            }

            //当state状态发生改变时回调一次后面的匿名函数

            xhr.onreadystatechange = function(){

                console.log(`onreadystatechange 状态码${xhr.readyState}`);

                console.log(`这是onreadychange函数请求的文本:${this.responseText}`);

            }

            xhr.send();

            }

        </script>

    </body>

</html>

console：

onreadystatechange()的定义是只要返回的状态码只要变化时就回调一次函数，而onload只有状态码为4时才能回调一次函数。

这边提下onprogress()，也就是当状态码为3时，会执行这个函数。

当服务器正常的话基本上都会返回readyState 状态码0~4，但是不一定请求得到数据，所以有个http状态码来判断。

            xhr.onreadystatechange = function(){

                if (xhr.readyState == 4 && xhr.status == 200)

                {

                    console.log(`请求成功并返回数据${this.responseText}`);

                }

            }

在onload（）里面也是一样，这里的逻辑根据情况来写。

<!DOCTYPE html>

<html>

    <head>

        <meta charset="UTF-8">

        <title></title>

    </head>

<button id="btn">请求数据</button>

<p id="c"></p>

<body>

        <!-- open(type, url/file,async) -->

        <script type="text/javascript">

            let btnRequest = document.getElementById('btn');

            btnRequest.addEventListener('click', load, false);

            function load() {

            let xhr = new XMLHttpRequest();

            xhr.open('GET', 'ajaxTest.txt',true);

            //两种方式请求 onload / onreadystatechange

//            xhr.onload = function(){

//                if (xhr.status == 200)

//                {

//                    console.log(`请求成功并返回数据${this.responseText}`);

//                }

//                else{

//                    console.log(`请求不成功`);

//                }

////                console.log(`onload 状态码${xhr.readyState}`);

////                console.log(`这是onload函数请求的文本:${this.responseText}`);

//            }

            //当state状态发生改变时回调一次后面的匿名函数

            xhr.onreadystatechange = function(){

                if (xhr.readyState == 4 && xhr.status == 200)

                {

                    let p = document.createElement("p");

                    p.innerHTML = this.responseText;

                    document.body.appendChild(p);

                    console.log(`请求成功并返回数据${this.responseText}`);

                }

            }

            xhr.send();

            }

        </script>

    </body>

</html>



												


											
ajax中的onload和readychange区别的更多相关文章
	

    
								
  1. jquery中的$(document).ready()、JavaScript中的window.onload()以及body中的onload()、DomContentLoaded()区别
		
    $().ready().$(handler).$(document).ready(handler)均不是原生JS中的,都是jQuery中封装的方法.这些事件在当页面的dom节点加载完毕后就执行,无需等 ...
    
		
    2. 
						
  2. Ajax中POST和GET的区别
		
    Get和Post都是向服务器发送的一种请求,只是发送机制不同. 1. GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给WEB服务器.当然在Ajax请求中,这种 ...
    
		
    3. 
						
  3. AJAX  中JSON 和JSONP 的区别  以及请求原理
		
    AJAX 跨域请求 - JSONP获取JSON数据 博客分类: Javascript /Jquery / Bootstrap / Web   Asynchronous JavaScript and X ...
    
		
    4. 
						
  4. Ajax中post与get的区别
		
    get和post都是向服务器发送一种请求,只是发送机制不同 . 1. GET可以通过在请求URL上添加请求参数, 而POST请求则是作为HTTP消息的实体内容发送给WEB服务器. 2. get方式请求 ...
    
		
    5. 
						
  5. Ajax中GET和POST的区别
		
    Get方式: 用get方式可传送简单数据,但大小一般限制在1KB下,数据追加到url中发送(http的header传送),也就是说,浏览器将各个表单字段元素及其数据按照URL参数的格式附加在请求行中的 ...
    
		
    6. 
						
  6. Jquery的Ajax中contentType和dataType的区别
		
    $.ajax({ type: httpMethod, cache:false, async:false, contentType: "application/json; charset=ut ...
    
		
    7. 
						
  7. Jquery的Ajax中contentType和dataType的区别（转载）
		
    上代码 $.ajax({ type: httpMethod, cache: false, contentType: "application/json; charset=utf-8" ...
    
		
    8. 
						
  8. jQuery的ready()事件与js中的onload事件的区别
		
    出处:http://blog.csdn.net/yuanmei1986/article/details/50781453
    
		
    9. 
						
  9. Ajax中异步与同步的区别
		
    同步可以解决,只有前一个请求结束后,当前请求才会发起.
    
		
    10. 
		

	


随机推荐
	

    
									
  1. ajax请求 Provisional headers are show
			
    请求被阻塞就会导致Provisional headers are show 我的原因是因为数据库 修改操作未提交导致表 锁住 . 后台操作该表超时
    
			
    2. 
						
  2. Jmeter+ InfluxDB+Grafana安装配置
			
    前置条件: 系统:windows jmeter:5.1 InfluxDB安装 下载InfluxDB-v1.7.9和Chronograf-v1.7.14(InfluxDB的可视化web端). 下载完成之 ...
    
			
    3. 
						
  3. 破解Xshell6强制升级
			
    一.背景今天打开xshell时,弹出提示,“要继续使用此程序,您必须应用最新的更新或使用新版本”(如下图) 这是让我强制升级啊,点了确定按钮却提示我已经是最新版了 反正点了半天xshell也没打开.后 ...
    
			
    4. 
						
  4. 19-python基础-进制之间的转换
			
    二进制-八进制-十进制-十六进制相互转换 1.十进制转为其他进制 # (1)十进制转二进制 a = 8 bin(a) --->>'0b1000' # (2)十进制转八进制 oct(a) - ...
    
			
    5. 
						
  5. sudo: unable to resolve host 枝桠
			
    Ubuntu环境, 主机名字叫枝桠(机器的hostname), 每次执行sudo 就出现这个警告讯息: 虽然sudo 还是可以正常执行, 所以就直接从/etc/hosts 设定, 让枝桠(hostna ...
    
			
    6. 
						
  6. # Python第十节 传参
			
    Python第十节 传参 一. 变量和变量名 首先说明变量名和变量的一点差异 例如: var = [1, 2, 3] `var = "Google" 调用变量var的时候, 既可以 ...
    
			
    7. 
						
  7. 使用vue.js开发小程序
			
    写在前面 刚刚开源的mpvue引起了不少前端er们的注意,下图是一个简单的对比. 话不多说,我们现在感受一下如何使用mpvue开发小程序.(以下内容参照mpvue文档完成). 开发环境 node np ...
    
			
    8. 
						
  8. javafx将数据库内容输出到tableview表格
			
    一 .创建Fxml文件,用Javafx Scene Builder 编辑页面,创建tableview(表格)和tablecolum(表格中的列),并为其设置fxid: 二.生成fxml文件的控制类:  ...
    
			
    9. 
						
  9. 【牛客网-剑指offer】斐波拉契数列
			
    题目: 大家都知道斐波那契数列,现在要求输入一个整数n,请你输出斐波那契数列的第n项(从0开始,第0项为0).n<=39 知识点: 一列数:从1开始,前两项为1,从第三项开始每一项等于前两项之和 ...
    
			
    10. 
						
  10. NOPI Excel 数据导入到数据库
			
    /// <summary> /// 上传excel文件 并将文件数据导入到数据库 /// </summary> /// <param name="file&qu ...
    
			
    11.