【AJAX】请求原理 同步和异步

2023-10-28

一、.AJAX概念

本质:使用JS提供的异步对象,在页面不刷新的情况下,发送http请求,得到http响应,实现页面的局部刷新,涉及到的技术HTML JS HTTP/HTTPS 接口 XML JSON

二、完整的WEB请求原理

比如:我们在网页中输入www.jd.com,过了2秒后网页成功显示出来了,那么这2秒发生了什么?

(1)用户输入了域名www.jd.com,想要访问京东的服务器

       注:计算机间的互相查找是通过IP地址来访问的,计算机不认识域名,域名只是为了方便人的记忆与使用的。

(2)客户端向DNS(域名解析)服务器发送请求,请求将域名转换成IP地址

(3)DNS将转换后的IP地址响应给客户端

(4)客户端拿到IP地址后向京东服务器发送请求

(5)京东服务器处理客户发来的请求,请求过程中可能会涉及到数据库 文件系统 其他服务器的交互

(6)京东服务器把响应的信息返回给客户端,客户端浏览器渲染页面给用户看

 

三、同步与异步

同步:在一个任务进行的过程中,不能开启其他的任务

1.同步访问:浏览器在向服务器发送请求的时候,只能等待服务器给出的响应,在这个过程中,浏览器不能做其他事情

客户端浏览器与服务器: “你执行时我等待,我执行时你等待”

2.同步访问出现的场合

  • 浏览器地址栏输入URL访问页面
  • a 标签跳转
  • form 提交请求

异步:在一个任务开启的过程中,可以执行其他操作

 1.异步访问:浏览器在向服务器发送请求时,用户可以在页面上做其他操作

     客户端浏览器和服务器 同时执行各自的代码 不同的任务

2.异步访问出现的场合

  • 注册用户名重复的验证
  • 聊天室同时打开多个聊天窗口,其中一个窗口操作的时候可以看到另外的窗口发来的消息

用生活的例子解释同步与异步:

场景1:顾客打电话问空桌,酒店让用户先别挂电话,查询一圈后告诉顾客结果(同步)

场景2:顾客打电话问空桌,酒店让用户先挂电话,查询一圈后给顾客回电告知结果—酒店在查询时顾客没有在等电话,而是在做自己的事情(异步)

 

四、客户端提交给服务器的两种方式

方式1:表单提交(同步,页面整体刷新)

<form action=" /user/login" method="get"></form>

客户端发送请求后开始等待

服务器接收请求开始处理,最后返回响应消息

客户端接收到响应消息,销毁掉页面中已有的内容,跳转到新的页面

 

 

方式2:AJAX异步提交(异步执行,页面局部刷新)

new XMLHttpRequest().open('get', '/user/login')

客户端提交请求后不会等待,继续执行其他业务

服务器接收到请求后开始处理,最后返回响应消息

客户端接收到响应消息,使用回调函数处理响应消息,修改页面中的部分内容

 

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

【AJAX】请求原理 同步和异步 的相关文章

  • Pjax动画

    我终于让 pjax 工作了 但我还有另一个问题 如何添加一些 jquery 动画 如淡出 幻灯片旧内容和淡入 幻灯片新内容 默认情况下 pjax 只是更改内容 没有任何好看的效果 任何帮助将非常感激 此致 基本上 你有一堆事件 https
  • JSONP 使用 JQuery 从 HTTPS 协议获取 JSON

    我正在尝试获取从 https 安全站点发送的 JSON 客户端希望不要使用任何服务器端语言 全部都是 Javascript 我读到 当使用 Jquery 中的 ajax 函数时 我必须使用 JSONP 才能从安全站点加载 JSON 我的第一
  • ASP.Net MVC AJAX 链接不起作用

    为了实现 AJAX 登录 我在我的页面上有这个链接 附近有一个 id 为 lll 的 div 当我单击该链接时 我得到了无聊的确认 只是出于调试目的而添加 没有它的行为是相同的 但然后什么也没有发生 没有请求到达服务器 因为我在 LogOn
  • 如何在 HTML / Javascript 页面中插入 PHP 下拉列表

    好吧 这是我的第二篇文章 请接受我是一个完全的新手 愿意学习 花了很多时间在各个网站上寻找答案 而且我几乎已经到达了我需要到达的地方 至少在这一点上 我有一个网页 其中有许多 javascript 函数 这些函数一起使用 google 地图
  • 当复选框条件更改时,如何使用ajax更新mysql数据库?

    我有一个在客户端按行显示的文章表 每篇文章都有一个唯一的 ID 并包含一个复选框以指示该文章是否被选中为收藏夹 如果它是最喜欢的 则该复选框已被选中 如果没有 则未选中 现在 如果特定于每一行的复选框条件发生变化 我需要 js 或 jque
  • Java Web 技术中的 AJAX 自动完成文本框(JSP 和 servlet)

    我需要您的帮助 了解如何使用 Java Web 技术 JSP Servlet 和 AJAX 使 HTML 输入文本元素像 Google 的 AJAX 搜索引擎 输入文本元素一样工作 下拉列表中的数据将来自数据库表 例如分别是 MySQL 或
  • JQuery:将 FormData 和 csrf 令牌一起发布

    Is the data 下面的行正确吗 我想将表单数据和 csrf 令牌发布到 Django 视图函数 file upload on change function var currentpath window location pathn
  • 如何使用 jQuery Ajax 将 PHP 数组值传递到另一个文件?

    这是我的代码
  • 如何取消 AjaxForm 上的提交

    我正在使用 jQuery 插件 ajax 形式 我尝试实现这样的东西 MyFormID ajaxForm dataType json resetForm true beforeSubmit function validateData ret
  • 使用 AJAX 和 JQuery 按设定的时间间隔刷新 Rails 部分

    I have a page in my rails application that looks like 现在 我有另一个用 python 编码的人工智能应用程序 它处理视频 显示在 Rails 应用程序页面的左侧 并使用捕获的车辆及其相
  • 使用异步调用时如何从 javascript 更新元刷新?

    我有一个系统 它使用元刷新来注销页面 该系统会在空闲用户后进行清理 不用担心 服务器也会导致会话超时 我开始通过 ajax 进行一些操作 不是真正的 xml 但这不是重点 我可以运行从异步请求返回的javascript 所以我想知道是否可以
  • Jquery ajax请求,等待最新请求完成

    我有一个文本框 每次用户输入一个字母时 我都会使用 ajax 请求进行搜索 并为用户 实时 显示结果 通常 当用户键入字母时 发出请求所需的时间比用户输入新字母所需的时间更长 因此在第一个请求结束之前发出新请求 如果第一个请求能够在我执行下
  • AJAX 是如何工作的?

    AJAX的本质是什么 例如 我想在我的页面上有一个链接 这样当用户单击此链接时 一些信息就会发送到我的服务器 而无需重新加载当前页面 那是阿贾克斯吗 我能够通过使用 isoframe 来实现这种行为 更详细地说 我在一个小 isoframe
  • 使用他们的 API 创建一个基本的 MailChimp 注册表单

    我是 MailChimp 的新手 需要一些帮助 通过他们的基本时事通讯注册表单 您只需将一些预先打包的 HTML 嵌入到您的页面中即可 然而 这样做的问题是 单击 提交 会重定向到 MailChimp 页面 我不想重定向到 MailChim
  • 未捕获的类型错误:未定义不是函数

    我收到消息Uncaught TypeError Undefined is not a function当我尝试调用家庭控制器中的方法时 也许关于我为什么收到此消息的建议 findIdpActivities function pernr ca
  • 预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 Access-Control-Allow-Origin

    当我尝试加载网页时 出现以下错误 预检响应中的 Access Control Allow Headers 不允许请求标头字段 Access Control Allow Origin 我查看了针对此问题的其他答案 它们表明缺乏 CORS 支持
  • Ajax调用完成后执行函数

    我是 Ajax 新手 我尝试在使用 for 循环时使用 Ajax Ajax 调用之后 我正在运行一个使用 Ajax 调用中创建的变量的函数 该函数只执行两次 我认为 Ajax 调用可能没有足够的时间在循环开始之前进行调用 有没有办法在运行
  • 使用来自Processing-JS的JSON

    我想使用编写一个应用程序处理 JS http processingjs org 并且我希望能够使用服务器端数据加载它 我还没有编写服务器端 所以我可以使用任何东西 但似乎明显的 AJAX 事情是使用 JSON 将数据上传到页面中 如何从我的
  • 如何绕过Access-Control-Allow-Origin?

    我正在一个平台上对我自己的服务器进行ajax调用 他们设置了阻止这些ajax调用的平台 但我需要它从我的服务器获取数据以显示从我的服务器数据库检索到的数据 我的 ajax 脚本正在运行 它可以将数据发送到我的服务器的 php 脚本以允许其处
  • 日历中 primefaces ajax 上的事件日期选择不起作用

    我有一个日历

随机推荐

  • 分析996个词根在各大考纲词汇中的作用(五)总结精选篇

    CET4 CET6 GRE IELTS TOEFL 考研英语总的词汇量为14055 分析词根总数为996 有11544个单词分布在这些词根中 剩下的2511个词汇没有任何词根信息 本文精选5206个跟词根结合最紧密的单词 superword
  • KVM的HVM虚拟机使用非串口方式建立virsh console 连接

    在去年写的文章中 http blog csdn net dobell article details 14442457 写到了怎么利用serial 设备进行console连接 不过比较麻烦 因为1 需要修改虚拟机内部的grub启动选项 2
  • unity学习笔记-有关打包安卓apk的一些注意事项

    unity学习笔记 有关打包安卓apk的一些注意事项 打包到build project的时候报错 报错信息里出现了jdksdk等 打包报错显示andriodfestxml文件版本有问题 有关urp线管环境打包的时候的一些注意事项 在编辑器里
  • 一款开源的文件搜索神器,终于不用记 find 命令了

    Python微信订餐小程序课程视频 https blog csdn net m0 56069948 article details 122285951 Python实战量化交易理财系统 https blog csdn net m0 5606
  • pppd程序的参数——man手册翻译

    文章目录 pppd全称 摘要 描述 常用的选项 ttyname 串口名 speed 波特率 asyncmap map auth call name connect script 连接脚本 crtscts defaultroute defau
  • chatgpt赋能python:Python处理Word文档

    Python处理Word文档 介绍 Microsoft Word是业界最流行的办公文档编辑工具之一 对于文档处理工作 Word是必不可少的工具之一 然而 尽管Word是十分强大的 但在处理大量数据时 手动处理每个文件是费时费力的 幸运的是
  • 数值分析——LU分解(LU Factorization)

    本系列整理自博主21年秋季学期本科课程 数值分析I 的编程作业 内容相对基础 参考书 David Kincaid Ward Cheney Numerical Analysis Mathematics of Scientific Comput
  • Python 多线程 start()和run()方法的区别(三)

    在实例调用的函数中加入打印当前线程的名字 分别用start 方法和run 方法启动线程检查有什么区别 start 方法 import threading import time def worker count 1 while True i
  • Linux epoll 与 Windows IOCP比较

    前言 epoll 和 IOCP IO Completion Ports 分别是 Linux 和 Windows 系统上的高效网络模型 相比其他网络模型 同样是 polling 方式 这两种模型有如下特点 在系统资源允许下 监控的文件描述符没
  • pandas中to_datetime()时间处理

    pandas to datetime arg errors raise utc None format None unit None pandas通常用于处理成组日期 不管这些日期是DataFrame的轴索引还是列 to datetime方
  • 入职字节外包一个月,我离职了····

    有一种打工人的羡慕 叫做 大厂 真是年少不知大厂香 错把青春插稻秧 但是 在深圳有一群比大厂员工更庞大的群体 他们顶着大厂的 名 做着大厂的工作 还可以享受大厂的伙食 却没有大厂的 命 他们就是大厂的 外包员工 什么都做了 和什么都没做其实
  • idea注释快捷键

    具体实现步骤 1 打开系统设置Setting Ctrl Alt S快捷键 2 Editor gt Live Templates gt 点击 号 添加一个templates group来放置自己快捷键 效果图如下 3 选中创建的group g
  • 在Excel VBA中使用字典

    序言 VBA的基础数据类型里面并没有字典类型 但字典其实在很多应用场景中都很有用 那么如何在VBA中使用字典 本文就用几个例子和大家交流探讨一下 场景1 某个医院每天都会从不同的制造商那里进三种材料中的一种 每天的进价都有可能不同 现在公司
  • NodeRed-第三篇:tcp接入

    1 用tcp in节点接入数据 设置为监听 设置端口号 设置输出为buffer 2 用function节点将buffer转换为string var a msg payload msg payload a return msg 3 用json
  • Android语音识别

    今天从网上找了个例子实现了语音识别 个人感觉挺好玩的 就把代码贴出来与大家分享下 Android中主要通过RecognizerIntent来实现语音识别 其实代码比较简单 但是如果找不到设置 就会抛出异常ActivityNotFoundEx
  • 【Java 笔记】使用Fastjson2时,对象转json首字母大小写问题

    开发环境 一 JSON 转 Object 1 问题 2 解决方案 二 Object转 JSON 三 SpringBoot设置fastjson2 为默认 pom xml 2 配置类 四 FastJson2 注解 默认 2 JSONType 类
  • zabbix 快速入门

    zabbix 快速入门 zabbix介绍 Zabbix是由 Alexei Vladishev 开发的一种网络监视 管理系统 基于Server Client架构 可以使用多种方式监视 可以只使用 Simple Check 不需要安装 Clie
  • CTF-12.web安全SSI注入

    SSl注入攻击介绍 SSl server side inject 的出现是为了赋予html静态页面动态的效果 通过ssI来执行系统命令 并返回对应的结果 如果在网站目录中发现了 stm shtm shtml 并且网站对于SSI的输入没有做到
  • 【ROS学习】Solidworks模型转化为URDF文件格式+三连杆机械臂示例+逆运动学

    URDF Universal Robot Description Format 通用机器人描述格式 它是ROS里边使用的一种机器人的描述文件 包含的内容有 连杆 关节 运动学和动力学参数 可视化模型 碰撞检测模型等 到目前为止 本文的主要内
  • 【AJAX】请求原理 同步和异步

    一 AJAX概念 本质 使用JS提供的异步对象 在页面不刷新的情况下 发送http请求 得到http响应 实现页面的局部刷新 涉及到的技术HTML JS HTTP HTTPS 接口 XML JSON 二 完整的WEB请求原理 比如 我们在网