ajax原理

发表于2025-08-20|更新于2025-12-07|JavaScript

|总字数:225|阅读时长:1分钟|浏览量:

ajax原理

AJAX 全称(Async Javascript and XML)

即异步的 JavaScript 和 XML ，是⼀种创建交互式⽹⻚应⽤的⽹⻚开发技术，可以在不重新加载整

个⽹⻚的情况下，与服务器交换数据，并且更新部分⽹⻚

Ajax 的原理简单来说通过 XmlHttpRequest 对象来向服务器发异步请求，从服务器获得数据，然

后⽤ JavaScript 来操作 DOM ⽽更新⻚⾯

实现 Ajax 异步交互需要服务器逻辑进⾏配合，需要完成以下步骤：

•

创建 Ajax 的核⼼对象 XMLHttpRequest 对象

•

通过 XMLHttpRequest 对象的 open() ⽅法与服务端建⽴连接

•

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

•

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

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

•

将处理结果更新到 HTML ⻚⾯中

文章作者: BoardYoungC

文章链接: http://example.com/2025/08/20/js/ajax%E5%8E%9F%E7%90%86/

版权声明: 本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明来源 BoardYoungC！

相关推荐

Javascript本地存储

Javascript本地存储javaScript 本地缓存的⽅法我们主要讲述以下四种： • cookie • Cookie ，类型为「⼩型⽂本⽂件」，指某些⽹站为了辨别⽤⼾⾝份⽽储存在⽤⼾本地终端上的数据。是为了解决 HTTP ⽆状态导致的问题作为⼀段⼀般不超过 4KB 的⼩型⽂本数据，它由⼀个名称（Name）、⼀个值（Value）和其它⼏个⽤于控制 cookie 有效期、安全性、使⽤范围的可选属性组成但是 cookie 在每次请求中都会被发送，如果不使⽤ HTTPS 并对其加密，其保存的信息很容易被窃取，导致安全⻛险。举个例⼦，在⼀些使⽤ cookie 保持登录态的⽹站上，如果 cookie 被窃取，他⼈很容易利⽤你的 cookie 来假扮成你登录⽹站 sessionStorage sessionStorage 和 localStorage 使⽤⽅法基本⼀致，唯⼀不同的是⽣命周期，⼀旦⻚⾯（会话）关闭， sessionStorage...

DOM常⻅的操作

DOM常⻅的操作⽂档对象模型 (DOM) 是 HTML 和 XML ⽂档的编程接⼝创建节点 createElement创建新元素，接受⼀个参数，即要创建元素的标签名 createTextNode创建⼀个⽂本节点 createDocumentFragment⽤来创建⼀个⽂档碎⽚，它表⽰⼀种轻量级的⽂档，主要是⽤来存储临时节点，然后把⽂档碎⽚的内容⼀次性添加到 DOM 中 createAttribute创建属性节点，可以是⾃定义属性 12const dataAttribute = document.createAttribute('custom'); consle.log(dataAttribute); 查询节点返回⼀个包含节点⼦树内所有与之相匹配的 Element 节点列表，如果没有相匹配的，则返回⼀个空 1234567891 document.getElementById('id属性值');返回拥有指定id的对象的引⽤2...

js基本类型与数据结构

基本类型主要为以下6种：Number String Boolean Undefined 123Undefined 类型只有⼀个值，就是特殊值 undefined 。当使⽤ var 或 let 声明了变量但没有初始化时，就相当于给变量赋予了 undefined 值 null 12345Null 类型同样只有⼀个值，即特殊值 null逻辑上讲， null 值表⽰⼀个空对象指针，这也是给 typeof 传⼀个 null 会返回 "object" 的原因 undefined 值是由 null 值派⽣⽽来 1console.log(null == undefined); // true symbol 引⽤类型复杂类型统称为 Object ，我们这⾥主要讲述下⾯三种： Object Array JavaScript 数组是⼀组有序的数据，但跟其他语⾔不同的是，数组中每个槽位可以存储任意类型的数据。并且，数组也是动态⼤⼩的，会随着数据添加⽽⾃动增⻓ Fuction 函数实际上是对象，每个函数都是 Function 类型的实例，⽽ Function...

async与awaitasync 是异步的意思， await 则可以理解为 async wait 。所以可以理解 async 就是⽤来声明⼀个异步⽅法，⽽ await 是⽤来等待异步⽅法执⾏ 21.3.1. async async 函数返回⼀个 promise 对象，下⾯两种⽅法是等效的 123456789101112131 function f() {2 return Promise.resolve('TEST');3 }4 *// asyncF is equivalent to f!*5 async function asyncF() {6 return 'TEST';7 } 21.3.2. await正常情况下， await 命令后⾯是⼀个 Promise 对象，返回该对象的结果。如果不是 Promise 对象，就直接返回对应的值 12345678910111 async function f(){2 *//* *等同于*3 *// return 123*4 return...

数组的常⽤⽅法

数组的常⽤⽅法下⾯前三种是对原数组产⽣影响的增添⽅法，第四种则不会对原数组产⽣影响 push()push() ⽅法接收任意数量的参数，并将它们添加到数组末尾，返回数组的最新⻓度 unshift()unshift()在数组开头添加任意多个值，然后返回新的数组⻓度 splice()传⼊三个参数，分别是开始位置、0（要删除的元素数量）、插⼊的元素，返回空数组 concat()创建⼀个当前数组的副本，然后再把它的参数添加到副本末尾，最后返回这个新构建的数组，不会影响原始数组下⾯三种删除都会影响原数组，最后⼀项不影响原数组： pop()⽅法⽤于删除数组的最后⼀项，同时减少数组的 length 值，返回被删除的项 shift()⽅法⽤于删除数组的第⼀项，同时减少数组的 length 值，返回被删除的项 splice()传⼊两个参数，分别是开始位置，删除元素的数量，返回包含删除元素的数组 slice() 转换⽅法join() ⽅法接收⼀个参数，即字符串分隔符，返回包含所有项的字符串 123let colors = ["red", "green",...

this对象函数的 this 关键字在 JavaScript 中的表现略有不同，此外，在严格模式和⾮严格模式之间也会有⼀些差别在绝⼤多数情况下，函数的调⽤⽅式决定了 this 的值（运⾏时绑定） this 关键字是函数运⾏时⾃动⽣成的⼀个内部对象，只能在函数内部使⽤，总指向调⽤它的对象 • 默认绑定全局环境中定义 person 函数，内部使⽤ this 关键字隐式绑定函数还可以作为某个对象的⽅法调⽤，这时 this 就指这个上级对象 new绑定 •通过构建函数 new 关键字⽣成⼀个实例对象，此时 this 指向这个实例对象显⽰绑定 apply()、call()、bind() 是函数的⼀个⽅法，作⽤是改变函数的调⽤对象。它的第⼀个参数就表⽰改变后的调⽤这个函数的对象。因此，这时 this 指的就是这第⼀个参数 bind、call、apply 区别？如何实现⼀个bind? apply 接受两个参数，第⼀个参数是 this 的指向，第⼆个参数是函数接受的参数，以数组的形式传⼊改变 this 指向后原函数会⽴即执⾏，且此⽅法只是临时改变 this...

数据加载中