ajax原理是什么?如何实现?

news2024/12/23 0:04:44

 一、是什么

AJAX全称(Async Javascript and XML)

即异步的JavaScript 和XML,是一种创建交互式网页应用的网页开发技术,可以在不重新加载整个网页的情况下,与服务器交换数据,并且更新部分网页

Ajax的原理简单来说通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用JavaScript来操作DOM而更新页面

流程图如下:

 

Ajax请求数据流程与“领导想找小李汇报一下工作”类似,上述秘书就相当于XMLHttpRequest对象,领导相当于浏览器,响应数据相当于小李

浏览器可以发送HTTP请求后,接着做其他事情,等收到XHR返回来的数据再进行操作

二、实现过程

实现 Ajax异步交互需要服务器逻辑进行配合,需要完成以下步骤:

  • 创建 Ajax的核心对象 XMLHttpRequest对象

  • 通过 XMLHttpRequest 对象的 open() 方法与服务端建立连接

  • 构建请求所需的数据内容,并通过XMLHttpRequest 对象的 send() 方法发送给服务器端

  • 通过 XMLHttpRequest 对象提供的 onreadystatechange 事件监听服务器端你的通信状态

  • 接受并处理服务端向客户端响应的数据结果

  • 将处理结果更新到 HTML页面中

创建XMLHttpRequest对象

通过XMLHttpRequest() 构造函数用于初始化一个 XMLHttpRequest 实例对象

const xhr = new XMLHttpRequest();

与服务器建立连接

通过 XMLHttpRequest 对象的 open() 方法与服务器建立连接

xhr.open(method, url, [async][, user][, password])

参数说明:

  • method:表示当前的请求方式,常见的有GETPOST

  • url:服务端地址

  • async:布尔值,表示是否异步执行操作,默认为true

  • user: 可选的用户名用于认证用途;默认为`null

  • password: 可选的密码用于认证用途,默认为`null

给服务端发送数据

通过 XMLHttpRequest 对象的 send() 方法,将客户端页面的数据发送给服务端

xhr.send([body])

body: 在 XHR 请求中要发送的数据体,如果不传递数据则为 null

如果使用GET请求发送数据的时候,需要注意如下:

  • 将请求数据添加到open()方法中的url地址中
  • 发送请求数据中的send()方法中参数设置为null

绑定onreadystatechange事件

onreadystatechange 事件用于监听服务器端的通信状态,主要监听的属性为XMLHttpRequest.readyState ,

关于XMLHttpRequest.readyState属性有五个状态,如下图显示

 

只要 readyState属性值一变化,就会触发一次 readystatechange 事件

XMLHttpRequest.responseText属性用于接收服务器端的响应结果

举个例子:

const request = new XMLHttpRequest()
request.onreadystatechange = function(e){
    if(request.readyState === 4){ // 整个请求过程完毕
        if(request.status >= 200 && request.status <= 300){
            console.log(request.responseText) // 服务端返回的结果
        }else if(request.status >=400){
            console.log("错误信息:" + request.status)
        }
    }
}
request.open('POST','http://xxxx')
request.send()

三、封装

通过上面对XMLHttpRequest对象的了解,下面来封装一个简单的ajax请求

//封装一个ajax请求
function ajax(options) {
    //创建XMLHttpRequest对象
    const xhr = new XMLHttpRequest()


    //初始化参数的内容
    options = options || {}
    options.type = (options.type || 'GET').toUpperCase()
    options.dataType = options.dataType || 'json'
    const params = options.data

    //发送请求
    if (options.type === 'GET') {
        xhr.open('GET', options.url + '?' + params, true)
        xhr.send(null)
    } else if (options.type === 'POST') {
        xhr.open('POST', options.url, true)
        xhr.send(params)

    //接收请求
    xhr.onreadystatechange = function () {
        if (xhr.readyState === 4) {
            let status = xhr.status
            if (status >= 200 && status < 300) {
                options.success && options.success(xhr.responseText, xhr.responseXML)
            } else {
                options.fail && options.fail(status)
            }
        }
    }
}

使用方式如下

ajax({
    type: 'post',
    dataType: 'json',
    data: {},
    url: 'https://xxxx',
    success: function(text,xml){//请求成功后的回调函数
        console.log(text)
    },
    fail: function(status){请求失败后的回调函数
        console.log(status)
    }
})

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/687145.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

算法——查找表

查找&#xff0c;根据一个值查找另一个值&#xff0c;value值可以是容器&#xff0c;结构&#xff0c;这样可查找的元素就更多&#xff1b; 哈希冲突&#xff1a; 主关键字&#xff1a;可以唯一的标识一个记录的关键字&#xff0c;如准考证号&#xff1b; 此关键词&#xff…

RFID微图柜的操作流程以及功能介绍

微型图书馆智能书柜是一种基于 RFID 技术的图书自助借阅延伸服务的终端设备&#xff0c;可实现 24 小时无人看守的共享的智能化设备&#xff0c;可自助借还书、自动数据记录分析、自助提醒等一体化管理服务功能。 智能书柜的操作流程 借书&#xff1a;在操作页面上选择“借书…

【好书精读】网络是怎样连接的 —— 信号在网线和集线器中传输

&#xff08; 该图由我使用 AI 绘制 &#xff09; 目录 每个包都是独立传输的 防止网线中的信号衰减很重要 “双绞”是为了抑制噪声 集线器将信号发往所有线路 每个包都是独立传输的 从计算机发送出来的网络包会通过集线器 、 路由器等设备被转发 &#xff0c; 最 终到达…

解决 CentOS/Alma 安装 libpcap-devel 报错:No match for argument: libpcap-devel

环境&#xff1a;Alma 8.5、Centos 7.x 解决方案 Linux 安装软件的时候&#xff0c;需要 libpcap-devel 这个组件&#xff0c;执行命令&#xff1a;yum install libpcap-devel &#xff0c;然后报错如下&#xff1a; Last metadata expiration check: 0:05:24 ago on Mon 12…

5.3 Linux目录配置

5.3.1 Linux目录配置的依据--FHS 根据FHS的标准文件指出&#xff0c;他们的主要目的是希望让使用者可以了解到已安装软件通常放置于那个目录下&#xff0c; 所以他们希望独立的软件开发商、操作系统制作者、以及想要维护系统的使用者&#xff0c;都能够遵循FHS的标准。 也就是…

ECS 简略版说明五:Baking and entity scenes

目录 Baking and entity scenes Creating and editing sub scenes Accessing data in a baker Loading and unloading entity scenes Baking and entity scenes Baking 是一个把 sub scenes 转变成 entity scenes 的过程&#xff0c;使用 bakers和 baking systems: A sub …

数据中心供配电监控系统解决方案介绍 安科瑞 许敏

摘 要&#xff1a;供配电系统始终是数据中心比较重要的内容&#xff0c;在供配电系统能够得到平稳安全的运行的时候&#xff0c;才能够促使数据中心的相关设备具有比较可靠的动力源泉。在新型数据中心不断发展的过程中&#xff0c;其功率密度也相对比较大&#xff0c;对供电的要…

销售人员如何通过CRM系统提升业绩

面对日趋激烈的竞争&#xff0c;销售人员的压力也日益剧增。尤其伴随流量红利的消失&#xff0c;越来越多的企业开始借助数字化工具赋能销售人员&#xff0c;希望通过工具的加持&#xff0c;实现销售人才和销售工具的“人器合一”&#xff0c;最终助力企业业绩的增长。 在市场有…

专访虎牙直播毛茂德 | 看互联网老兵如何用技术驱动效能提升?

引言 作为一位经历了互联网、移动互联网阶段的老兵&#xff0c;毛茂德老师一路走来&#xff0c;始终保持自己的技术初心&#xff0c;不断探索未知领域的宽度&#xff0c;进入虎牙直播后&#xff0c;他积极推动虎牙拥抱云原生&#xff0c;进行业务创新&#xff0c;同时他也发挥技…

1. MongoDB快速实战与基本原理

分布式缓存技术Redis 1. MongoDB介绍1.1 什么是MongoDB1.2 MongoDB vs 关系型数据库1.3 MongoDB的技术优势1.4 MongoDB的应用场景 2. 2.MongoDB快速开始2.1 linux安装MorgoDB 本文是按照自己的理解进行笔记总结&#xff0c;如有不正确的地方&#xff0c;还望大佬多多指点纠正&a…

基于SpringBoot+mybatis+layui就业管理系统设计和实现

基于SpringBootmybatislayui就业管理系统设计和实现 博主介绍&#xff1a;5年java开发经验&#xff0c;专注Java开发、定制、远程、指导等,csdn特邀作者、专注于Java技术领域 作者主页 超级帅帅吴 Java项目精品实战案例《500套》 欢迎点赞 收藏 ⭐留言 文末获取源码联系方式 文…

【STL】容器适配器

放在专栏【C知识总结】&#xff0c;会持续更新&#xff0c;期待支持 1、什么是适配器&#xff1f; 我们生活中就存在大量的适配器&#xff0c;最常见的莫过于我们常见的电源适配器&#xff0c;它的作用就是将交流电源转化为直流电源进行输出&#xff0c;可以说电源适配器在电流…

618复盘:爆款存当下,蓝海寄未来

价格&#xff0c;贵必赔。优惠&#xff0c;直接减。 号称史上最内卷的一届618在一家又一家号称史上最大补贴的狂欢下&#xff0c;落幕得悄无声息&#xff0c;各大平台默契地都没有公布具体GMV。 这样的结局似乎已有预见。此前有媒体援引浙江大学经济学院教授叶建亮的说法&…

从小白到大神之路之学习运维第47天---第三阶段----Iptables、路由表的配置、Linux下创建虚拟IP

第三阶段基础 时 间&#xff1a;2023年6月26日 参加人&#xff1a;全班人员 内 容&#xff1a; Iptables、路由表的配置、Linux下创建虚拟IP 目录 Iptables 1. 查看 iptables 设置&#xff1a; 2. 开启全部流量&#xff1a; 3. 关闭全部流量&#xff1a; 4. 允许某…

【Jmeter教程】_事务控制器

目录 一、添加事务控制器 二、事务控制器参数说明 三、运用事务控制器 统计性能测试结果一定会关注TPS&#xff0c;TPS表示每秒处理事务数&#xff0c;JMeter默认每个事务对应一个请求。我们可以用逻辑控制器中的事务控制器将多个请求统计为一个事务。 一、添加事务控制器 …

分享 5 个你可能不知道的前端小技巧

大家都知道&#xff0c;如今前端开发是一个充满活力的领域&#xff0c;每天都会涌现出新的技术和最佳实践。 作为前端开发人员&#xff0c;如果你真的想创建引人入胜、直观且响应迅速的用户界面&#xff0c;就必须时刻跟进最新的趋势和技术。 作为前端开发人员&#xff0c;我们…

不止10倍提速!PCIe EtherCAT实时运动控制卡XPCIE1032H 等您评测!

在高速高精运动控制领域&#xff0c;数据交互的快慢对产线的生产效率起着重要作用。提升数据交互速度能够实时地接收和处理大量的传感器监控运行数据、运动指令和反馈信息&#xff0c;从而实现更精确的运动控制、速度调整和轨迹规划&#xff0c;进而提高系统的响应时间和稳定性…

LDR6023C 专门为USB-C接口无线领夹式麦克风方案打造

推出领夹式无线麦克风方案&#xff0c;专门为USB-C接口手机打造&#xff0c;兼容性非常的游戏&#xff0c;可让手机同时一边充电一边传输数据。 随着直播平台的兴起&#xff0c;网络直播越来越火&#xff0c; 领夹式直播麦克风得到广泛应用&#xff0c; 现在手机&#xff0c;电…

海睿思分享 | 浅谈企业数据质量问题

一、数据质量问题场景 在日常工作中&#xff0c;业务领导经常通过BI系统来了解各项业务的业绩情况。倘若某天&#xff0c;他打开某张核心报表&#xff0c;发现当日某个区域的数据一直是空白的。BI开发人员经过几个小时的排查分析&#xff0c;发现是当日该区域的销售数据存在产…

VsCode 安装Copilot

1&#xff0c;插件安装 &#xff08;1&#xff09;首先我们在 VSCode 里面搜索并安装 Copilot 插件&#xff1a; &#xff08;2&#xff09;安装后编辑器右下角会出现一个小机器人图标&#xff0c;并且提示我们需要登录 GitHub 账号&#xff1a; 此时需要科学 目前要收费劝退…