文章目录
- AJAX介绍
- XMLHttpRequest
- jQuery实现Ajax
- $.ajax()
- $().load()
- $.get()
- $.post()
AJAX介绍
AJAX（Asynchronous JavaScript and XML）是一种创建高效、动态网页应用的网页开发技术。它允许在不重新加载整个页面的情况下进行异步数据更新和交互，从而提供更流畅的用户体验。尽管名字中包含了XML，但实际上，AJAX可以使用任何格式的数据，包括JSON、HTML等。
AJAX的工作原理
- 客户端请求：用户在网页上执行某些操作（如点击按钮），触发JavaScript代码发送一个异步请求到服务器。
- 服务器处理：服务器接收请求后，处理这些请求，并返回响应给客户端。
- 客户端处理：客户端通过JavaScript接收到服务器的响应，并根据需要更新页面的一部分，而不需要刷新整个页面。
AJAX与传统Web的主要区别
| 方式及比较项 | 传统Web | Ajax技术 |
|---|---|---|
| 发送请求方式 | 浏览器发送同步请求 | 异步引擎对象发送请求 |
| 服务器响应 | 响应内容是一个完整页面 | 响应内容只是需要的数据 |
| 客户端处理方式 | 需等待服务器响应完成并重新加载整个页面后用户才能进行操作 | 可以动态更新页面中的部分内容 不影响用户在页面进行其他操作 |
XMLHttpRequest
XMLHttpRequest (XHR) 是一个内置在浏览器中的API，是实现AJAX功能的核心技术之一。用于在客户端和服务器之间异步交换数据。
主要方法和属性
open()：初始化一个新的请求。这个方法接受三个参数：请求的方法（GET、POST等）、请求的URL以及是否异步执行该请求。
xhr.open('GET', 'https://example.com/data', true);
send()：发送请求。对于POST请求，可以在 send() 方法中传递请求体数据。
xhr.send(data);
setRequestHeader()：设置HTTP请求头。这对于发送带有特定头部信息的请求非常有用。
xhr.setRequestHeader('Content-Type', 'application/json');
onreadystatechange：当 readyState 属性改变时调用的事件处理器。
readyState 的值有五个：
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
status 和 statusText：分别表示HTTP状态码和状态消息，如 200 OK、404 Not Found 等。
responseType：指定响应的数据类型，如 'text', 'json', 'document', 'arraybuffer' 或 'blob'。
response 和 responseText：分别用于获取响应数据。response 是根据 responseType 设置的响应类型，而 responseText 总是返回字符串形式的响应。responseXML 将XML格式的响应内容解析成DOM对象。
jQuery实现Ajax
| 请求方法 | 描述 | 适用场景 |
|---|---|---|
| $.ajax() | 通用的 AJAX 方法，可以处理各种类型的 HTTP 请求 | 功能最全但也最复杂 |
| $().load() | 用于将外部 HTML 文件的内容加载到当前页面指定元素的方法 | 使用简单，功能有限 |
| $.get() | 专门用于处理 GET 请求 | 使用简单，功能有限 |
| $.post() | 专门用于处理 POST 请求 | 适用于动态加载页面内容 |
$.ajax()
通过 HTTP 请求加载远程数据
语法：jQuery.ajax([settings])
- settings：可选。用于配置 Ajax 请求的键值对集合
$("#b01").click(function(){htmlobj = $.ajax({url:"/jquery/test1.txt",async:false});$("#myDiv").html(htmlobj.responseText);
});
参数
| 参数 | 类型 | 描述 |
|---|---|---|
| options | Obiect | 可选，AJAX 请求设置，所有选项都是可选的 |
| async | Boolean | 默认值异步请求 true 同步请求为 false |
| cache | Boolean | 默认值 true dataType 为 script 和 jsonp 时默认不缓存此页面 false |
| data | String | 发送到服务器的数据 |
| dataType | String | 预期服务器返回的数据类型 |
| error | Function | 请求失败时调用此函数 |
| success | Function | 请求成功后的回调函数 |
| jsonp | String | 在一个 jsonp 请求中重写回调函数的名字 |
| jsonpCallback | String | 为 jsonp 请求指定一个回调函数名 |
常见配置选项
$.ajax({url: '请求的URL',type: '请求类型（如GET、POST等）',data: '要发送的数据（如果是GET请求，通常将数据附加到URL中）',contentType: '发送数据的内容类型（默认为"application/x-www-form-urlencoded; charset=UTF-8"）',dataType: '预期服务器返回的数据类型（如html、json、xml、script、text等）',success: function(data, textStatus, jqXHR) {// 请求成功时执行的函数},error: function(jqXHR, textStatus, errorThrown) {// 请求失败时执行的函数},complete: function(jqXHR, textStatus) {// 请求完成后执行的函数，无论成功还是失败},beforeSend: function(jqXHR, settings) {// 在请求发送之前执行的函数},async: true, // 默认情况下为异步请求，设置为false则变为同步请求cache: true, // 默认情况下GET请求会被缓存timeout: 0, // 请求超时时间（毫秒），默认为0（无超时）global: true, // 触发全局AJAX事件processData: true, // 默认情况下会尝试处理发送的数据为查询字符串traditional: false, // 用于序列化数组的参数
});
$().load()
从服务器加载数据，并把返回的数据放入被选元素中
语法：$(selector).load(URL [, data] [, callback]);
- selector：一个 CSS 选择器字符串，用于匹配 DOM 元素。
- URL：一个字符串，指定要加载的 HTML 文件的 URL。
- data：可选参数，一个对象，包含要发送到服务器的数据，这些数据会以
POST方式发送。 - callback：可选参数，一个函数，当请求完成时调用（在文档片段被插入到 DOM 中之后）。
【data.html】
<p>Hello from data.html</p>
<div id="content"></div>
<script>$(document).ready(function() {$('#content').load('data.html', function(response, status, xhr) {if (status == 'success') {console.log('加载成功');} else if (status == 'error') {console.error('加载失败: ' + xhr.status + ' ' + xhr.statusText);} else if (status == 'complete') {console.log('加载完成');}});});
</script>
#content元素将会被填充data.html文件的内容。
$.get()
通过 HTTP GET 请求从服务器上请求数据
语法：$.get(url, [data], [callback], [dataType]);
-
url：必需，一个字符串，表示请求的 URL。
-
data：可选，一个对象或字符串，表示要发送到服务器的数据。
-
callback：可选，一个函数，当请求成功时执行。此函数接受三个参数：
data：服务器返回的数据。
statusText：HTTP 状态文本，如 “success” 或 “error”。
jqXHR：jQuery 的XMLHttpRequest对象。 -
dataType：可选，预期服务器返回的数据类型，如 “xml”, “html”, “script”, “json”, “text”, “jsonp” 等。
// 带数据的 GET 请求
$.get('https://api.example.com/data', { key: 'value' }, function(data, status) {console.log('请求成功，状态：' + status);console.log('返回的数据：', data);
});
// 错误处理
$.get('https://api.example.com/data', function(data, status, jqXHR) {if (status === 'success') {console.log('请求成功，返回的数据：', data);} else if (status === 'error') {console.error('请求失败，状态码：' + jqXHR.status);}
});
$.post()
通过 HTTP POST 请求从服务器上请求数据
语法：$.post(url, [data], [callback], [dataType]);
参数同上
// 简单的 POST 请求
$.post('https://api.example.com/data', { key: 'value' }, function(data, status) {console.log('请求成功，状态：' + status);console.log('返回的数据：', data);
});
// 指定数据类型
$.post('https://api.example.com/data', { key: 'value' }, function(data) {console.log('请求成功，返回的数据：', data);
}, 'json');
// 错误处理
$.post('https://api.example.com/data', {key:'value'}, function(data,status,jqXHR) {if (status === 'success') {console.log('请求成功，返回的数据：', data);} else if (status === 'error') {console.error('请求失败，状态码：' + jqXHR.status);}
});
除上述基本用法外，$.post() 还可以接受一个配置对象，类似于 $.ajax() 方法的选项
$.post({url: 'https://api.example.com/data',data: { key: 'value' },success: function(data, status, jqXHR) {console.log('请求成功，状态：' + status);console.log('返回的数据：', data);},error: function(jqXHR, textStatus, errorThrown) {console.error('请求失败，状态码：' + jqXHR.status);console.error('错误信息：' + errorThrown);},complete: function(jqXHR, textStatus) {console.log('请求完成，状态：' + textStatus);},dataType: 'json',async: true, // 默认为 true，表示异步请求cache: false, // 默认情况下，POST 请求不会被缓存timeout: 3000 // 请求超时时间（毫秒）
});
- $.post(URL,data,success,“json”);
- $.getJSON(URL,data,success)
- $.get(URL,data,success,“json”)
