ajax同步和异步的使用例子：ajax onload和onreadystatechange

ajax同步和异步的使用例子：ajax onload和onreadystatechange// console.log(xhr);var xhr=new XMLHttpRequest();function loadText(){// console.log("hello");// 创建XMlHttpRequest对象

<button id="button">请求纯文本</button>

<br>

<div id="show"></div>

---

document.getElementById('button').addEventListener('click' loadText);

function loadText(){

// console.log("hello");

// 创建XMlHttpRequest对象

var xhr=new XMLHttpRequest();

// console.log(xhr);

// open(type类型get/post url/file async异步)

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

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

// xhr.onprogress=function(){

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

// }

//两种方式请求 onload/onreadystatechange

// xhr.onload=function(){

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

// document.getElementById('show').innerHTML=this.responseText;

// console.log(this.responseText);

// }

xhr.onreadystatechange=function(){

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

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

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

console.log(this.responseText);

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

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

document.getElementById('show').innerHTML="页面不存在";

}

}

//发送请求

xhr.send();

}

常用的状态码：

readyState状态码

0：请求未初始化

1：服务器连接已建立

2：请求已接收

3：请求处理中

4：请求已完成，且相应已就绪

http状态码

200：服务器成功返回网页

404：请求的网页不存在

503：服务器暂时不可用

304：服务端已经执行了GET，但文件未变化

310：重定向过多

302：临时跳转

301：永久定向