首页 > 其他分享 >Ajax是如何实现前后端交互的?

Ajax是如何实现前后端交互的?

时间:2023-08-25 19:12:06浏览次数:28  
标签:异步 HTTP 请求 代码 前后 响应 Ajax 代码执行 交互

Ajax的原理:

ajax一个前后台配合的技术,它可以让javascript发送http请求,与后台通信,获取数据和信息。ajax技术的原理是实例化xml,http对象,使用此对象与后台通信。jquery将它封装成了一个函数$.ajax(),我们可以直接用这个函数来执行ajax请求。
这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口,使得浏览器可以发出HTTP请求与接收HTTP响应,实现在页面不刷新的情况下和服务端进行数据交互。它依赖的是现有的CSS/HTML/Javascript,而其中最核心的依赖是浏览器提供的XMLHttpRequest对象。这个对象为向服务器发送请求和解析服务器响应提供了流畅的接口,使得浏览器可以发出HTTP请求与接收HTTP响应,实现在页面不刷新的情况下和服务端进行数据交互。

 

在真实的项目中,服务器端大多数情况下会以 JSON 对象作为响应数据的格式。

当客户端拿到响应数据时,要将 JSON 数据和 HTML 字符串进行拼接,然后将拼接的结果展示在页面中。

在 http 请求与响应的过程中,无论是请求参数还是响应内容,如果是对象类型,最终都会被转换为对象字符串进行传输。

同步:

一个人同一时间只能做一件事情,只有一件事情做完,才能做另外一件事情

落实到代码上,就是上一行代码执行完成后,才能执行下一行代码,即代码逐行执行

 

异步:

一个人一件事情做了一半,转而去做其他事情,当其他事情做完以后,再回过头来继续做之前未完成的事情。
落实到代码上,就是异步代码虽然需要花费时间去执行,但程序不会等待异步代码执行完成后再继续执行后续代码,而是直接执行后续代码,当后续代码执行完成后再回头看异步代码是否返回结果,如果已有返回结果,再调用事先准备好的回调函数处理异步代码执行的结果

 

标签:异步,HTTP,请求,代码,前后,响应,Ajax,代码执行,交互
From: https://www.cnblogs.com/taoliu/p/17657763.html

相关文章

  • 03.前后端分离中台框架 zhontai 项目代码生成器的使用
    合集-zhontai(3) 1.01.前后端分离中台框架后端Admin.Core学习-介绍与配置说明08-202.2.前后端分离中台框架前端admin.ui.plus学习-介绍与简单使用08-213.03.前后端分离中台框架zhontai项目代码生成器的使用08-22收起 zhontai项目基于.Net7.x+Vue等......
  • 视频集中存储/云存储平台EasyCVR国标GB28181协议接入的报文交互数据包分析
    安防视频监控/视频集中存储/云存储/磁盘阵列EasyCVR平台可拓展性强、视频能力灵活、部署轻快,可支持的主流标准协议有国标GB28181、RTSP/Onvif、RTMP等,以及支持厂家私有协议与SDK接入,包括海康Ehome、海大宇等设备的SDK等。视频汇聚融合管理平台EasyCVR既具备传统安防视频监控的能力,......
  • shell脚本通过read实现与键盘交互
    #!/bin/bashread-p"输入你想执行的操作(run|kill):"execread-p"输入对应的进程(server|web|all):"processfunctionrun_process(){case${1}inall)echo'启动所有进程';;server)echo'只启动server'......
  • ajax完美解决跨域问题(jsonp、nginx反向代理)
    做过web前端人都知道,经常会有ajax跨域问题,下面列举我经常使用的解决办法第一种:使用jsonp,jquery的ajax方法支持jsonp,但是最大的缺点就是只支持get方式,而且服务端也要修改客户端test.html代码<!DOCTYPEhtml><html><head> <title>工作端</title> <metaname="viewport"content=......
  • 交互式Docker以及Yaml
    EulerOS、openEulerEulerOSLinux又为被称为华为欧拉Linux.华为欧拉系统主要针对企业级的Linux服务器操作系统,针对B端用户,一般用在企业的大型计算机上,是企业IT系统的基础架构平台进程内存管理网络容器技术编译系统、虚拟存储系统、CPU调度、IO驱动、网络和文件系统Harm......
  • 02.前后端分离中台框架前端 admin.ui.plus 学习-介绍与简单使用
    中台框架前台项目admin.ui.plus的初识基于vue3.x+CompositionAPIsetup语法糖+typescript+vite+elementplus+vue-router-next+pinia技术,内置支持一键生成微服务接口,适配手机、平板、pc的后台权限管理框架,希望减少工作量,帮助大家实现快速开发。框架一览......
  • 03.前后端分离中台框架 zhontai 项目代码生成器的使用
    zhontai项目基于.Net7.x+Vue等技术的前后端分离后台权限管理系统,想你所想的开发理念,希望减少工作量,帮助大家实现快速开发后端地址:https://github.com/zhontai/Admin.Core前端地址:https://github.com/zhontai/admin.ui.plus代码生成器:后端:https://github.com/share3......
  • 如何创建一个数据交互的Angular应用程序?这个工具不要错过!(一)
    当我们构建带有数据的应用程序时,需要为客户提供排序、分组、过滤和聚合数据等选项,以便与之交互。我们可以通过多种途径实现这一目标:使用内置的Array对象——它提供了过滤器、排序方法和reduce等用于分组和聚合的功能。使用KendoUIforAngular强大的数据查询功能——它提供了......
  • 使用Vue.js构建交互式的前端应用
    引言Vue.js是一种流行的JavaScript框架,用于构建交互式的前端应用程序。它具有简单易用的API和灵活的组件化架构,使开发人员能够快速构建高效的用户界面。什么是Vue.js?Vue.js是一种用于构建用户界面的开源JavaScript框架。它采用了MVVM(Model-View-ViewModel)架构模式,通过数据绑定和......
  • C#和Oracle的交互
    1.安装Oracle,略。2.(非必要,全局用户也可)在sys下创建用户并授权session、createtable,createtablespace,createview,unlimitedtablespace。3.在VisualStudio创建项目,并将Oracle本地目录下的文件Oracle.DataAccess.dll复制到项目的exe所在目录下(bin/Debug/*)。4.......