本节我们学习 AJAX，AJAX 是 Asynchronous Javascript And XML 的首字母缩写，译为异步 JavaScript 和 XML。是指一种创建交互式、快速动态网页应用的网页开发技术，可以在不需要重新加载整个网页的情况下，更新部分网页的技术。
AJAX 不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
jQuery 提供多个与 AJAX 有关的方法。通过 jQuery 提供的 AJAX 方法，我们可以使用 HTTP 的 Get 和 Post 请求从远程服务器上请求文本、HTML、XML 或 JSON，并且能够把这些外部数据直接载入网页的被选元素中。
load()方法
load() 方法是一个简单但强大的 AJAX 方法。可以从服务器加载数据，并把返回的数据放置到指定的元素中。
语法如下：
$(selector).load(url,data,function(response,status,xhr))
-
url：必需的参数，指定加载的url。 -
data：可选参数，指定一组要随请求一起发送的querystring键值对。 -
function(response,status,xhr)：可选参数，规定load()方法完成时运行的回调函数。
回调函数的三个参数：
-
responseTxt：如果调用成功，包含来自请求的结果数据。 -
statusTxt：包含请求的状态。successnotmodifiederrortimeoutparsererror
-
xhr：包含xmlhttprequest对象。
示例：
例如将文件名为 test_ajax.txt 文件中的内容加载到指定的 <div> 元素中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$("#add").load("./test_ajax.txt");
});
});
</script>
</head>
<body>
<p>将 test_ajax.txt 文件中的内容添加到下面 div 元素中：</p>
<div id="add"></div>
<p><button>点击添加</button></p>
</body>
</html>
test_ajax.txt 文件内容：
你好，侠课岛！
在浏览器中的演示效果：
我们还可以通过可选的 callback 参数在 load() 方法完成后显示一个提示框，例如成功执行显示"外部内容加载成功！"，如果失败，则显示错误消息：
$(function(){
$("button").click(function(){
$("#add").load("./test_ajax.txt", function(responseTxt,statusTxt,xhr){
if(statusTxt=="success"){
alert("外部内容加载成功！");
}
if(statusTxt=="error"){
alert("Error: "+xhr.status+": "+xhr.statusText);
}
});
});
});
演示效果：
Get和Post请求
jQuery 中的 get() 和 post() 方法用于通过 HTTP 的 GET 或 POST 请求从服务器请求数据。
-
GET请求：从指定的资源请求数据。 -
POST请求：向指定的资源提交要处理的数据。GET基本上用于从服务器获得数据。POST也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。
$.get() 方法
$.get() 方法通过 GET 请求从服务器上请求数据。
语法如下：
$.get(URL,callback);
-
URL：必需参数，用于规定希望请求的URL。 -
callback：可选参数，是请求成功后所执行的函数名。
示例：
例如使用 $.get() 方法从服务器上的一个文件中取回数据：
$(function(){
$("button").click(function(){
$.get("./test_ajax.txt", function(data, status){
alert("内容：" + data + "\n状态：" + status);
});
});
});
演示效果：
可以看到，在
$get 方法中的回调函数带有两个参数，参数 data 返回 test_ajax.txt 文件的内容，参数 status 返回请求状态，success 表示请求成功。
$.post()方法
$.post() 方法通过 POST 请求从服务器上请求数据。
语法如下：
$.post(URL,data,callback);
-
URL：必需参数，用于规定希望请求的URL。 -
data：可选参数，用于规定连同请求发送的数据。 -
callback：可选参数，是请求成功后所执行的函数名。
示例：
$(function(){
$("button").click(function(){
$.post("./test_ajax.txt",
function(data, status){
alert("内容：" + data + "\n状态：" + status);
});
});
});
演示效果：
ajax()方法
ajax() 方法用于执行 AJAX（异步 HTTP）请求。所有的 jQuery AJAX 方法都使用 ajax() 方法。该方法通常用于其他方法不能完成的请求。
语法如下：
$.ajax({name:value, name:value, ... })
ajax() 方法中参数规定 AJAX 请求的一个或多个名称/值对。
示例：
使用 AJAX 请求将获取到的内容添加到 <div> 元素中：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
$(function(){
$("button").click(function(){
$.ajax({url:"./test_ajax.txt", success:function(result){
$("#add").html(result);
}});
});
});
</script>
</head>
<body>
<p>将 test_ajax.txt 文件中的内容添加到下面 div 元素中：</p>
<div id="add"></div>
<p><button>点击添加</button></p>
</body>
</html>
演示效果：
ajax() 方法中可能出现的名称/值有如下所示：
| 名称 | 值/描述 |
|---|---|
| async | 布尔值，表示请求是否异步处理。默认是 true。 |
| beforeSend(xhr) | 发送请求前运行的函数。 |
| cache | 布尔值，表示浏览器是否缓存被请求页面。默认是 true。 |
| complete(xhr,status) | 请求完成时运行的函数（在请求成功或失败之后均调用，即在 success 和 error 函数之后）。 |
| contentType | 发送数据到服务器时所使用的内容类型。默认是："application/x-www-form-urlencoded"。 |
| context | 为所有 AJAX 相关的回调函数规定 "this" 值。 |
| data | 规定要发送到服务器的数据。 |
| dataFilter(data, type) | 用于处理 XMLHttpRequest 原始响应数据的函数。 |
| dataType | 预期的服务器响应的数据类型。 |
| error(xhr,status,error) | 如果请求失败要运行的函数。 |
| global | 布尔值，规定是否为请求触发全局 AJAX 事件处理程序。默认是 true。 |
| ifModified | 布尔值，规定是否仅在最后一次请求以来响应发生改变时才请求成功。默认是 false。 |
| jsonp | 在一个 jsonp 中重写回调函数的字符串。 |
| jsonpCallback | 在一个 jsonp 中规定回调函数的名称。 |
| password | 规定在 HTTP 访问认证请求中使用的密码。 |
| processData | 布尔值，规定通过请求发送的数据是否转换为查询字符串。默认是 true。 |
| scriptCharset | 规定请求的字符集。 |
| success(result,status,xhr) | 当请求成功时运行的函数。 |
| timeout | 设置本地的请求超时时间（以毫秒计）。 |
| traditional | 布尔值，规定是否使用参数序列化的传统样式。 |
| type | 规定请求的类型（GET 或 POST）。 |
| url | 规定发送请求的 URL。默认是当前页面。 |
| username | 规定在 HTTP 访问认证请求中使用的用户名。 |
| xhr | 用于创建 XMLHttpRequest 对象的函数。 |
网友评论