超硬核分分钟了解AJAX之AJAX入门系列教程ajax介绍01

AJAX入门系列教程主要涵盖AJAX的引入、原生JS实现AJAX、AJAX响应数据格式处理以及jQuery实现AJAX及案例开发四个方面。

一、AJAX的引入
同步交互与异步交互
同步交互
定义：用户向HTTP服务器提交请求后，需等待服务器处理并返回完整HTML页面，期间浏览器显示空白或加载状态。例如，提交表单后跳转至新页面显示结果。
优点：保留浏览器后退按钮功能，用户可返回历史记录中的静态页面，取消前一次操作。
缺点：用户体验不连贯，等待期间无法操作；页面跳转导致原有信息丢失，需重新填写。
流程图示：
异步交互
定义：请求发送后无需等待响应，可立即发起后续操作。例如，提交数据后系统反馈“处理中”，用户可关闭页面，后台继续执行。
优点：前后端并行处理，充分利用用户操作间隔时间；页面无跳转，保留原有信息。
缺点：破坏浏览器后退按钮功能，无法返回历史状态；动态更新页面时，浏览器仅记录最终静态页面。
流程图示：
AJAX技术背景
定义：全称“Asynchronous Javascript And XML”（异步JavaScript与XML），是一种无需重新加载整个网页即可实现局部更新的技术。通过后台与服务器少量数据交换，实现异步更新。
关键技术：
CSS：构建用户界面样式，负责排版与美工。
DOM：动态显示与交互，局部修改页面内容。
XMLHttpRequest：核心对象，实现异步数据获取。
JavaScript：绑定所有元素，协调技术协同工作。
核心特点：异步访问与局部刷新，提升用户体验与资源利用率。
图示：
二、原生JS实现AJAX
实现步骤：
创建XMLHttpRequest对象：根据浏览器类型实例化对应对象（如IE的ActiveXObject）。
配置请求参数：设置请求方法（GET/POST）、URL及异步模式（async: true）。
发送请求：调用send()方法，可选传递请求体数据（如POST请求的表单数据）。
监听响应状态：通过onreadystatechange事件处理响应，检查readyState（状态码4表示完成）与status（HTTP状态码200表示成功）。
处理响应数据：解析responseText（文本）或responseXML（XML格式数据），更新页面局部内容。
代码示例：

var xhr = window.XMLHttpRequest ? new XMLHttpRequest() : new ActiveXObject('Microsoft.XMLHTTP');xhr.open('GET', 'api/data', true);xhr.onreadystatechange = function() { if (xhr.readyState === 4 && xhr.status === 200) { document.getElementById('result').innerHTML = xhr.responseText; }};xhr.send();

三、AJAX响应数据格式处理
常见格式：
XML：结构化数据，可通过DOM解析，但标签冗余导致传输效率低。
JSON：轻量级数据交换格式，易于读写与解析，支持复杂数据结构（如嵌套对象、数组）。
文本：简单场景下直接使用，需手动解析为DOM元素。
JSON处理示例：

// 解析JSON响应var data = JSON.parse(xhr.responseText);console.log(data.key); // 访问对象属性// 发送JSON数据（POST请求）var postData = JSON.stringify({ name: 'John', age: 30 });xhr.open('POST', 'api/submit', true);xhr.setRequestHeader('Content-Type', 'application/json');xhr.send(postData);

四、jQuery实现AJAX及案例开发
简化API：
$.ajax()：通用方法，支持自定义配置（如数据类型、超时时间）。
快捷方法：$.get()、$.post()、$.getJSON()等，封装常见场景。
案例：动态加载数据

// 使用$.getJSON加载JSON数据并渲染列表$.getJSON('api/users', function(users) { var html = ''; users.forEach(function(user) { html += `<li>${user.name} (${user.email})</li>`; }); $('#userList').html(html);});

优势：减少代码量，自动处理浏览器兼容性，支持链式调用与Promise风格编程。

点赞和评论区留言“ajax” ，可以获取对应视频，代码，文档全套资料。

您可能感兴趣问答

Collapsible

热门标签

热点问答