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

news2024/10/18 5:20:26

文章目录

    • 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回显服务器收到的请求，主要用于测试或诊断
CONNECTHTTP/1.1协议中预留给能够将连接改为管道方式的代理服务器
PATCH实体中包含一个表，表中说明与该URI所表示的原内容的区别
GETPOST
缓存能被缓存不能缓存
编码类型application/x-www-form-urlencodedapplication/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);
});

参数

参数类型描述
optionsObiect可选，AJAX 请求设置，所有选项都是可选的
asyncBoolean默认值异步请求 true 同步请求为 false
cacheBoolean默认值 true dataType 为 script 和 jsonp 时默认不缓存此页面 false
dataString发送到服务器的数据
dataTypeString预期服务器返回的数据类型
errorFunction请求失败时调用此函数
successFunction请求成功后的回调函数
jsonpString在一个 jsonp 请求中重写回调函数的名字
jsonpCallbackString为 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 响应头或使用代理服务器，可以实现客户端与服务器之间的实时双向通信。这种方法适用于需要实时数据交换的应用场景，如聊天应用、实时游戏等。

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/2217546.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

Redis中String类型数据扩容原理分析

Redis中String类型数据扩容原理分析

大家好&#xff0c;我是 V 哥。在 Java 中&#xff0c;我们有动态数组ArrayList&#xff0c;当插入新元素空间不足时&#xff0c;会进行扩容&#xff0c;好奇 Redis 中的 String 类型&#xff0c;C 语言又是怎样的实现策略&#xff0c;带着疑问&#xff0c;咱们来了解一下。 最…
阅读更多...
集成电路公司进销存系统生成合同——未来之窗行业应用跨平台架构

集成电路公司进销存系统生成合同——未来之窗行业应用跨平台架构

一、进销存生成合同优势 1. 提高效率&#xff1a;节省了手动起草和编辑合同的时间&#xff0c;能够快速生成合同&#xff0c;加快业务流程。 2. 减少错误&#xff1a;避免了人工输入可能导致的拼写、数据错误等&#xff0c;提高合同的准确性和规范性。 3. 数据一致性&#xff…
阅读更多...
Python Web服务器网关接口

Python Web服务器网关接口

gunicorn 是 WSGI。 因其中一个项目说是要用 gunicorn &#xff0c;然后就顺便了解下 gunicorn 这个东西是干什么的。 要想了解 gunicorn &#xff0c;那么就需要知道 WSGI 是什么东西。 开始都不知道 WSGI 是什么概念&#xff0c;还以为是个新东西。 其实就是 Python 实现…
阅读更多...
通过Caffeine实现JVM进程缓存、配置OpenResty完成nginx的本地缓存和redis操作，Canal实现缓存同步——配置多级缓存，一篇足矣

通过Caffeine实现JVM进程缓存、配置OpenResty完成nginx的本地缓存和redis操作，Canal实现缓存同步——配置多级缓存，一篇足矣

目录 JVM缓存&#xff08;本地进程缓存&#xff09;Caffeine技术栈基础介绍&#xff1a; OpenResty技术栈基础介绍 Canal技术栈介绍 一、通过Caffeine实现进程缓存 1.1首先需要为你需要的数据构建Cache缓存对象&#xff0c;为了方便使用&#xff0c;可以将其声明为一个bea…
阅读更多...
Android 13.0 Launcher3定制之首页时钟小部件字体大小修改

Android 13.0 Launcher3定制之首页时钟小部件字体大小修改

1.前言 在13.0的系统rom产品开发中，在一些Launcher3的定制化开发中，在对于一些小屏幕的产品开发中，在首页添加时钟小部件会显得字体有点小， 所以为了整体布局美观就需要改动小部件的布局日期字体的大小来实现整体的布局美观效果，接下来来具体实现相关的功能 具体效果图: …
阅读更多...
linux 修改主机名和用户名颜色

linux 修改主机名和用户名颜色

编译 ~/.bashrc vim ~/.bashrc 如下格式 PS1\[\e[1;31m\]\h:\[\e[0;32m\]\w \[\e[1;34m\]\u\[\e[0m\]\$ 颜色随自己喜好修改 如下使其生效 source ~/.bashrc 效果如下 Enjoy&#xff01;&#xff01;&#xff01;
阅读更多...
数学考研错题本：查漏补缺，高效提升备考策略

数学考研错题本：查漏补缺，高效提升备考策略

考研之路漫长而艰辛&#xff0c;对于数学这一学科来说&#xff0c;错题本的建立与利用显得尤为重要&#xff0c;通过分析错题&#xff0c;我们可以查漏补缺&#xff0c;找到自己的薄弱环节&#xff0c;从而有针对性地进行复习&#xff0c;本文将详细阐述如何建立和利用数学考研…
阅读更多...
【数据采集工具】Sqoop从入门到面试学习总结

【数据采集工具】Sqoop从入门到面试学习总结

国科大学习生活&#xff08;期末复习资料、课程大作业解析、大厂实习经验心得等&#xff09;: 文章专栏&#xff08;点击跳转&#xff09; 大数据开发学习文档&#xff08;分布式文件系统的实现&#xff0c;大数据生态圈学习文档等&#xff09;: 文章专栏&#xff08;点击跳转&…
阅读更多...
数控机械制造工厂ERP适用范围有哪些

数控机械制造工厂ERP适用范围有哪些

在当今制造业高速发展的背景下&#xff0c;企业资源计划(ERP)系统已成为提升工厂管理效率、实现生产自动化与信息化的关键工具。特别是对于数控机械制造工厂而言&#xff0c;一个合适的ERP系统能够帮助其优化生产流程、提高产品质量、降低生产成本并增强市场竞争力。 1. 生产计…
阅读更多...
React 项目热更新失效问题的解决方案和产生的原因

React 项目热更新失效问题的解决方案和产生的原因

背景和意义 在修复React项目热更新失效的问题时&#xff0c;经过一系列问题排查和依赖升级&#xff0c;最终成功修复了问题并为后续开发规避了类似的问题。 依赖升级 Vite版本升级 原React项目Vite版本升级到^4.4.5 Vite 4 在构建和开发服务器的性能上进行了优化&#xff…
阅读更多...
Java--集合之vectorlinkedlisthashset结构

Java--集合之vectorlinkedlisthashset结构

文章目录 0.架构图1.vector解析2.LinkedList分析2.1源码分析2.2迭代器遍历的三种方式 3.set接口的使用方法3.1基本使用说明3.2基本遍历方式3.3HashSet引入3.4数组链表模拟3.5hashset扩容机制3.6hashset源码解读3.7扩容*转成红黑树机制**我的理解 0.架构图 1.vector解析 和之前介…
阅读更多...
15分钟学Go 第4天：Go的基本语法

15分钟学Go 第4天：Go的基本语法

第4天&#xff1a;基本语法 在这一部分&#xff0c;将讨论Go语言的基本语法&#xff0c;了解其程序结构和基础语句。这将为我们后续的学习打下坚实的基础。 1. Go语言程序结构 Go语言程序的结构相对简单&#xff0c;主要包括&#xff1a; 包声明导入语句函数语句 1.1 包声…
阅读更多...
物联网协议：MQTT、CoAP 和 LwM2M 的比较与应用

物联网协议：MQTT、CoAP 和 LwM2M 的比较与应用

目录标题 1.引言 &#x1f4d8;2. 物联网协议概述 &#x1f4da;3. MQTT 协议详解 &#x1f4e1;&#x1f4e1;&#x1f4e1;&#x1f4e1;3.1 协议特点3.2 工作原理3.3 应用场景 4. CoAP 协议详解 &#x1f517;4.1 协议特点4.2 工作原理4.3 应用场景 5. LwM2M 协议详解 ⚙️5…
阅读更多...
LeetCode刷题日记之贪心算法（一）

LeetCode刷题日记之贪心算法（一）

目录 前言分发饼干摆动序列最大子数组和总结 前言 作为LeetCode刷题的过程中&#xff0c;贪心算法一直是一个经典的算法思路。在这篇文章中&#xff0c;我将记录自己刷LeetCode贪心算法题的过程&#xff0c;并逐步梳理该算法的核心逻辑&#xff0c;包括如何选择最优解、判断局…
阅读更多...
PS证件照换底色

PS证件照换底色

ps工具&#xff1a;Adobe Photoshop 2021 文章目录 1. 扣取人物2. 更换底色 1. 扣取人物 2. 更换底色
阅读更多...
SpringSecurity使用介绍

SpringSecurity使用介绍

1、SpringSecurity 1.1 SpringSecurity简介 Spring Security是基于Spring的安全框架,提供了包含认证和授权的落地方案&#xff1b;Spring Security底层充分利用了Spring IOC和AOP功能&#xff0c;为企业应用系统提供了声明式安全访问控制解决方案&#xff1b;SpringSecurity可…
阅读更多...
数据字典是什么？和数据库、数据仓库有什么关系？

数据字典是什么？和数据库、数据仓库有什么关系？

一、数据字典的定义及作用 数据字典是一种对数据的定义和描述的集合&#xff0c;它包含了数据的名称、类型、长度、取值范围、业务含义、数据来源等详细信息。 数据字典的主要作用如下&#xff1a; 1. 对于数据开发者来说&#xff0c;数据字典包含了关于数据结构和内容的清晰…
阅读更多...
3. 单例模式唯一性问题—构造函数

3. 单例模式唯一性问题—构造函数

1. 构造函数带来的唯一性问题指什么&#xff1f; 对于不继承MonoBehaviour的单例模式基类 我们要避免在外部 new 单例模式类对象 例如 &#xff08;完整单例模式定义在上一节&#xff09; public class Main : MonoBehaviour {void Start(){// 破坏单例模式的唯一性&#xf…
阅读更多...
跨越距离：2024四大远程控制软件体验！

跨越距离：2024四大远程控制软件体验！

在多元化的现代生活中&#xff0c;远程控制软件已经成为我们不可或缺的助手。它们可以帮助我们实现远程办公、远程协助、远程游戏等多种功能。今天&#xff0c;我们就来为大家盘点几款热门的远程控制软件&#xff0c;包括向日葵远程控制、RayLink远程控制、Parsec和AirDroid&am…
阅读更多...
C++笔记之静态多态和动态多态

C++笔记之静态多态和动态多态

C++笔记之静态多态和动态多态 code review! 在C++中，多态（Polymorphism）是面向对象编程的一个核心概念，允许对象以多种形式存在。多态性主要分为静态多态（Static Polymorphism）和动态多态（Dynamic Polymorphism）。下面将详细解释这两种多态及其在C++中的实现方式、优缺…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023