jQuery AJAX 简介

AJAX（Asynchronous JavaScript and XML，异步 JavaScript 与 XML）让网页在不刷新整个页面的情况下与服务器交换数据。原生写法要手动处理 XMLHttpRequest、状态码与浏览器兼容，代码繁琐易错；jQuery 把这些封装成了几个简短方法，几行代码就能完成一次异步请求。

AJAX 解决了什么问题

传统网页提交表单后要整页刷新，用户体验差、流量浪费。AJAX 只更新需要变化的部分：

输入关键字时实时提示搜索结果；
滚动到底部自动加载下一页数据；
提交表单后局部显示成功或错误信息。

jQuery 的 AJAX 全家桶

jQuery 为不同场景准备了多档方法，由简到繁：

方法	适用场景
load()	把服务器返回的 HTML 直接塞进页面
$.get() / $.post()	简单的 GET / POST 请求
$.getJSON()	获取 JSON 数据
$.getScript()	动态加载并执行 JS 脚本
$.ajax()	全能方法，可精细控制每个环节

第一个 AJAX 例子

假设服务器上有一个文本文件 demo.txt（内容为"你好，我是服务器数据"），用 $.get 读取并显示它：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://example.com/jquery.min.js"></script>
<!-- 说明：https://example.com 为占位域名，实际使用请替换为本地 jquery.min.js 或官方 CDN -->
</head>
<body>
<button id="btn">点击加载数据</button>
<div id="box"></div>
<script>
$(function () {
  $("#btn").click(function () {
    $.get("demo.txt", function (data) {
      $("#box").html(data); // 效果：div 中显示"你好，我是服务器数据"
    });
  });
});
</script>
</body>
</html>

注意：AJAX 请求必须通过 http/https 协议访问（例如本地用 VS Code 的 Live Server 插件启动），直接双击 HTML 文件以 file:// 方式打开会失败。

同源策略与跨域

出于安全考虑，浏览器默认只允许向"同源"（同协议、同域名、同端口）的地址发起请求，这叫同源策略。跨域请求需要服务器返回 CORS 响应头，或借助 JSONP 等方案，这在你学习后期对接第三方接口时会经常遇到。

小结：AJAX 让页面"静悄悄地"与服务器交换数据，jQuery 则用 load、$.get、$.post、$.ajax 等简洁 API 让这件事变得极其简单。下一节我们先学最直观的 load() 方法。

笔记加载中…

标签：#jQuery

返回知识库