先补个知识点：

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. C#关键字扫盲——Tuple(元组类) 、ValueTuple(值元组)
			
    原文:C#关键字扫盲--Tuple(元组类) .ValueTuple(值元组) 版权声明:本文为博主原创文章,随意转载. https://blog.csdn.net/Michel4Liu/articl ...
    
			
    2. 
						
  2. android中使用MediaRecoder录制声音
			
    package com.test.mediarecorder; import java.io.File; import android.media.MediaRecorder; import andr ...
    
			
    3. 
						
  3. Cas 4.2.7 OAuth+Rest 实现SSO
			
    关于Cas的认证原理.Rest的使用请参考前面的文章.本文重点阐述使用Rest接口登陆系统和其他单点登录系统打通遇到的问题,及解决问题的思路和过程.    一: 遇到的问题         使用Res ...
    
			
    4. 
						
  4. 如何在MySQL中删除表中指定列的唯一键？
			
    语法结构如下: alter table table_name drop  index column_name;
    
			
    5. 
						
  5. 2019计蒜之道初赛第3场-阿里巴巴协助征战SARS  费马小定理降幂
			
    题目链接:https://nanti.jisuanke.com/t/38352 发现规律之后就是算ans=2^(n-1)+4^(n-1).但是注意到n十分大是一个长度为1e5的数字.要想办法降幂. 我 ...
    
			
    6. 
						
  6. 获取请求url中的参数
			
    一.根据request获取参数 假设请求地址是: http://127.0.0.1:8020/books/?title=语文 那么后台的路由配置: re_path('books/$', views.B ...
    
			
    7. 
						
  7. hdu 3374 最大最小表示法 next
			
    题目大意: 就是求一个串的最大最小表示法的开始下标,然后求有多少个做大最小表示,输出格式为 最小表示下标 它的个数 最大表示下标 它的个数 基本思路: 最小最大表示法模板题,然后求一下循环节,很容易知 ...
    
			
    8. 
						
  8. spark算子之Aggregate
			
    Aggregate函数 一.源码定义 /** * Aggregate the elements of each partition, and then the results for all the  ...
    
			
    9. 
						
  9. push declined due to email privacy restrictions
			
    使用git push到Github网站的时候提示: push declined due to email privacy restrictions 原因 在Github设置里有一个隐私选项 Block ...
    
			
    10. 
						
  10. vs code的简单插件
			
    Auto Close Tag VSCode Color Info Mithril Emmet support for VS Code Open HTML in Default Browser open ...
    
			
    11.