Ajax异步通信与XMLhttpRequest对象的属性方法及事件

这篇具有很好参考价值的文章主要介绍了Ajax异步通信与XMLhttpRequest对象的属性方法及事件。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

AJAX 的英文全称 Asynchronous JavaScript And XML,其中Asynchronous就是指的异步,这里异步指通过 AJAX 向服务器请求数据,在不刷新整个页面的情况下,更新页面上的部分内容。

Ajax异步通信与XMLhttpRequest对象的属性方法及事件,ajax,okhttp,前端,es6

通过使用Ajax,可以创建更动态和响应性的Web应用程序,因为它使得页面可以在后台与服务器进行数据交换,而无需打断用户的操作或重新加载整个页面。这种异步通信的能力使得网页可以在后台向服务器请求数据,然后根据这些数据更新页面的内容,从而提供更流畅和交互式的用户体验。

在使用Ajax时,常见的步骤包括创建XMLHttpRequest对象,发送请求到服务器,处理服务器响应并更新页面内容。现在主流的Ajax的JavaScript库和框架有jQuery、React、Vue等,简化了Ajax的使用并提供了更强大的功能和更方便的API。

XMLHttpRequest对象是用于在JavaScript中发起HTTP请求的核心对象。它具有一系列属性、方法和事件,可以控制HTTP请求的细节,以及在请求过程中的各种状态。以下是XMLHttpRequest对象的主要属性、方法和事件:

属性:

  1. onreadystatechange:表示每当readyState属性改变时调用的事件处理程序的函数。这个属性通常用于指定一个回调函数,以便在XMLHttpRequest对象的状态发生变化时执行特定的操作。

  2. readyState:表示XMLHttpRequest对象的状态,有以下数值:

    • 0: 未初始化 - 对象已创建,但尚未调用open()方法。
    • 1: 启动 - 已调用open()方法,但尚未调用send()方法。
    • 2: 发送 - 已调用send()方法,但尚未接收到响应。
    • 3: 接收 - 已接收到部分响应数据。
    • 4: 完成 - 已接收到所有响应数据。
  3. responseText:返回作为请求响应体接收的文本。如果请求未完成或失败,则该属性返回null。

  4. responseXML:返回作为请求响应体接收的XML文档对象(如果响应的内容类型是"text/xml"或"application/xml")。如果请求未完成或失败,则该属性返回null。

  5. status:返回HTTP状态代码(例如200表示成功,404表示未找到,等等)。

  6. statusText:返回HTTP状态消息(例如"OK"、"Not Found"等)。

方法:

  1. open(method, url, async, user, password):初始化请求。参数分别是HTTP方法、URL、是否异步、可选的用户名和密码。

  2. send(data):发送请求。可选地,可以传递数据作为请求体。

  3. setRequestHeader(header, value):设置HTTP请求头。

  4. abort():取消当前的HTTP请求。

事件:

  1. onreadystatechange:每当readyState属性发生变化时触发。

  2. onload:当请求成功完成时触发。

  3. onerror:当请求失败时触发。

  4. ontimeout:当请求超时时触发。

  5. onprogress:在接收响应期间触发,用于跟踪下载进度。

  6. onabort:当请求被取消时触发。

这些属性、方法和事件使得JavaScript可以控制HTTP请求的细节,并在请求过程中实时响应和处理各种状态。

下面是创建Ajax实例代码

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>AJAX 的使用</title>
    <script>
      window.onload = function () {
        if (window.XMLHttpRequest) {
          // Mozilla,Safari,IE7+ 等浏览器适用
          var httpRequest = new XMLHttpRequest();
        } else if (window.ActiveXObject) {
          // 兼容IE6及以下browser
          var httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
        }
        // 规定发送请求要求
        httpRequest.open(
          "GET",
          "https://jsonplaceholder.typicode.com/users",
          true
        );
        // 发送请求到服务器
        httpRequest.send();
        httpRequest.onreadystatechange = function () {
          console.log(httpRequest.readyState);
          console.log(httpRequest.status);
          if (httpRequest.readyState == 4 && httpRequest.status == 200) {
            // 请求成功
            document.getElementById("item").innerHTML = "请求成功";
          } else {
            // 请求失败
            document.getElementById("item").innerHTML = "请求失败";
          }
        };
      };
    </script>
  </head>
  <body>
    <div id="item"></div>
  </body>
</html>

我们打开live serve到游览器控制台,可以看到以下状态码

Ajax异步通信与XMLhttpRequest对象的属性方法及事件,ajax,okhttp,前端,es6

在控制台中输出的 200 是 HTTP 的响应状态码

其中status是XMLHttpRequest对象的一个属性,表示响应的HTTP状态码。

数字 2、3、4 是 readyState 的值,它的取值有以下几种:文章来源地址https://www.toymoban.com/news/detail-839898.html

  • 0 代表未初始化请求。
  • 1 代表已与服务器建立连接。
  • 2 代表请求被接受。
  • 3 代表请求中。
  • 4 代表请求完成。

到了这里,关于Ajax异步通信与XMLhttpRequest对象的属性方法及事件的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • JS 之 事件Event对象详解(属性、方法、自定义事件)

    一、Event对象 1、简介 ​ 事件 event 对象是指在浏览器中触发事件时,浏览器会自动创建一个 event 对象,其中存储了本次事件相关的信息,包括事件类型、事件目标、触发元素等等。浏览器创建完 event 对象之后,会自动将该对象作为参数传递给绑定的事件处理函数,我们可以

    2024年02月09日
    浏览(67)
  • 探索 XMLHttpRequest:网页与服务器的异步通信之道(下)

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年02月20日
    浏览(42)
  • 探索 XMLHttpRequest:网页与服务器的异步通信之道(上)

    🤍 前端开发工程师、技术日更博主、已过CET6 🍨 阿珊和她的猫_ CSDN 博客专家、23年度博客之星前端领域TOP1 🕠 牛客 高级专题作者、打造专栏《前端面试必备》 、《2024面试高频手撕题》 🍚 蓝桥云课 签约作者、上架课程《Vue.js 和 Egg.js 开发企业级健康管理项目》、《带你

    2024年02月21日
    浏览(42)
  • 【你也能从零基础学会网站开发】Web建站之javascript入门篇 浅谈JavaScript中的AJAX和XMLHttpRequest对象

    🚀 个人主页 极客小俊 ✍🏻 作者简介:程序猿、设计师、技术分享 🐋 希望大家多多支持, 我们一起学习和进步! 🏅 欢迎评论 ❤️点赞💬评论 📂收藏 📂加关注 什么是AJAX AJAX 其实就是 异步 JavaScript 及 XML(Asynchronous JavaScript and XML) AJAX 不是一种新的编程语言,而是一种

    2024年04月14日
    浏览(51)
  • 03 Web全栈 浏览器内置对象/事件/ajax

    浏览器是一个JS的运行时环境,它基于JS解析器的同时,增加了许多环境相关的内容,用一张图表示各个运行环境和JS解析器的关系如下: 我们把常见的,能够用JS这门语言控制的内容称为一个JS的运行环境,常见的运行环境又Nodejs,浏览器,小程序,一些物联网设备等等,所

    2024年02月11日
    浏览(47)
  • Ajax_4(进阶)同步异步+ 宏任务微任务 + Promise链 + async终极解决方案 +事件循环原理 + 综合案例

    01-同步代码和异步代码 什么是同步代码? 同步代码:逐行执行,需要原地等待结果后,才继续向下执行。 什么是异步代码? 调用后耗时,不阻塞代码继续执行,(不必原地等待),在将来完成后 触发一个 回调函数 。 代码阅读 目标:阅读并回答代码执行和打印的顺序 打印

    2024年02月13日
    浏览(51)
  • javascript二维数组(21)执行异步HTTP(Ajax)请求的方法($.get、$.post、$getJSON、$ajax)

    . g e t 、 .get、 . g e t 、 .post、 g e t J S O N 、 getJSON、 g e t J SON 、 ajax都是jQuery提供的用于执行异步HTTP(Ajax)请求的方法。每个方法都有其特定的用途和区别。 . g e t :这个方法使用 G E T 方式来进行异步请求。其语法结构为: .get:这个方法使用GET方式来进行异步请求。其语

    2024年02月07日
    浏览(52)
  • ajax请求——XMLHttpRequest请求

     个人练习笔记-----Ajax01 一、GET  https://v5.crmeb.net/api/groom/list/3?page=1limit=9  ------协议:// 域名 / 地址?参数 1.xhr.open(\\\"GET\\\",\\\"https://v5.crmeb.net/api/groom/list/3?page=1limit=9\\\");对应的参数从下图中所示中获取 2.xhr.setRequestHeader(\\\"Content-Type\\\",\\\"application/json\\\");//验证身份 xhr.setRequestHeader(\\\"Authori-Z

    2024年02月03日
    浏览(47)
  • ajax-XMLHttpRequest的基本使用

    能够知道如何使用 XMLHttpRequest 发起 Ajax 请求 能够知道如何封装自己的Ajax函数 能够使用 XMLHttpRequest Level2 中提供的新特性 能够知道 jQuery 中如何实现文件上传与loading效果 能够知道如何使用 axios 发起Ajax请求 XMLHttpRequest (简称 xhr )是浏览器提供的 Javascript 对象,通过它,可以

    2024年02月02日
    浏览(38)
  • XMLHttpRequest,AJAX,Promise,Axios及操作实战

    XMLHttpRequest,AJAX,Promise,Axios都是发送异步请求的工具,只是使用的场合和方式有所不同。都是一种用于创建快速动态网页的技术 1、我们点击淘宝首页的男装,进入男装页面的这个请求过程称之为“同步请求”。 2、请求提交之后,需要重新加载整个页面,即使当前的数据有部分

    2024年02月03日
    浏览(41)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包