Ajax及其应用

guo-jiaojiao 2023-03-28 原文

Ajax 工作原理

Ajax

Ajax 是前后端异步交互的工具，异步更新，ajax 包含 XMLHttpRequests 对象（异步地与服务器交换数据，AJAX 核心）
JavaScript/DOM（信息显示/交互）
CSS（给数据定义样式）
XML 或 JSON（作为转换数据的格式）

工作原理
具体操作流程

首先通过 PHP 页面将数据库中的数据取出
取出后转成 json 格式的字符串，后利用 ajax 把字符串返还给前端
再利用 json.parse 解析通过循环添加到页面上
反之，前端的数据可以利用 ajax 提交到后台
但后台没有办法直接将这些数据插入到数据库中，所以要先提交到 PHP 页面上
最后再由 PHP 将数据插入到数据库中

实现 Ajax 基本步骤

创建 XMLHttpRequest 对象,即创建一个异步调用对象.

const xhr=new XMLHttpRequest();

创建一个新的 HTTP 请求,并指定该 HTTP 请求的方法、URL 及验证信息.

xhr.open(method,url,flag,name,password)

设置响应 HTTP 请求状态变化的函数.

xhr.onreadystatechange=function(){//设置响应http请求状态变化的事件
console.log("请求过程",xhr.readyState);
if(xhr.readyState==4){//判断异步调用是否成功，若成功开始局部更新数据
console.log("状态码为：",xhr.status);
if(xhr.status==200){
	console.log("异步调用返回的数据为：",xhr.responseText);
}else{//若果异步调用未成功，弹出警告框，并显示错误代码
alert("erro:HTTP状态码为：",xhr.status);
}

}

}

发送 HTTP 请求.

xhr.send()

获取异步调用返回的数据.
使用 JavaScript 和 DOM 实现局部刷新.

XMLHttpRequests 对象

无刷新更新页面

属性

属性名称	说明
onreadystatechange	设置回调函数，(作为 readyStates 属性值改变时的事件处理程序)用于指定状态改变时所触发的事件处理器
readyState	用于获取请求状态的属性：0-未初始化；1-正在加载（已初始化）；2-已加载（请求发送完成）；3-交互中（开始读取响应）；4-完成（读取响应结束）
status	用于描述当前请求的 HTTP 状态码的属性。（仅当 readyState 的值为 3 或 4 时，status 属性才可用）常用值举例：200——正确返回；404——找不到访问对象
statusText	用于描述 HTTP 状态的代码文本。（仅当 readyState 的值为 3 或 4 时，statusText 属性才可用）
responseText	以文本形式获取响应值。当 readyState 值为 0,1,2 时，responseText 为空字符串；当 readyState 值为 3 时，responseText 为还未完成的响应信息；当 readyState 值为 4 时，responseText 为响应信息。
responseXML	以 XML 形式获取响应值，并且解析为 DOM 对象返回。用于当接收到完整的 HTTP 响应时（readyState 值为 4 时）描述 XML 响应，若 readyState 的值不为 4.它取值为 null

方法

方法	具体功能
open("method","URL",["asyncFlag"],["userName"],["password"])	建立对服务器的调用。参数可以是 GET、POST、PUT 或 DELET[^1]:rest 动词规范：GET（查询）：获取资源；POST（创建）：创建资源；PUT（修改）：更新资源；DELET（删除）：删除资源。URL 参数是相对 URL 或绝对 URL。剩余三个参数（可选择）分别是：是否异步（默认异步，true），用户名，密码
send(content)	向服务器发送请求。如果请求声明为异步，该方法将立即返回，否则将等到接收到响应为止
abort()	停止当前请求
setRequestsHeader("header","value")	把指定首部设置为所提供的值。在设置任何首部之前必须先调用 open()。设置 header 并和请求一起发送（'POST'方法一定要）
getAllResponseHeaders()	以字符串形式返回完整的 HTTP 头部信息
getRequestHeader("header")	以字符串的形式返回指定的 HTTP 头部信息

事件

事件	触发条件
onreadystatechange	当 xhr.readyState 改变时触发；但 xhr.readyState 由非 0 值变为 0 时不触发。
onloadstart	调用 xhr.send()方法后立即触发，若 xhr.send()未被调用则不会触发此事件。
onprogress	xhr.upload.onprogress 在上传阶段（即 xhr.send()之后，xhr.readyState=2 之前）触发，每 50ms 触发一次；xhr.onprogress 在下载阶段（即 xhr.readyState=3 时）触发，每 50ms 触发一次
onload	当请求完成时触发，此时 xhr.readyState=4
onloadend	当请求结束（包括请求成功和请求失败）时触发
onabort	当调用 xhr.abort()后触发
ontimeout	xhr.timeout 不等于 0，由请求开始即 onloadstart 开始算起，当达到 xhr.timeout 所设置时间请求还未结束即 onloadend，则触发此事件
onerror	在请求过程中，若发生 Network error 则会触发此事件（若发生 Network error 时，上传还没有结束，则会先触发 xhr.upload.onerror，再触发 xhr.onerror ；若发生 Network error 时，上传已经结束，则只会触发 xhr.onerror ）。注意，只有发生了网络层级别的异常才会触发此事件，对于应用层级别的异常，如响应返回的 xhr.statusCode 是 4xx 时，并不属于 Network error ，所以不会触发 onerror 事件，而是会触发 onload 事件。

请求正常时，事件触发顺序

触发 xhr.onreadystatechange (之后每次 readyState 变化时，都会触发一次)
触发 xhr.onloadstart //上传阶段开始：
触发 xhr.upload.onloadstart
触发 xhr.upload.onprogress
触发 xhr.upload.onload
触发 xhr.upload.onloadend //上传结束，下载阶段开始：
触发 xhr.onprogress
触发 xhr.onload
触发 xhr.onloadend

发生 abort / timeout / error 时事件触发顺序

触发 xhr.onreadystatechange 事件，此时 readystate 为 4
如果上传阶段还没有结束，则依次触发以下事件：

xhr.upload.onprogress
xhr.upload.[onabort 或 ontimeout 或 onerror]
xhr.upload.onloadend

触发 xhr.onprogress 事件
触发 xhr.[onabort 或 ontimeout 或 onerror] 事件
触发 xhr.onloadend 事件

用法

（以 JSONPlaceHolder 为数据服务）
这个案例使用 XMLHttpRequest 对象发起了一个 GET 请求，
获取了 JSONPlaceholder 的用户信息数据，并将其解析为 JavaScript 对象，
然后生成了一个简单的用户列表，用于展示用户的姓名、邮箱和网站地址。

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <title>Ajax 示例</title>
  </head>
  <body>
    <ul id="users"></ul>
    <script>
        /*这个案例使用 XMLHttpRequest 对象发起了一个 GET 请求，
        获取了 JSONPlaceholder 的用户信息数据，并将其解析为 JavaScript 对象，
        然后生成了一个简单的用户列表，用于展示用户的姓名、邮箱和网站地址。*/
      const xhr = new XMLHttpRequest();
      xhr.open("GET", "https://jsonplaceholder.typicode.com/users");
      xhr.onload = function () {
        if (xhr.status === 200) {
          const users = JSON.parse(xhr.responseText);
          const listItems = users
            .map(
              (user) =>
                `<li><strong>${user.name}</strong> (${user.email}) - ${user.website}</li>`
            )
            .join("");
          document.getElementById("users").innerHTML = listItems;
        } else {
          console.error(xhr.statusText);
        }
      };
      xhr.onerror = function () {
        console.error("发生了错误");
      };
      xhr.send();
    </script>
  </body>
</html>

及其 Ajax text-align align style JavaScript

有关Ajax及其应用的更多相关文章

ruby - 将差异补丁应用于字符串/文件 - 2
对于具有离线功能的智能手机应用程序，我正在为Xml文件创建单向文本同步。我希望我的服务器将增量/差异(例如GNU差异补丁)发送到目标设备。这是计划:Time=0Server:hasversion_1ofXmlfile(~800kiB)Client:hasversion_1ofXmlfile(~800kiB)Time=1Server:hasversion_1andversion_2ofXmlfile(each~800kiB)computesdeltaoftheseversions(=patch)(~10kiB)sendspatchtoClient(~10kiBtransferred)Cl
ruby-on-rails - Rails 应用程序之间的通信 - 2
我构建了两个需要相互通信和发送文件的Rails应用程序。例如，一个Rails应用程序会发送请求以查看其他应用程序数据库中的表。然后另一个应用程序将呈现该表的json并将其发回。我还希望一个应用程序将存储在其公共(public)目录中的文本文件发送到另一个应用程序的公共(public)目录。我从来没有做过这样的事情，所以我什至不知道从哪里开始。任何帮助，将不胜感激。谢谢! 最佳答案无论Rails是什么，几乎所有Web应用程序都有您的要求，大多数现代Web应用程序都需要相互通信。但是有一个小小的理解需要你坚持下去，网站不应直接访问彼此
ruby - 无法运行 Rails 2.x 应用程序 - 2
我尝试运行2.x应用程序。我使用rvm并为此应用程序设置其他版本的ruby:$rvmuseree-1.8.7-head我尝试运行服务器，然后出现很多错误:$script/serverNOTE:Gem.source_indexisdeprecated,useSpecification.Itwillberemovedonorafter2011-11-01.Gem.source_indexcalledfrom/Users/serg/rails_projects_terminal/work_proj/spohelp/config/../vendor/rails/railties/lib/r
ruby-on-rails - Rails 应用程序中的 Rails : How are you using application_controller. rb 是新手吗？ - 2
刚入门rails，开始慢慢理解。有人可以解释或给我一些关于在application_controller中编码的好处或时间和原因的想法吗？有哪些用例。您如何为Rails应用程序使用应用程序Controller？我不想在那里放太多代码，因为据我了解，每个请求都会调用此Controller。这是真的？最佳答案 ApplicationController实际上是您应用程序中的每个其他Controller都将从中继承的类(尽管这不是强制性的)。我同意不要用太多代码弄乱它并保持干净整洁的态度，尽管在某些情况下ApplicationContr
ruby-on-rails - 如何在我的 Rails 应用程序 View 中打印 ruby 变量的内容？ - 2
我是一个Rails初学者，但我想从我的RailsView(html.haml文件)中查看Ruby变量的内容。我试图在ruby中打印出变量(认为它会在终端中出现)，但没有得到任何结果。有什么建议吗？我知道Rails调试器，但更喜欢使用inspect来打印我的变量。最佳答案您可以在View中使用puts方法将信息输出到服务器控制台。您应该能够在View中的任何位置使用Haml执行以下操作:-puts@my_variable.inspect 关于ruby-on-rails-如何在我的R
jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2
rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送
ruby-on-rails - 如何在 Gem 中获取 Rails 应用程序的根目录 - 2
是否可以在应用程序中包含的gem代码中知道应用程序的Rails文件系统根目录？这是gem来源的示例:moduleMyGemdefself.included(base)putsRails.root#returnnilendendActionController::Base.send:include,MyGem谢谢，抱歉我的英语不好最佳答案我发现解决类似问题的解决方案是使用railtie初始化程序包含我的模块。所以，在你的/lib/mygem/railtie.rbmoduleMyGemclassRailtie使用此代码，您的模块将在
世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD
叮咚买菜基于 Apache Doris 统一 OLAP 引擎的应用实践 - 2
导读：随着叮咚买菜业务的发展，不同的业务场景对数据分析提出了不同的需求，他们希望引入一款实时OLAP数据库，构建一个灵活的多维实时查询和分析的平台，统一数据的接入和查询方案，解决各业务线对数据高效实时查询和精细化运营的需求。经过调研选型，最终引入ApacheDoris作为最终的OLAP分析引擎，Doris作为核心的OLAP引擎支持复杂地分析操作、提供多维的数据视图，在叮咚买菜数十个业务场景中广泛应用。作者｜叮咚买菜资深数据工程师韩青叮咚买菜创立于2017年5月，是一家专注美好食物的创业公司。叮咚买菜专注吃的事业，为满足更多人“想吃什么”而努力，通过美好食材的供应、美好滋味的开发以及美食品牌的孵
【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2
在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList()Obt

Ajax及其应用

Ajax 工作原理

XMLHttpRequests 对象

用法

有关Ajax及其应用的更多相关文章

随机推荐