【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 协议请求方法

原生创建 Ajax

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术

原生创建 Ajax 的步骤：1. 创建 Ajax 对象；2. 连接到服务器；3. 发送请求；4. 接收返回值。

if (window.XMLHttpRequest) {
    var oAjax = new XMLHttpRequest();
} else {
    var oAjax = new ActiveXObject("Microsoft.XMLHTTP");
}

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(); 

var oAjax = new XMLHttpRequest();
oAjax.open('POST', 'https://api.example.com/data', true);

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' })); 

jQuery 处理 Ajax

$.ajax()

通过 HTTP 请求加载远程数据

语法：jQuery.ajax([settings])

• settings：可选。用于配置 Ajax 请求的键值对集合

$("#b01").click(function(){
    htmlobj = $.ajax({url:"/jquery/test1.txt",async:false});
    $("#myDiv").html(htmlobj.responseText);
});

参数

常见配置选项

$.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, 
    cache: true, 
    timeout: 0, 
    global: true, 
    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('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('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, 
    cache: false, 
    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 请求。它的原理是利用 标签不受同源策略限制的特点，通过动态插入 标签来请求数据。

• 实现简单，兼容性好，不受同源策略的限制
• 只适用于 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'; 
script>
body>
    h1>Parent Pageh1>
    iframe id="childIframe" src="http://b.example.com/child.html">iframe>
    script>
        var childIframe = document.getElementById('childIframe');
        if (childIframe.contentWindow.document.domain === document.domain) {
            
            console.log(childIframe.contentDocument.body.innerHTML);
        }
    script>
body>

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

web sockets

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

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