【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.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 响应头或使用代理服务器，可以实现客户端与服务器之间的实时双向通信。这种方法适用于需要实时数据交换的应用场景，如聊天应用、实时游戏等。