【jQuery】jQuery 处理 Ajax 以及解决跨域问题的方式
文章目录
-
- HTTP
- 原生创建 Ajax
- jQuery 处理 Ajax
-
- $.ajax()
- $().load()
- $.get()
- $.post()
- 跨域
-
- CORS
- JSONP
- iframe
- web sockets
HTTP
超文本传输协议（HTTP，HyperText Transfer Protocol)是互联网上应用最为广泛的一种网络协议。设计 HTTP 最初的目的是为了提供一种发布和接收 HTML 页面的方法。
一次 HTTP 操作称为一个事务，其工作过程可分为四步
HTTP协议请求方法
| 方法 | 说明 |
|---|---|
| OPTIONS | 返回服务器针对特定资源所支持的HTTP请求方法 |
| HEAD | 向服务器索要与GET请求相一致的响应，只不过响应体将不会被返回 |
| GET | 向特定的资源发出请求 |
| POST | 向指定资源提交数据进行处理请求 |
| PUT | 向指定资源位置上传其最新内容 |
| DELETE | 请求服务器删除Request-URI所标识的资源 |
| TRACE | 回显服务器收到的请求，主要用于测试或诊断 |
| CONNECT | HTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器 |
| PATCH | 实体中包含一个表，表中说明与该URI所表示的原内容的区别 |
| GET | POST | |
|---|---|---|
| 缓存 | 能被缓存 | 不能缓存 |
| 编码类型 | application/x-www-form-urlencoded | application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多重编码 |
| 历史 | 参数保留在浏览器历史中 | 参数不会保存在浏览器历史中 |
| 对数据长度的限制 | 当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符） | 无限制 |
| 对数据类型的限制 | 只允许 ASCII 字符 | 没有限制，也允许二进制数据 |
| 安全性 | 与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分 | POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中 |
| 可见性 | 数据在 URL 中对所有人都是可见的 | 数据不会显示在 URL 中 |
原生创建 Ajax
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术
原生创建 Ajax 的步骤：1. 创建 Ajax 对象；2. 连接到服务器；3. 发送请求；4. 接收返回值。
// 创建 Ajax 对象
if (window.XMLHttpRequest) {
var oAjax = new XMLHttpRequest();// IE7+ Firefox Chrome Opera Safari 浏览器执行代码
} else {
var oAjax = new ActiveXObject("Microsoft.XMLHTTP");// IE6 IE5 浏览器执行代码
}
XMLHttpRequest 是 JavaScript 中用于实现 AJAX（Asynchronous JavaScript and XML）请求的一个核心对象。
open() 方法用于初始化一个到服务器的请求。
send() 方法用于发送已经初始化的请求。
open()
语法：oAjax.open(method, url, async, user, password);
- method：请求方法，通常是
GET或POST，也可以是PUT,DELETE等。 - url：请求的目标 URL。
- async：是否异步执行，默认为
true表示异步，false表示同步。 - user：可选参数，用于需要 HTTP 认证的情况，提供用户名。
- password：可选参数，用于需要 HTTP 认证的情况，提供密码。
send()
语法：oAjax.send(data);
- data：可选参数，用于发送到服务器的数据。对于
GET请求，通常不需要传递任何数据；而对于POST、PUT等请求，则通常需要传递数据。数据可以是字符串、FormData 对象、Blob 对象或 ArrayBuffer 对象等。
var oAjax = new XMLHttpRequest();
oAjax.open('GET', 'https://api.example.com/data?param=value', true);
oAjax.onload = function () {
if (oAjax.status >= 200 && oAjax.status < 300) {
console.log(oAjax.responseText); // 成功获取数据
} else {
console.error('请求失败: ' + oAjax.status);
}
};
oAjax.send(); // GET 请求不需要传递数据
var oAjax = new XMLHttpRequest();
oAjax.open('POST', 'https://api.example.com/data', true);
// POST 请求通常需要在发送请求前设置请求头
oAjax.setRequestHeader('Content-Type', 'application/json');
oAjax.onload = function () {
if (oAjax.status >= 200 && oAjax.status < 300) {
console.log(oAjax.responseText); // 成功获取数据
} else {
console.error('请求失败: ' + oAjax.status);
}
};
oAjax.send(JSON.stringify({ key: 'value' })); // 传递 JSON 数据
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.htmlp>
<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 // 请求超时时间（毫秒）
});
跨域
跨域（Cross-Origin）是指从一个域名发起的请求试图访问另一个域名下的资源。浏览器出于安全原因实施了同源策略（Same-Origin Policy），即要求请求的域名、协议和端口必须与当前页面一致。如果不一致，就会产生跨域问题。
例子：在网站中使用ajax请求其他网站的天气、快递或者其他数据接口
针对跨域问题，有多种解决方案：
CORS
CORS（Cross-Origin Resource Sharing）是一种现代的跨域解决方案，通过在服务器端设置响应头来允许跨域请求。
- 优点：支持所有 HTTP 请求类型（GET、POST、PUT、DELETE 等）
- 优点：安全性较高
- 缺点：ie10以下不支持（可以用XDR实现）
在服务器端，需要设置 Access-Control-Allow-Origin 响应头，允许跨域请求。
// *: 表示所有的域都可以接受
Access-Control-Allow-Origin: *
JSONP
JSONP（JSON with Padding）是一种早期的跨域解决方案，适用于 GET 请求。它的原理是利用