javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】

下面是关于“javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】”的完整攻略：

AJAX简介

AJAX（Asynchronous JavaScript and XML）指的是利用JavaScript在不刷新整个页面的情况下向服务器发送请求和获取响应数据，在前端页面进行异步数据交互的技术。

AJAX 的优点有：用户体验好，可以实现页面的局部刷新，减少不必要的服务器请求。

XMLHttpRequest对象

在JavaScript中可以通过XMLHttpRequest对象来实现对服务器资源的请求。

XMLHttpRequest对象的主要方法和属性：

属性

readyState：存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。0: 请求未初始化，1: 服务器连接已建立，2: 请求已接收，3: 请求处理中，4: 请求已完成，且响应已就绪。
status：HTTP状态码。200表示请求成功；400表示请求出现了问题；500表示服务器错误。
responseText：响应返回的文本。
responseXML：响应的 XML 文档。

方法

open(method,url,async): method: 请求的类型；url: 请求的 URL；async: true（异步）或 false（同步）。
send(string): 将请求发送到服务器。string 仅用于 POST 请求。

jQuery 中的AJAX

在jQuery中，使用 $.ajax方法来实现AJAX请求。

$.ajax()的方法构造如下：

    $.ajax({
        url: '请求地址',
        type: 'GET/POST',
        data: '发送数据',
        dataType: '返回数据的格式（text/xml/json等）',
        success: function(data){
            //响应成功后的回调函数
        },
        error: function(xhr, status, error){
            //失败时的回调函数
        }
    });

下面是一个利用jQuery实现AJAX请求的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX request with jQuery</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h1>Welcome to AJAX with jQuery</h1>
    <button id="btn-click">Click for AJAX</button>

    <script>
        $(document).ready(function(){
            $("#btn-click").click(function(){
                $.ajax({
                    url: "https://api.coindesk.com/v1/bpi/currentprice.json",
                    dataType: "json",
                    success: function(data){
                        console.log(data);
                        alert("Current Bitcoin price: " + data.bpi.USD.rate + " USD");
                    }
                });
            });
        });
    </script>
</body>
</html>

在这个例子中，我们使用了$.ajax来请求 CoinDesk API获取了最新的比特币价格。在成功回调函数中，我们将当前比特币价格打印到控制台，并用一个弹窗来显示当前的美元价格。

AJAX跨域问题

XHR限制了AJAX只能在相同的域名下进行请求，如果要请求一个不同域名下的资源需要解决跨域问题。常见的解决跨域问题的方案如下：

JSONP

JSONP 是最常用的跨域技术，利用script标签完成跨域。常规情况下，script标签引用的是静态资源，如jquery.js等，但也可以引用包含一个callback参数的url来请求动态数据。服务器解析后将数据以函数参数形式返回，从而实现跨域。

下面是一个 JSONP 的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX request with JSONP</title>
</head>
<body>
    <h1>Welcome to AJAX with JSONP</h1>
    <button id="btn-click">Click for JSONP</button>

    <script>
        function jsonpCallback(data){
            console.log(data);
            alert("Current Bitcoin price: " + data.bpi.USD.rate + " USD");
        }

        function loadJSONP(){
            let script = document.createElement('script');
            script.type = "text/javascript";
            script.src = "https://api.coindesk.com/v1/bpi/currentprice.json?callback=jsonpCallback";
            document.getElementsByTagName('head')[0].appendChild(script);
        }

        document.getElementById("btn-click").addEventListener("click", function(){
            loadJSONP();
        });
    </script>
</body>
</html>

在上面的例子中，我们改变了jQuery例子中的$.ajax方法，并使用了一个特殊的URL，其中包含一个“callback”参数，指向一个在JavaScript文件内的全局函数。服务器端需要解析这个参数，并将数据返回给这个全局函数的参数中。

CORS

对于IE10及以上版本，Chrome、Firefox和Safari等浏览器都支持CORS（Cross-Origin Resource Sharing）技术。CORS是一种官方的跨域请求解决方案，需要在服务器中配置相关的响应头信息。

    response.setHeader("Access-Control-Allow-Origin", "http://localhost:8081");
    response.setHeader("Access-Control-Allow-Methods", "GET,POST");
    response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");

其中，"Access-Control-Allow-Origin"允许访问该资源的制定域名；"Access-Control-Allow-Methods"允许访问该资源的请求方法；"Access-Control-Allow-Headers"允许访问该资源的请求头信息。

在前端使用AJAX时，需要将xhr.withCredentials属性设为true，这样才能在请求中发送Cookies等用户认证凭据等信息。

下面是一个使用CORS实现AJAX跨域的示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX with CORS</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <h1>Welcome to CORS AJAX Request</h1>
    <button id="btn-click">Click for Cookies</button>

    <script>
        $(document).ready(function(){
            $("#btn-click").click(function(){
                $.ajax({
                    url: "http://localhost:8080",
                    type: "GET",
                    xhrFields: { withCredentials: true },
                    crossDomain: true,
                    success: function(data){
                        console.log(data);
                        alert("Server said: " + data.msg);
                    }
                });
            });
        });
    </script>
</body>
</html>

在这个例子中，我们通过将xhr.withCredentials属性设为true告诉浏览器，我们打算接收来自其他域的Cookies，并且通过crossDomain属性告诉jQuery这是一个跨域请求。服务器端设置了跨域策略允许了该资源的访问，其中"Access-Control-Allow-Origin"允许所有域名访问该资源，"Access-Control-Allow-Credentials"允许跨域请求携带cookie。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】 - Python技术站