先补个知识点：

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. bat 笔记
			
    cmd删除非空文件夹 rd+空格+/s/q+空格+d:\filedir for语句的基本用法 在批处理文件中: FOR %%variable IN (command1) DO command2 [co ...
    
			
    2. 
						
  2. cesium默认全屏按钮自定义
			
    cesium默认全屏按钮自定义 1  隐藏默认的svg 2  修改它默认的按钮边框,背景 3   修改它点击时的样式 代码如下: .cesium-viewer-fullscreenContainer  ...
    
			
    3. 
						
  3. 【react】---react中使用装饰器
			
    一.creact-react-app中使用装饰器 运行 npm run eject 可以让由create-react-app创建的项目的配置项暴露出来 此时,项目中多了一个config文件,并且各个配 ...
    
			
    4. 
						
  4. Springboot+mybatis+dbcp+mysql简单集成
			
    1.添加依赖 <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>m ...
    
			
    5. 
						
  5. Tomcat启动脚本（3）setclasspath.bat
			
    @echo off rem Licensed to the Apache Software Foundation (ASF) under one or more rem contributor lic ...
    
			
    6. 
						
  6. Laravel4 最佳学习代码以及资料推荐(转)
			
    https://github.com/andrew13/Laravel-4-Bootstrap-Starter-Site 充分展现了Laravel的强大之处 Laravel虽然上手难度会比其他框架大很 ...
    
			
    7. 
						
  7. webservice的使用-axis1-01
			
    1.搭建axis服务器 1.1 下载axis-bin-1_4.zip文件并解压 1.2 拷贝\axis-1_4\webapps目录下的axis到tomcat目录下的webapps目录下并启动 1.3  ...
    
			
    8. 
						
  8. [轉]User namespaces – available to play!
			
    User namespaces – available to play! Posted on May 10, 2012by s3hh Over the past few months, Eric Bi ...
    
			
    9. 
						
  9. CSS中的块级元素和行内元素
			
    根据CSS规范的规定,每一个网页元素都有一个display属性,用于确定该元素的类型,每一个元素都有默认的display属性值,比如div元素,它的默认display属性值为“block”,成为“块级 ...
    
			
    10. 
						
  10. Javascript权威指南——读书笔记
			
    一.JavaScript核心语法 1.字符串中接受RegExp参数的方法 (1)text.search(pattern)返回首次匹配成功的位置 (2)text.match(pattern)返回匹配组成 ...
    
			
    11.