ajax方法XHR.readyState五种状态与示例

最新推荐文章于 2022-09-29 14:29:05 发布
最新推荐文章于 2022-09-29 14:29:05 发布
阅读量146 收藏
点赞数
原文链接：http://www.cnblogs.com/yiyi17/p/10530183.html
版权

 

 

<!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>

　　

XHR.readyState == 状态（0，1，2，3，4）

0：请求未初始化，还没有调用 open()。

1：请求已经建立，但是还没有发送，还没有调用 send()。

2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。

3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。

4：响应已完成；您可以获取并使用服务器的响应了。

转载于:https://www.cnblogs.com/yiyi17/p/10530183.html

weixin_30567471
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
AJAX之四：XHR readyState
yi杯敬明天
01-09 497
  目录 AJAX - onreadystatechange 事件 使用回调函数 HTTP状态码分类 AJAX - onreadystatechange 事件 当发送一个请求后，客户端需要确定这个请求什么时候会完成，因此，XMLHttpRequest对象提供了 onreadystatechange 事件机制来捕获请求的状态，继而实现响应。 当请求被发送到服务器时，我们需要执行一些基于...
XHR readyState：深入解析与使用指南
最新发布
xyq2024的博客
07-07 422
readyState是XMLHttpRequest对象的一个只读属性，它代表了当前请求的状态。readyState的值是一个整数，它随着请求过程的不同阶段而变化。0（UNSENT）：请求未初始化。尚未调用open()方法。1（OPENED）：服务器连接已建立。已调用open()方法，但尚未调用send()方法。2（HEADERS_RECEIVED）：请求已接收。send()方法已被调用，且头部和状态已可获取。3（LOADING）：请求处理中。响应体正在下载中，此时部分数据可能已可用。
xhr.readyState就绪状态
weixin_30385925的博客
05-11 264
0：初始化，XMLHttpRequest对象还没有完成初始化 1：载入，XMLHttpRequest对象开始发送请求 2：载入完成，XMLHttpRequest对象的请求发送完成 3：解析，XMLHttpRequest对象开始读取服务器的响应 4：完成，XMLHttpRequest对象读取服务器响应结束 xhr.readyState属性值是0、1、2、3、4 转载于:https://ww...
xhr 详解
weixin_30687587的博客
07-19 187
XMLHttpRequest对象是当今所有AJAX和Web 2.0应用程序的技术基础。尽管软件经销商和开源社团现在都在提供各种AJAX框架以进一步简化XMLHttpRequest对象的使用；但是，我们仍然 很有必要理解这个对象的详细工作机制。　　一、 引言　　异步JavaScript与XML(AJAX) 是一个专用术语，用于实现在客户端脚本与服务器之间的数据交互过程。这一技术的优点在于，它向开发...
原生js封装的ajax方法示例
12-10
在Web开发中，Ajax（Asynchronous JavaScript and XML）是一种创建动态网页的技术，允许在不刷新整个页面的情况下，从服务器获取并更新部分网页内容。本文将详细介绍如何使用原生JavaScript封装一个简单的Ajax方法。...
JavaScript - XHR实现短信验证码注册登录完整示例：JavaScript - XHR.js和附件说明
11-02
JavaScript - XHR（XMLHttpRequest）是Web开发中的一个重要工具，用于在不刷新整个页面的情况下与服务器进行异步数据交换，这种技术通常被称为AJAX（Asynchronous JavaScript and XML），虽然现在XML已经不是数据...
ajax 三种实现方法实例代码
09-01
【Ajax的三种实现方法】 1. **Prototype实现** Prototype是一个JavaScript框架，它提供了一种简洁的方式来创建Ajax请求。在给出的实例中，`prototypeAjax`函数创建了一个Ajax.Request对象，指定了请求的URL、提交的...
jQuery AJAX中readyState与status的区别与联系
12-02
在Web开发中，AJAX（Asynchronous JavaScript and XML）是一种创建动态网页的技术，它允许页面在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。jQuery是广泛使用的JavaScript库，简化了AJAX操作。...
原生js jquery ajax请求以及jsonp的调用方法
12-12
Ajax，全称Asynchronous JavaScript and XML，是一种在无需重新加载整个网页的情况下，能够更新部分网页内容的技术。它通过JavaScript语言与XMLHttpRequest对象的结合，实现了页面的异步更新，大大提升了用户体验。...
关于xmlhttprequest的readystate属性的五个状态
dielianhuan1546的博客
09-03 803
昨天做了一个利用ajax实现页面无刷新的从服务器端获得时间的例子，当时对于xmlhttprequest对象的readystate的后三个状态不是很清楚，想了半天，也不明白！后面在程序的不同地方中用alert(xmlhttp.readystate)查看readystate值的变化，并且请教朋友之后，才弄明白其中的几个问题：创建xmlhttprequest对象之后没有调用open之前r...
关于XMLHttpRequest的xhr.readyState和 xhr.status 的简单使用
qq_33404590的博客
09-29 1442
xhr.readyState 和 xhr.status
如何友好的利用XHR的状态，实现前后端的桥梁
禅思院
01-21 2761
欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器进行了一些功能拓展与语法支持，除了标准的Markdown编辑器功能，我们增加了如下几点新功能，帮助你用它写博客： 全新的界面设计 ，将会带来全新的写作体...
Ajax六部曲！！！
qq_48846376的博客
08-04 148
个人总结加拓展AJAX: 其实Ajax就记住六部就行了： 1：浏览器 2：Ajax对象 3：Ajax.open（method,url,true） {发送请求，看是否异步或同步} 4：Ajax.send() 5:onreadystatechage:监听 6：statu200 {可能有这几种结果：403 503 404普遍404} 下面我举个我个人觉得通用的公式列子： function ajaxFun(callback){ var xhr=null; if（window.xmlHttpReque
红宝书笔记整理-网络请求（XMLHttprequest）
weixin_45582888的博客
10-11 311
一、XMLHttpRequest对象 ​ XHR对象----通过XMLHttpRequest构造函数原生支持的XHR对象 XHR主要是为服务器请求和获取响应提供合理接口 此接口可以异步的从服务器端获取数据，实现浏览器端不刷新也能获取数据 1、使用XHR （1）使用xhr 对象前要使用open（）方法 open()方法不会实际发送请求，只是为发送请求做好准备。 ​ open()的三个参数 请求类型 请求的url 请求是否异步的布尔值（false—同步
XMLHttpRequest
汤庆
02-10 3831
一、简介         Ajax (Asynchronous Javascript And Xml )是指一种创建交互式网页应用的网页开发技术，其中，Ajax的核心是JavaScript对象XMLHttpRequest(以下简称XHR)，XHR是一种支持异步请求数据的技术。      我们通常将Ajax等同于XMLHttpRequest，但细究起来它们两个是属于不同维度的2个概念。ajax是...
2-3月总结
weixin_43861707的博客
03-08 133
第一周： 对前后端交互，cookie，AJAX，跨域请求，promise 回调函数进行了学习和理解。 重点掌握 前后端交互的AJAX请求。 AJAX核心代码： // 1. 创建 ajax 对象 let xhr = new XMLHttpRequest() // 2. 配置请求信息 xhr.open(‘GET’, ‘./test.php’, true) // 3. 发送请求 xhr.send()...
解释代码<script> // 当输入框内容改变时触发 document.getElementById("username-input").addEventListener("input", function() { var username = this.value; // 发送Ajax请求到后端，检测用户名是否存在 var xhr = new XMLHttpRequest(); xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { var response = JSON.parse(xhr.responseText); var errorDiv = document.getElementById("username-error"); if (response.exists) { errorDiv.textContent = "用户名已存在"; } else { errorDiv.textContent = ""; } } }; xhr.open("POST", "/checkUsernameExistence"); // 后端检测用户名存在的接口 xhr.setRequestHeader("Content-Type", "application/json"); xhr.send(JSON.stringify({ username: username })); }); </script>
07-13
这段代码是一个 JavaScript 脚本，用于在输入框内容改变时触发事件，并发送 Ajax 请求到后端来检测用户名是否存在。 让我们逐行解释代码： 1. `document.getElementById("username-input")` 获取了一个具有 id `"username-input"` 的 HTML 元素，这里是一个输入框，用于输入用户名。 2. `addEventListener("input", function() { ... })` 给输入框添加了一个事件监听器，当输入框内容改变时触发。 3. `var username = this.value;` 获取到当前输入框的值，即用户输入的用户名。 4. 创建了一个 XMLHttpRequest 对象 `xhr`，用于发送 HTTP 请求到后端。 5. `xhr.onreadystatechange` 是一个事件处理函数，当 `readyState` 属性发生变化时被触发。在这个代码中，我们检查 `xhr.readyState` 的值是否为 4（表示请求已完成），以及 `xhr.status` 的值是否为 200（表示请求成功）。 6. `JSON.parse(xhr.responseText)` 解析后端返回的响应文本为 JSON 对象，存储在 `response` 变量中。 7. `var errorDiv = document.getElementById("username-error");` 获取具有 id `"username-error"` 的 HTML 元素，这里是一个用于显示错误信息的 `<div>` 元素。 8. 根据后端返回的 JSON 对象中的 `exists` 属性，判断用户名是否已存在。如果存在，则将错误提示信息设置为 `"用户名已存在"`，否则将错误提示信息清空。 9. `xhr.open("POST", "/checkUsernameExistence");` 设置请求的方法为 POST，并指定后端检测用户名存在的接口路径为 `"/checkUsernameExistence"`。 10. `xhr.setRequestHeader("Content-Type", "application/json");` 设置请求的内容类型为 JSON。 11. `xhr.send(JSON.stringify({ username: username }));` 发送包含用户名的 JSON 数据到后端。 这段代码的作用是实时检测用户输入的用户名是否已存在，并根据结果更新页面上的错误提示信息。如果用户名已存在，则在具有 id `"username-error"` 的 `<div>` 元素中显示红色的 `"用户名已存在"` 提示信息，否则清空错误提示信息。 请注意，这段代码仅为示例，您需要根据实际情况进行调整和完善。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值