先补个知识点：

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. 2015 ACM-ICPC 亚洲区上海站 A - An Easy Physics Problem (计算几何)
			
    题目链接:HDU 5572 Problem Description On an infinite smooth table, there's a big round fixed cylinder an ...
    
			
    2. 
						
  2. 运维 05 Shell基本命令
			
    Shell基本命令   前言 前面咱们已经成功安装了Linux系统--centos7,那么现在跟着超哥奔向Linux的大门. Linux命令行的组成结构 [root@oldboy_python ~]# ...
    
			
    3. 
						
  3. Java对象相等比较(Equals)
			
    以下代码显示如何实现equals()和hashCode()方法 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 ...
    
			
    4. 
						
  4. JSON工具类的构建(前端版本)
			
    前言 在前后端交互的选择上,之前一直采用的是模板引擎(因为我只负责后端). 而这次的一个算是作业吧,前后端都是我,所以就研究了一下JSON交互在java web的应用(主要是前端). 优缺点 因为我是 ...
    
			
    5. 
						
  5. px2rem-loader（Vue:移动端自适应，px自动转化）
			
    1.下载lib-flexible npm i lib-flexible --save 2.引入lib-flexible import 'lib-flexible/flexible' 3.设置meta标 ...
    
			
    6. 
						
  6. Python之字符串正则匹配
			
    需求: 正则表达式匹配某个文本模式,但是它找到的是模式的最长可能匹配(因为是贪婪匹配 ). 而你想修改它变成查找最短的可能匹配. import re text2 = 'Computer says &q ...
    
			
    7. 
						
  7. C语言printf函数
			
    #include<stdio.h> //int float double short char long int main() { //int printf(const char *for ...
    
			
    8. 
						
  8. C# 连接Excel，获取表格数据，获取多个sheet中的数据，获取多个sheet名
			
    /// <summary> /// 获取Excel内容. /// </summary> /// <param name="sheetName"> ...
    
			
    9. 
						
  9. JS window对象 返回下一个浏览的页面 forward()方法，加载 history 列表中的下一个 URL。
			
    返回下一个浏览的页面 forward()方法,加载 history 列表中的下一个 URL. 如果倒退之后,再想回到倒退之前浏览的页面,则可以使用forward()方法,代码如下: window.hi ...
    
			
    10. 
						
  10. centos7 实测 nagios 安装
			
    Nagios是一套开源的监控系统,可监控你的系统和网络.Nagios最新版本是Nagios Core 4.3.4,Nagios plugins 2.2.1.目前支持RHEL 7.x/6.x/5.x,  ...
    
			
    11.