当前位置: 首页 > news >正文

AJAX 学习

1. AJAX简介

AJAX(Asynchronous JavaScript And XML)是一种用于创建交互式网页的技术,允许在不刷新页面的情况下与服务器进行通信,从而实现页面的局部更新。

1.1 AJAX的优点

  • 无需刷新页面:可以与服务器进行异步通信,无需重新加载整个页面。
  • 提升用户体验:页面更新更加流畅,用户操作不会被中断。
  • 减轻服务器负担:只传输必要的数据,而不是整个页面内容。

1.2 AJAX的缺点

  • 无浏览历史:无法通过浏览器的后退按钮回到上一状态。
  • 跨域问题:默认情况下,不能从一个域名向另一个域名发送AJAX请求(同源策略)。
  • 搜索引擎优化(SEO)不友好:搜索引擎可能无法正确索引动态加载的内容。

2. AJAX的实现方式

AJAX可以通过多种方式实现,包括原生JavaScript、jQuery、fetch函数以及第三方库(如axios)。

2.1 原生AJAX(使用XMLHttpRequest)

原生AJAX通过XMLHttpRequest对象实现,是AJAX功能的基础。

核心步骤
  1. 创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();
  1. 设置请求信息
xhr.open(method, url); // method: 请求方法(GET、POST等),url: 请求地址
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  1. 发送请求
xhr.send(body); // GET请求不传body参数,POST请求需要传入请求体
  1. 接收响应
xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {var responseText = xhr.responseText; // 获取响应文本console.log(responseText);}
};

2.2 jQuery中的AJAX

jQuery提供了简化的AJAX方法,如$.get$.post$.ajax

示例
$.ajax({url: 'http://127.0.0.1:8000/server',type: 'GET',dataType: 'json', // 响应数据类型success: function(data) {console.log(data);},error: function() {console.log('请求失败');}
});

2.3 Fetch API

Fetch是现代浏览器提供的原生API,用于发送HTTP请求。它返回一个Promise对象,支持Promise链式调用。

示例
fetch('http://127.0.0.1:8000/server', {method: 'GET',headers: {'Content-Type': 'application/json'}
}).then(response => response.json()).then(data => console.log(data)).catch(error => console.error('Error:', error));

2.4 Axios

Axios是一个基于Promise的HTTP客户端,支持浏览器和Node.js环境。它提供了简洁的API和丰富的功能,如拦截请求和响应、自动转换JSON数据等。

示例
axios.get('http://127.0.0.1:8000/server').then(response => console.log(response.data)).catch(error => console.error('Error:', error));

3. HTTP相关知识

AJAX的核心是通过HTTP协议与服务器进行通信。了解HTTP请求和响应的基本结构对于使用AJAX非常重要。

3.1 HTTP请求报文

  • 请求行method URL 协议版本(如:GET /index.html HTTP/1.1
  • 请求头:包含各种请求信息(如HostContent-TypeCookie等)
  • 请求体:用于POST请求,包含要发送给服务器的数据

3.2 HTTP响应报文

  • 响应状态行status statusText(如:200 OK
  • 响应头:包含响应信息(如Content-TypeContent-Length等)
  • 响应体:服务器返回的数据(如HTML、JSON、图片等)

3.3 常见的HTTP状态码

  • 200 OK:请求成功
  • 401 Unauthorized:未授权
  • 404 Not Found:资源未找到
  • 500 Internal Server Error:服务器内部错误

3.4 请求方法

  • GET:用于从服务器获取数据
  • POST:用于向服务器提交数据
  • PUT:用于更新服务器上的数据
  • DELETE:用于删除服务器上的数据

4. 数据传输格式

AJAX的数据传输格式主要有以下几种:

  • application/x-www-form-urlencoded:键值对格式(如name=Tom&age=20
  • application/json:JSON格式(如{"name": "Tom", "age": 20}
  • multipart/form-data:用于文件上传

5. 跨域问题

AJAX默认遵守同源策略,即协议、域名和端口号必须完全相同。跨域问题可以通过以下方式解决:

  • JSONP:利用<script>标签的跨域能力,只支持GET请求。
  • CORS(Cross-Origin Resource Sharing):服务器设置响应头Access-Control-Allow-Origin,允许跨域请求。

5.1 JSONP原理

JSONP通过动态创建<script>标签来加载跨域资源。服务器返回的内容是一个JavaScript函数调用,客户端定义的回调函数会处理这些数据。

示例

客户端:

function handle(data) {console.log(data);
}var script = document.createElement('script');
script.src = 'http://example.com/data?callback=handle';
document.body.appendChild(script);

服务器返回:

handle({"name": "Tom", "age": 20});

5.2 CORS原理

CORS通过在服务器响应头中设置Access-Control-Allow-Origin来允许跨域请求。浏览器会检查该响应头,如果允许,则放行请求。

示例

服务器设置:

response.setHeader('Access-Control-Allow-Origin', '*');

6. AJAX的常见应用场景

  • 动态加载数据:如分页加载、无限滚动
  • 表单提交:无需刷新页面即可提交表单数据
  • 实时交互:如聊天应用、评论系统
  • 文件上传:通过AJAX实现异步文件上传

7. AJAX的状态码和事件

XMLHttpRequest对象的状态码readyState用于表示请求的当前状态:

  • 0:未初始化
  • 1:服务器连接已建立
  • 2:请求已接收
  • 3:请求处理中
  • 4:请求已完成,且响应已就绪

8. AJAX的高级用法

  • 设置请求超时
xhr.timeout = 2000; // 设置超时时间为2秒
xhr.ontimeout = function() {console.log('请求超时');
};
  • 取消请求
xhr.abort(); // 取消请求
  • 处理网络异常
xhr.onerror = function() {console.log('网络异常');
};

9. 实际案例

9.1 GET请求

<button id="btn">点击发送GET请求</button>
<div id="result"></div>
<script>document.getElementById('btn').onclick = function() {var xhr = new XMLHttpRequest();xhr.open('GET', 'http://127.0.0.1:8000/server');xhr.send();xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {document.getElementById('result').innerHTML = xhr.responseText;}};};
</script>

9.2 POST请求

<button id="btn">点击发送POST请求</button>
<div id="result"></div>
<script>document.getElementById('btn').onclick = function() {var xhr = new XMLHttpRequest();xhr.open('POST', 'http://127.0.0.1:8000/server');xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');xhr.send('name=Tom&age=20');xhr.onreadystatechange = function() {if (xhr.readyState === 4 && xhr.status === 200) {document.getElementById('result').innerHTML = xhr.responseText;}};};
</script>

9.3 JSON数据请求

<button id="btn">点击发送JSON请求</button>
<div id="result"></div>
<script>document.getElementById('btn').onclick = function() {var xhr = new XMLHttpRequest();
http://www.lryc.cn/news/583390.html

相关文章:

  • Go语言高级面试必考:切片(slice)你真的掌握了吗?
  • 11.7 ChatGPT奖励模型完全解读:RLHF核心技术深度剖析与Hugging Face实战
  • 从传统到智能:地质灾害风险评估、易发性分析与灾后重建;AI大语言模型DeepSeek、ChatGPT、GIS、Python和机器学习深度融合
  • 李宏毅NLP-9-语音转换
  • 大数据在UI前端的应用深化:用户行为模式的挖掘与预测性分析
  • Java基础--stream的使用
  • 学术绘图(各种神经网络)
  • 数据结构--堆的实现
  • 【04】MFC入门到精通——MFC 自己手动新添加对话框模板 并 创建对话框类
  • 【PDF提取内容改名】批量提取pdf多个指定区域内容到excel表格的操作步骤和方法
  • 专题:2025母婴行业洞察报告|附60+份报告PDF汇总下载
  • Context Engineering:从Prompt Engineering到上下文工程的演进
  • React、Vue、Angular的性能优化与源码解析概述
  • 深度学习 必然用到的 微积分知识
  • RAG实战之dify源码文件解析-pdf文件解析流程
  • 【Oracle报错】[INS-13001] 环境不满足最低要求。
  • 什么是幂等
  • 【03】MFC入门到精通——MFC 添加控件 设置属性 按钮 文本框
  • 第四节 chatPDF
  • 神经网络基础及API使用详解
  • 机器学习(西瓜书) 第四章 决策树
  • 通用游戏前端架构设计思考
  • 自动化测试报告优化:jenkins+jmeter定制化HTML报告生成
  • skywalking-agent-docker镜像
  • 方差、协方差和协方差矩阵
  • Windows 10/11新系统跳过强制联网激活和注册微软账户
  • JavaScript数组键值去重方法
  • 【C++】容器适配器 + stack/queue/deque详解
  • EFK9.0.3 windows搭建
  • Ubuntu连接不上网络问题(Network is unreachable)