【jQuery】jQuery 处理 Ajax 以及解决跨域问题的方式

🕗 发布于 2024-10-18 13:30 jquery javascript 前端

文章目录

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.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 // 请求超时时间（毫秒）
});

跨域

跨域（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 请求。它的原理是利用 <script> 标签不受同源策略限制的特点，通过动态插入 <script> 标签来请求数据。

实现简单，兼容性好，不受同源策略的限制
只适用于 GET 请求
安全性较低，容易被注入恶意代码

function handleResponse(data) {
    console.log('响应数据：', data);
}

var script = document.createElement('script');
script.src = 'https://api.example.com/data?callback=handleResponse';
document.body.appendChild(script);

iframe

基于 iframe 实现跨域并通过设置 document.domain 的方法，适用于子域名之间需要进行通信的情况。这种方法依赖于将不同子域名的 document.domain 设置为相同的主域名，从而使这些子域名的页面能够在同一个顶级域名下互相访问对方的 DOM。

假设有两个子域名 a.example.com 和 b.example.com，它们都属于 example.com 这个顶级域名。在这种情况下，可以通过设置 document.domain 来实现跨域通信。

【parent.html （放置在 a.example.com 上）】
<script>
    document.domain = 'example.com'; // 设置document.domain
</script>
<body>
    <h1>Parent Page</h1>
    <iframe id="childIframe" src="http://b.example.com/child.html"></iframe>
    <script>
        var childIframe = document.getElementById('childIframe');
        if (childIframe.contentWindow.document.domain === document.domain) {
            // 现在可以访问子页面的DOM
            console.log(childIframe.contentDocument.body.innerHTML);
        }
    </script>
</body>

【child.html （放置在 b.example.com 上）】
<script>
    document.domain = 'example.com'; // 设置document.domain
</script>
<body>
    <h1>Child Page</h1>
    <p>Hello from Child Page!</p>
</body>

web sockets

WebSockets 是一种用于实现实时双向通信的技术，与传统的 HTTP 请求不同，WebSocket 提供了一个持久的连接，使得客户端和服务器可以持续不断地交换数据。当使用 WebSocket 连接时，浏览器会首先发送一个带有特定头部的 HTTP 升级请求（Upgrade Request）。如果服务器同意升级连接，则会返回带有相应头部的 HTTP 响应，从而建立 WebSocket 连接。

使用 WebSocket 需要服务器端的支持和适当的配置。通过设置 CORS 响应头或使用代理服务器，可以实现客户端与服务器之间的实时双向通信。这种方法适用于需要实时数据交换的应用场景，如聊天应用、实时游戏等。

原文地址：https://blog.csdn.net/m0_66584716/article/details/142974700

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！

上一篇：家庭事务管理系统|基于java和vue的家庭事务管理系统设计与实现(源码+数据库+文档)
下一篇：深度解读 MySQL 8.0 数据字典重构：源码解析与实践

深入剖析：.Net8 引入非root用户运行的新特性提升应用安全性
确保您的.NET应用程序能够以非root用户身份运行，不仅是一个好的安全实践，也是面向未来的必要步骤，毕竟未来的.NET版本与云原生技术的整合将会越来越紧密。如果攻击者能够利用应用中的漏洞或容器配置上
阅读更多2024-10-19
用Python保存PowerPoint演示文稿中的形状为图片
本文演示如何使用Python将PowerPoint演示文稿中的形状保存图像文件。
阅读更多2024-10-19
MySQL在5.6为啥引入索引条件下推
是 MySQL 在 5.6 版本引入的一项优化技术。它通过将某些查询条件推送到存储引擎层来减少回表操作，从而提高查询效率。通常在使用范围查询或多列索引时，当查询条件没有完全匹配最左列，MySQL 会进
阅读更多2024-10-19
西瓜书书本内容杂谈
西瓜书只能说快速过了一遍，花了一个多星期吧，然后后边的内容是一点也看不懂了（能发现前面记得比较详细，到了后边是看不懂一点了，脑壳痛QWQ就不像是一本新手的入门书籍，太难受了ಥ_ಥ，了解概念这本书也不适
阅读更多2024-10-19
【开源免费】基于SpringBoot+Vue.JS社区团购系统（JAVA毕业设计）
社区团购系统作为一种创新的商业模式，具有显著的社会可行性。首先，它通过集中采购和配送，有效降低了物流成本，使得消费者能够以更低的价格购买到优质的商品。其次，社区团购系统依托于社区内的居民，形成了一种基
阅读更多2024-10-19
C for Graphic：径向模糊
原理：获取中心点（centeruv）到当前像素（pixeluv）的朝向法向量（ndir），pixeluv沿着ndir进行向前向后的像素颜色采样，并叠加到当前像素颜色（pixelcolor）以pixel
阅读更多2024-10-19
【MR开发】在Pico设备上接入MRTK3（三）——在Unity中运行MRTK示例
在Pico的Unity开发工程导入MRTK3
阅读更多2024-10-19
AI 编译器学习笔记之七 -- 机器学习的应用
1、MeloTTS:
阅读更多2024-10-19
UNI VFX Missiles Explosions for Visual Effect Graph
它包含以下事件/效果：创建、循环、击中、结束和停止。在此情况下，您从“创建”事件开始，然后自动继续“循环”事件。每次波浪击中敌人时，您都会发送“击中”事件以显示相应的效果。当波浪结束时，发送一个“结束
阅读更多2024-10-19
Agent自动执行异常场景下，通过人工介入提高可用性|实在Agent研究
此时，人工介入成为关键，凭借人类的直觉、经验和全局视角，迅速定位问题并制定解决方案，有效避免错误扩大，显著提升系统的稳定性和可用性。可以看到Tars-Agent不再提示找不到启动程序路径了，而是切换成
阅读更多2024-10-19