ajax onload怎么用,Ajax中onload和onreadystatechange两种请求方式的区别

一. onreadystatechange

1. XMLHttpRequest对象有一个属性readyState，将其(xhr.readyState)打印后发现。进入onreadystatechange请求方式中时，可以打印其状态为2，状态为3，状态为4。

请求纯文本

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

btn.addEventListener("click",loadText);

function loadText(){

let xhr = new XMLHttpRequest();

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

xhr.onreadystatechange = function(){

console.log("READYSTATE"+ xhr.readyState);

console.log(this.responseText);

}

xhr.send();

}

2. readyState状态码和HTTP状态码

如果在上方代码中的open方法下，打印readyState属性，可得到状态码1

3. 可以利用网络请求码和readyState状态码进行判断

当网络请求码为200(服务器成功返回网页)，readyState状态码为4时(请求已完成，响应已就绪)，方可打印请求的数据。如图，在readyState状态码3的情况下不会再打印请求返回的数据。

function loadText(){

let xhr = new XMLHttpRequest();

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

console.log("READYSTATE"+ xhr.readyState);

xhr.onreadystatechange = function(){

console.log("READYSTATE"+ xhr.readyState);

if(this.status == 200 && this.readyState == 4){

console.log(this.responseText);

}else if(this.status == 404){

console.log("网页不存在");

}

}

xhr.send();

}

4. 如果此时将open中的路径改为一个错误路径，会产生如下效果

二. onload

1. 进入onload之后，只出现了状态码4。也就是说，只有处于状态码4，请求已完成，响应已就绪的情况下，才会进入onload。只要进入onload请求中，一定是已经到4这个状态了。

function loadText(){

let xhr = new XMLHttpRequest();

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

console.log("READYSTATE"+ xhr.readyState);

//两种请求方式onload和onreadystatechange

xhr.onload = function(){

console.log("READYSTATE"+ xhr.readyState);

console.log(this.responseText);

}

xhr.send();

}

2. 此时如果修改open中的路径为错误路径的话，会出现如下状况。仍然会打印1和4，证明已经进入onload请求状态。这里报错的原因是，HTTP状态码不是200。

vv

3. 实现页面尚未加载完成使，加载页面的实现(eg：进度条或转圈)。可用onprogress方法，打印readyState出现状态3

function loadText(){

let xhr = new XMLHttpRequest();

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

console.log("READYSTATE"+ xhr.readyState);

//两种请求方式onload和onreadystatechange

xhr.onprogress = function(){

console.log("测试加载状态READYSTATE"+ xhr.readyState);

}

xhr.onload = function(){

console.log("READYSTATE"+ xhr.readyState);

console.log(this.responseText);

}

xhr.send();

}

三. 将请求到的纯文本附在dom中

xhr.onload = function(){

document.getElementById('text').innerHTML = this.responseText;

}