先补个知识点：

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. 模板引擎的简单原理template
			
    ​ var templateStr = "我的名字叫<%=name%>我是一只小狗,今年<%=age%>岁."; var data = { name:'旺财 ...
    
			
    2. 
						
  2. jwt认证登录
			
    配置文件:#服务配置 server: port: 9002 #spring配置 spring: #应用配置 application: name: ynhrm-system #指定服务名 #数据库连接池 ...
    
			
    3. 
						
  3. 基于MFC的Media Player播放器制作的SetTimer函数介绍
			
    |   版权声明:本文为博主原创文章,未经博主允许不得转载. SetTimer是一种API函数,位于user32.dll中.你想每隔一段时间执行一件事的的时候,你可以使用它. 使用定时器的方法比 较简 ...
    
			
    4. 
						
  4. redis的快速机制与数据类型
			
    想一下 redis 的高并发和快速 单线程模型 - 避免了不必要的上下文切换和竞争条件(锁) Redis客户端对服务端的每次调用都经历了发送命令,执行命令,返回结果三个过程.其中执行命令阶段,由于Re ...
    
			
    5. 
						
  5. DB2连接
			
    ibm_db.connect 创建非持久连接. ibm_db.pconnect 创建持久连接. 在最初的Python脚本请求之后,持久的连接保持打开状态,这允许后续的Python请求重新使用连接. 后 ...
    
			
    6. 
						
  6. Emacs25.1之后UrlHttpError
			
    Emacs25.1之后UrlHttpError */--> pre.src {background-color: #002b36; color: #839496;} pre.src {backg ...
    
			
    7. 
						
  7. jumpserver注意事项以及报错处理
			
    需要注意下面亮点 在使用jumpserver过程中,有一步是系统用户推送,要推送成功,client(后端服务器)要满足以下条件: 后端服务器需要有python.sudo环境才能使用推送用户,批量命令等 ...
    
			
    8. 
						
  8. 【linux】记录一下遇到的各种问题
			
    1. 解决办法: pthread不是Linux系统的默认库,编译时加上-lpthread参数,以调用链接库 gcc -o 文件名.out 文件名.c -lpthread 输出的时候直接 ./文件名.o ...
    
			
    9. 
						
  9. 如何在有scoped不影响elementUI 的其他页面组件，进行单页面修改的几种方法。
			
    方式一:内联式css 内联式css , 优点:修改其他方便.缺点:造成页面臃肿,不利于后期维护. 方式二:外链css 外链css ,优点:对其他文件无影响,但会造成多个文件css  (缺点) @imp ...
    
			
    10. 
						
  10. Aspose.Words转换为PDF的时候字体丢失的问题解决
			
    系统中明明有字体的,Word中显示也正常,就是转换为PDF以后不正常,字体丢失,被替换成了等线字体 好一番研究,终于找到原因 ,原因是Windows\Fonts下的文件,有些只是虚拟的路径,真正的字体 ...
    
			
    11.