ajax方法XHR.readyState五种状态与示例
XHR.readyState == 状态(0,1,2,3,4),而且状态也是不可逆的:
0:请求未初始化,还没有调用 open()。
1:请求已经建立,但是还没有发送,还没有调用 send()。
2:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。
3:请求在处理中;通常响应中已有部分数据可用了,没有全部完成。
4:响应已完成;您可以获取并使用服务器的响应了。
下面是一个demo:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> *{ margin: 0; padding: 0; } #url{ width: 1000px; height: 30px; outline: none; border: 1px solid #000; border-radius: 5px; margin-left: 10px; } #btn{ width: 90px; height: 30px; outline: none; border: 1px solid #000; border-radius: 5px; cursor: pointer; } </style> </head> <body> <div> <label for="url"> URL:<input type="text" placeholder="请输入要检测的URL" id="url"> </label> </div> <br> <button class="btn" id="btn">点击测试</button> <div id="content"> </div> </body> <script> var str = '' document.getElementById('btn').onclick = function(){ var xhr = new XMLHttpRequest(); var url = document.getElementById('url').value; if (!url) { alert('请输入URL'); return false; } // console.log(url) console.log(xhr.status, xhr.readyState) // 0,0 xhr.onreadystatechange=function(){ // console.log(xhr) if(xhr.status === 200){ console.log(xhr.status, xhr.readyState)//200,2;200,3;200,4 str += `status:${xhr.status}` if(xhr.readyState === 4){ // console.log(xhr.getAllResponseHeaders()) str += xhr.getAllResponseHeaders() + '<br/>' } } document.getElementById('content').innerHTML = str; } xhr.open("GET",url,true); console.log(xhr.status, xhr.readyState)// 0,1 xhr.send(null) } </script> </html>
如果觉得文章不错,可以给小编发个红包给予鼓励.
你要觉得这篇文章比较好,记得点推荐!