Ajax之核心语法详解

    • 一、Ajax的核心原理与优势
      • 1.1 什么是Ajax?
      • 1.2 Ajax的优势
    • 二、XMLHttpRequest:Ajax的核心对象
      • 2.1 XHR的基本使用流程
      • 2.2 核心属性与事件解析
        • 2.2.1 `readyState`:请求状态
        • 2.2.2 `status`:HTTP状态码
        • 2.2.3 响应数据属性
        • 2.2.4 常用事件
    • 三、HTTP请求方法与数据传递
      • 3.1 GET请求:获取数据
      • 3.2 POST请求:提交数据
      • 3.3 其他请求方法
    • 四、Ajax的高级特性
      • 4.1 同步与异步请求
      • 4.2 请求超时设置
      • 4.3 取消请求
    • 五、跨域问题与解决方案
      • 5.1 同源策略的限制
      • 5.2 跨域解决方案
        • 5.2.1 CORS(Cross-Origin Resource Sharing,推荐)
        • 5.2.2 JSONP(仅支持GET请求,兼容性好)
    • 六、常见问题与避坑指南
      • 6.1 跨域错误(No 'Access-Control-Allow-Origin' header)
      • 6.2 响应数据解析错误(JSON.parse失败)
      • 6.3 POST请求被浏览器转为OPTIONS请求

Ajax(Asynchronous JavaScript and XML)是前端与后端进行数据交互的核心技术,它允许网页在不刷新的情况下与服务器交换数据,从而实现动态更新页面内容。

一、Ajax的核心原理与优势

1.1 什么是Ajax?

Ajax并非单一技术,而是一组技术的集合,包括JavaScript、XML(或JSON)、HTML/CSS、DOM等,核心是通过XMLHttpRequest对象与服务器进行异步通信。

核心特点

  • 异步通信:请求发送后无需等待服务器响应,可继续执行其他操作;
  • 局部刷新:服务器返回数据后,仅更新页面需要变化的部分,无需全页刷新;
  • 数据交互:与服务器交换的数据格式通常为JSON(替代早期的XML,更轻量)。

1.2 Ajax的优势

  • 提升用户体验:避免全页刷新,减少等待时间(如表单提交无刷新提示);
  • 减少数据传输:仅交换必要数据,而非整个页面HTML;
  • 增强交互性:实时获取数据(如搜索框联想提示、实时聊天)。

二、XMLHttpRequest:Ajax的核心对象

XMLHttpRequest(简称XHR)是浏览器提供的内置对象,用于与服务器建立连接、发送请求、接收响应,是实现Ajax的基础。

2.1 XHR的基本使用流程

使用XHR发送请求的完整流程分为5步:

  1. 创建XHR对象;
  2. 配置请求(方法、URL、异步标识);
  3. 注册响应处理函数;
  4. 发送请求(可选带数据);
  5. 处理服务器响应。

基础示例:发送GET请求获取数据

// 1. 创建XHR对象
const xhr = new XMLHttpRequest();// 2. 配置请求:open(请求方法, URL, 是否异步)
xhr.open('GET', 'https://api.example.com/data', true);// 3. 注册响应处理函数(监听readystatechange事件)
xhr.onreadystatechange = function() {// readyState为4表示响应完成,status为200表示请求成功if (xhr.readyState === 4 && xhr.status === 200) {// 5. 处理响应数据(通常为JSON字符串)const response = JSON.parse(xhr.responseText);console.log('请求成功:', response);} else if (xhr.readyState === 4) {// 处理错误状态(如404、500)console.error('请求失败,状态码:', xhr.status);}
};// 4. 发送请求(GET请求无数据,参数为null)
xhr.send(null);

2.2 核心属性与事件解析

2.2.1 readyState:请求状态

表示XHR对象的当前状态,取值范围0-4:

  • 0:未初始化(open()未调用);
  • 1:加载中(open()已调用,send()未调用);
  • 2:已加载(send()已调用,响应头已接收);
  • 3:交互中(正在接收响应体数据);
  • 4:完成(响应已全部接收)。
2.2.2 status:HTTP状态码

表示服务器响应的状态,常见值:

  • 200:请求成功;
  • 400:请求参数错误;
  • 404:资源未找到;
  • 500:服务器内部错误;
  • 304:资源未修改(使用缓存)。
2.2.3 响应数据属性
  • responseText:服务器返回的文本数据(最常用,如JSON字符串);
  • responseXML:服务器返回的XML文档(较少用,需服务器返回XML格式);
  • response:通用响应属性(支持多种类型,如ArrayBuffer、Blob等)。
2.2.4 常用事件
  • readystatechangereadyState变化时触发(传统方式);
  • load:请求完成时触发(无论成功或失败,替代readystatechange的现代方式);
  • error:请求失败时触发(如网络错误);
  • abort:调用abort()取消请求时触发;
  • progress:接收响应数据时触发(可用于显示进度条)。

事件示例

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);// 加载完成(替代readystatechange)
xhr.onload = function() {if (xhr.status === 200) {console.log('请求成功:', JSON.parse(xhr.responseText));} else {console.error('请求失败:', xhr.status);}
};// 网络错误
xhr.onerror = function() {console.error('网络错误,请求失败');
};// 进度事件(接收数据时)
xhr.onprogress = function(event) {if (event.lengthComputable) {const progress = (event.loaded / event.total) * 100;console.log(`加载进度:${progress}%`);}
};xhr.send(null);

三、HTTP请求方法与数据传递

Ajax支持多种HTTP请求方法,最常用的是GETPOST,分别适用于获取数据和提交数据。

3.1 GET请求:获取数据

GET请求用于从服务器获取数据,参数通过URL的查询字符串(?key=value&key2=value2)传递。

特点

  • 参数可见(URL中),不适合敏感数据;
  • 有长度限制(不同浏览器限制不同,通常2KB-8KB);
  • 可被缓存(适合静态数据);
  • 幂等(多次请求结果相同,无副作用)。

示例:带参数的GET请求

const xhr = new XMLHttpRequest();
// 参数通过查询字符串传递(需编码特殊字符)
const params = new URLSearchParams({name: '张三',age: 25
});
// URL:https://api.example.com/user?name=张三&age=25
xhr.open('GET', `https://api.example.com/user?${params.toString()}`, true);xhr.onload = function() {if (xhr.status === 200) {console.log('用户数据:', JSON.parse(xhr.responseText));}
};xhr.send(null);

3.2 POST请求:提交数据

POST请求用于向服务器提交数据(如表单、新增资源),参数放在请求体中传递。

特点

  • 参数在请求体中,不可见(相对安全,仍需加密敏感数据);
  • 无长度限制(由服务器配置决定);
  • 默认不缓存;
  • 非幂等(多次请求可能有副作用,如重复提交订单)。

示例:提交JSON数据

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/user', true);// 设置请求头:告诉服务器请求体格式为JSON
xhr.setRequestHeader('Content-Type', 'application/json');xhr.onload = function() {if (xhr.status === 200) {console.log('提交成功:', JSON.parse(xhr.responseText));}
};// 发送JSON格式的请求体(需转为字符串)
const data = {name: '李四',email: 'lisi@example.com'
};
xhr.send(JSON.stringify(data));

示例:提交表单数据(application/x-www-form-urlencoded

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/login', true);// 设置请求头:表单默认格式
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');xhr.onload = function() {if (xhr.status === 200) {console.log('登录成功:', JSON.parse(xhr.responseText));}
};// 发送表单格式的请求体(key=value&key2=value2)
const formData = new URLSearchParams();
formData.append('username', 'admin');
formData.append('password', '123456');
xhr.send(formData.toString());

3.3 其他请求方法

GETPOST外,RESTful API常用的方法还有:

  • PUT:更新资源(全量更新);
  • PATCH:更新资源(部分更新);
  • DELETE:删除资源。

使用方式与POST类似,只需在open()中指定对应方法:

// PUT请求:更新用户信息
xhr.open('PUT', 'https://api.example.com/user/123', true);// DELETE请求:删除用户
xhr.open('DELETE', 'https://api.example.com/user/123', true);

四、Ajax的高级特性

4.1 同步与异步请求

open()方法的第三个参数async控制请求是否异步:

  • async: true(默认):异步请求,请求发送后继续执行后续代码,不阻塞页面;
  • async: false:同步请求,请求发送后会阻塞页面,直到响应完成(不推荐,影响用户体验)。

同步请求示例(不推荐)

const xhr = new XMLHttpRequest();
// 同步请求(async: false)
xhr.open('GET', 'https://api.example.com/data', false);xhr.send(null);// 同步请求中,send()后立即获取响应(无需事件监听)
if (xhr.status === 200) {console.log('同步请求结果:', JSON.parse(xhr.responseText));
}

4.2 请求超时设置

通过timeout属性设置请求超时时间(毫秒),超时后触发ontimeout事件。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/slow-data', true);// 设置超时时间为5秒
xhr.timeout = 5000;// 超时处理
xhr.ontimeout = function() {console.error('请求超时,请重试');
};xhr.onload = function() {if (xhr.status === 200) {console.log('请求成功');}
};xhr.send(null);

4.3 取消请求

通过abort()方法取消正在进行的请求,触发onabort事件。

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);xhr.onabort = function() {console.log('请求已取消');
};xhr.send(null);// 2秒后取消请求
setTimeout(() => {xhr.abort();
}, 2000);

五、跨域问题与解决方案

由于浏览器的同源策略(Same-Origin Policy),Ajax默认不允许请求不同域名、端口或协议的资源,否则会出现跨域错误。

5.1 同源策略的限制

同源指协议、域名、端口三者完全相同:

  • 允许:http://example.comhttp://example.com/api(同源);
  • 禁止:http://example.comhttps://example.com(协议不同);
  • 禁止:http://example.comhttp://api.example.com(域名不同);
  • 禁止:http://example.com:80http://example.com:8080(端口不同)。

5.2 跨域解决方案

5.2.1 CORS(Cross-Origin Resource Sharing,推荐)

服务器端设置响应头Access-Control-Allow-Origin允许指定域名访问:

// 服务器响应头
Access-Control-Allow-Origin: https://example.com  // 允许example.com跨域访问
Access-Control-Allow-Origin: *  // 允许所有域名(不推荐,不安全)

客户端无需额外配置,直接发送请求即可:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.other-domain.com/data', true);
xhr.onload = function() {// 服务器已配置CORS,可正常接收响应
};
xhr.send(null);
5.2.2 JSONP(仅支持GET请求,兼容性好)

利用<script>标签不受同源策略限制的特性,通过动态创建<script>标签加载跨域脚本,执行回调函数传递数据。

客户端示例

// 定义回调函数(全局函数)
function handleJsonpData(data) {console.log('JSONP获取的数据:', data);
}// 创建script标签,加载跨域资源
const script = document.createElement('script');
// URL中指定回调函数名,服务器会返回"handleJsonpData(数据)"
script.src = 'https://api.other-domain.com/jsonp?callback=handleJsonpData';
document.body.appendChild(script);// 加载完成后移除script标签
script.onload = function() {document.body.removeChild(script);
};

服务器返回数据格式(需配合):

// 服务器返回的内容(会被浏览器当作JS执行)
handleJsonpData({ name: '张三', age: 25 });

六、常见问题与避坑指南

6.1 跨域错误(No ‘Access-Control-Allow-Origin’ header)

原因:请求的域名与当前页面域名不同,且服务器未配置CORS。

解决方案

  • 开发环境:使用代理服务器(如Webpack Dev Server的proxy配置);
  • 生产环境:服务器配置Access-Control-Allow-Origin响应头;
  • 兼容旧浏览器:使用JSONP(仅GET请求)。

6.2 响应数据解析错误(JSON.parse失败)

原因:服务器返回的不是合法JSON字符串(如HTML、错误信息)。

解决方案

  • 先检查xhr.responseText的内容,确认是否为JSON;
  • 添加错误处理:
xhr.onload = function() {try {const data = JSON.parse(xhr.responseText);console.log('解析成功', data);} catch (error) {console.error('JSON解析失败:', xhr.responseText);}
};

6.3 POST请求被浏览器转为OPTIONS请求

原因:跨域POST请求且请求头包含非简单头(如Content-Type: application/json)时,浏览器会先发送预检请求(OPTIONS),检查服务器是否允许跨域。

解决方案

  • 服务器需处理OPTIONS请求,返回允许的请求方法、请求头:
Access-Control-Allow-Methods: POST, GET, OPTIONS
Access-Control-Allow-Headers: Content-Type
Access-Control-Max-Age: 86400  // 预检请求缓存时间(24小时)

Ajax的替代方案
Ajax彻底改变了网页的交互方式,使前端从静态展示迈向动态交互。核心价值在于异步数据交互,无需刷新页面即可更新内容。
虽然XHR是Ajax的基础,但现代开发中更常用以下方案:

  • Fetch API:基于Promise的新一代网络请求API,语法更简洁;
  • Axios:封装了XHR的第三方库,支持Promise、拦截器、取消请求等,简化开发。

Fetch API示例(替代XHR):

fetch('https://api.example.com/data').then(response => {if (!response.ok) {throw new Error(`HTTP错误,状态码:${response.status}`);}return response.json(); // 解析JSON}).then(data => console.log('Fetch获取数据:', data)).catch(error => console.error('请求失败:', error));

若这篇内容帮到你,动动手指支持下!关注不迷路,干货持续输出!
ヾ(´∀ ˋ)ノヾ(´∀ ˋ)ノヾ(´∀ ˋ)ノヾ(´∀ ˋ)ノヾ(´∀ ˋ)ノ

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

如若内容造成侵权/违法违规/事实不符,请联系英文站点网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

ArcGIS 打开 nc 降雨量文件

1. 打开ArcToolbox&#xff0c;依次打开 多维工具 → 创建 NetCDF 栅格图层&#xff0c;将 nc 文件拖入 输入 NetCDF 文件输入框&#xff0c;确认 X维度&#xff08;经度&#xff09;、Y维度&#xff08;经度&#xff09; 的变量名是否正确&#xff0c;点击 确定。图 1 加载nc文…

01-elasticsearch-搭个简单的window服务-ik分词器-简单使用

1、elasticsearch下载地址 如果是其他版本可以尝试修改链接中的版本信息下载 https://artifacts.elastic.co/downloads/elasticsearch/elasticsearch-7.6.2-windows-x86_64.zip 2、ik分词器下载地址 ik分词器下载的所有版本地址&#xff1a;Index of: analysis-ik/stable/…

[数据结构与算法] 优先队列 | 最小堆 C++

下面是关于 C 中 std::priority_queue 的详细说明&#xff0c;包括初始化、用法和常见的应用场景。什么是 priority_queue&#xff1f; priority_queue&#xff08;优先队列&#xff09;是 C 标准库中的一个容器适配器。它和普通队列&#xff08;queue&#xff09;最大的不同在…

零基础入门物联网-远程门禁开关:硬件介绍

一、成品展示 远程门禁最终效果 二、项目介绍 整个项目主要是实际使用案例为主&#xff0c;根据自己日常生活中用到物联网作品为原型&#xff0c;通过项目实例快速理解。项目分为两部分&#xff1a;制作体验和深入学习。 制作体验部分 会提供所有项目资料及制作说明文档&a…

软件系统国产化改造开发层面,达梦(DM)数据库改造问题记录

本系统前&#xff08;vue&#xff09;后端(java spring boot)为列子&#xff0c;数据库由MySQL--->DM&#xff08;达梦&#xff09;&#xff0c;中间件为中创的国产化相关软件&#xff0c;如tomcat、nginx、redis等。重点讲数据库及代码端的更改&#xff0c;中间件在服务端以…

N8N与Dify:自动化与AI的完美搭配

“N8N”和“Dify”这两个工具彻底理清楚&#xff0c;它们其实是两个定位完全不同的开源平台&#xff0c;各自擅长解决不同类型的问题&#xff0c;但也能协同工作。以下是详细说明&#xff1a;1. n8n&#xff1a;工作流自动化平台定位&#xff1a;n8n 是一个专注于跨系统连接与任…

ARM汇编编程(AArch64架构)课程 - 第5章函数调用规范

目录AAPCS64调用约定参数传递规则返回值规则栈帧管理SP寄存器FP寄存器 (X29)栈帧布局示例AAPCS64调用约定 ARM Architecture Procedure Call Standard for 64-bit (AAPCS64) 参数传递规则 参数位置寄存器分配特殊规则参数1-8X0-X7 (64-bit) / W0-W7 (32-bit)浮点数使用 V0-V7参…

软考(软件设计师)软件工程-成本评估模型,软件能力成熟度,软件配置管理

成本评估模型 Putnam 下面通过一个具体案例&#xff0c;逐步说明Putnam模型的计算过程。我们将开发一个银行核心交易系统&#xff0c;规模为80万行代码&#xff08;LOC&#xff09;&#xff0c;要求24个月内交付。参数符号值说明软件规模L800,000 LOC通过功能点转换获得开发时间…

SASSNet复现

复现结果–Dice&#xff1a;89.354614&#xff0c;Jaccard&#xff1a;80.968917&#xff0c;95HD&#xff1a;7.3987764&#xff0c;误差在接受范围 MethodDiceJaccardJaccard # 感想 第19篇完全复现的论文

大数据学习5:网站访问日志分析

1.数据处理1.1 环境准备进入cd /opt/server/hadoop-3.1.0/sbin文件夹&#xff0c;停止hdfs服务cd /opt/server/hadoop-3.1.0/sbin ./stop-dfs.sh进入/opt/server/hadoop-3.1.0/etc/hadoop文件夹&#xff0c;编辑yarn-site.xml文件/opt/server/hadoop-3.1.0/etc/hadoop vim yarn…

力扣1310. 子数组异或查询

这一题很明显的就是用前缀和异或来解决&#xff0c;只要清楚异或的性质&#xff0c;这一题就十分容易。 对异或的性质的讲解如下&#xff1a; 异或运算解析 具体代码如下&#xff1a; class Solution { public:int sum[30005]; vector<int> xorQueries(vector<int>…

React Native 状态管理方案全面对比

React Native 状态管理方案全面对比 在 React Native 开发中&#xff0c;状态管理是构建复杂应用的核心问题。以下是主流状态管理方案的深度对比分析&#xff1a; 一、基础方案&#xff1a;useState/useReducer 适用场景 简单的组件级状态中等复杂度的局部状态管理不需要跨组件…

基于Python的程序员数据分析与可视化系统的设计与实现

文章目录有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私信博主项目介绍背景意义项目展示总结每文一语有需要本项目的代码或文档以及全部资源&#xff0c;或者部署调试可以私信博主 项目介绍 互联网技术飞速发展&#xff0c;数据分析与可视化在程序员工…

Java 枚举详解:从基础到实战,掌握类型安全与优雅设计

作为一名Java开发工程师&#xff0c;在日常开发中你一定经常使用枚举&#xff08;enum&#xff09;。自Java 5引入以来&#xff0c;枚举已经成为定义固定集合常量的首选方式&#xff0c;它比传统的 public static final 常量更加类型安全、可读性强&#xff0c;并且具备面向对象…

海外盲盒系统:技术如何重构“信任经济”?

盲盒的“非透明性”易引发信任危机&#xff0c;而海外盲盒系统通过技术手段构建了“可感知的公平”&#xff1a;1. 区块链存证&#xff1a;概率透明化 隐藏款概率、抽盒记录上链存证&#xff0c;用户可随时查询历史数据。某欧美用户通过区块链浏览器验证&#xff0c;确认系统隐…

PyTorch Tensor 操作入门:转换、运算、维度变换

目录 1. Tensor 与 NumPy 数组的转换 1.1 Tensor 转换为 NumPy 数组 1.2 NumPy 数组转换为 Tensor 1.3 获取单个元素的值 2. Tensor 的基本运算 2.1 生成新 Tensor 的运算 2.2 覆盖原 Tensor 的运算 2.3 阿达玛积&#xff08;逐元素乘法&#xff09; 2.4 矩阵乘法 3.…

CompletableFuture使用详解(Super Detailed)

一、 CompletableFuture介绍 多线程开发一般使用Runnable&#xff0c;Callable&#xff0c;Thread&#xff0c;FutureTask&#xff0c;ThreadPoolExecutor&#xff0c;但也有不近如意的地方 Thread Runnable&#xff1a;执行异步任务&#xff0c;没有返回结果。 Thread Calla…

开源 Arkts 鸿蒙应用 开发(六)数据持久--文件和首选项存储

文章的目的为了记录使用Arkts 进行Harmony app 开发学习的经历。本职为嵌入式软件开发&#xff0c;公司安排开发app&#xff0c;临时学习&#xff0c;完成app的开发。开发流程和要点有些记忆模糊&#xff0c;赶紧记录&#xff0c;防止忘记。 相关链接&#xff1a; 开源 Arkts …

【Bluedroid】蓝牙协议栈控制器能力解析与核心功能配置机制(decode_controller_support)

本文围绕Bluedroid蓝牙协议栈中控制器能力解析与核心功能配置的关键代码展开&#xff0c;详细阐述蓝牙协议栈如何通过解析控制器硬件能力&#xff0c;构建 SCO/eSCO、ACL 数据包类型支持掩码&#xff0c;配置链路策略、安全服务、查询与扫描模式等核心功能。这些机制确保协议栈…

小架构step系列07:查找日志配置文件

1 概述 日志这里采用logback&#xff0c;其为springboot默认的日志工具。其整体已经被springboot封装得比较好了&#xff0c;扔个配置文件到classpath里就能够使用。 但在实际使用中&#xff0c;日志配置文件有可能需要进行改动&#xff0c;比如日志的打印级别&#xff0c;平…