Ajax--》请求操作以及跨域相关讲解

亦世凡华、 2023-04-08 原文

jQuery中的Ajax

在jQuery中应该如何发送Ajax请求呢？看到这篇文章你就能大概了解到如何在jQuery中发送Ajax。

要想使用jQuery框架，肯定是需要引进jQuery资源的，有两种方式，一种是将资源下载到本地，另一种是直接引入网站jQuery链接，推荐大家一个比较好用的网站：bootcdn 其网站致力于为许多像 Bootstrap、jQuery、Angular、Vuejs 一样优秀的前端开源项目提供稳定、快速的免费 CDN 加速服务。

点击相关需求，引入相关链接到HTML里面即可，请看如下操作：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">jQuery发送Ajax请求</h2>
        <button class="btn btn-paimary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法</button>
    </div>
    <script>
        $('button').eq(0).click(function(){
            // 参数分别是 url 参数对象 回调函数 响应体类型-json
            $.get('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){
                console.log(data);
            },'json')//加了json返回的结果是一个对象
        })
        $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){
                console.log(data);
            })//不加json返回的结果是一个字符串
        })
    </script>
</body>
</html>

// 1.引入express
const { response } = require('express')
const express = require('express')

// 2.创建应用对象
const app = express()

// 3.jQuery服务
app.all('/jquery',(request,response)=>{
    // 设置响应头
    response.setHeader('Access-Control-Allow-Origin','*')
    // response.send('hello jQuery')
    const data = {name:'张三'}
    response.send(JSON.stringify(data))
})

// 4.监听端口启动服务
app.listen(8000,()=>{
    console.log('服务已经启动,8080端口监听中....');
})

这里借用了一点bootstarp样式来修改一下CSS属性，让样式更好看点。

上面讲解了get和post请求操作，如果想单独设置个性化强一点的Ajax请求操作，可以选择通用型操作，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">jQuery发送Ajax请求</h2>
        <button class="btn btn-paimary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法</button>
    </div>
    <script>
        $('button').eq(2).click(function(){
            $.ajax({
                // url
                url:'http://127.0.0.1:8000/jquery',
                // 参数
                data:{a:100,b:200},
                // 请求类型
                type:'GET',
                // 响应体结果设置
                dataType:'json',
                // 成功的回调
                success:function(data){
                    console.log(data);
                },
                // 超时时间
                timeout:2000,
                // 失败的回调
                error:function(){
                    console.log('出错了！！');
                },
                // 头信息
                headers:{
                    c:300,
                    d:400
                }
            })
        })
    </script>
</body>
</html>

请求超时与网络异常处理

请求超时：当我们进行服务器数据传输时因为网络原因出现超时问题，我们设置超时规则来提示用户网络超时

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 200px;
            height: 100px;
            border: 1px solid #008c8c;
        }
    </style>
</head>
<body>
    <button>点击发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button')
        const result = document.querySelector('#result')
        btn.addEventListener('click',function(){
            const xhr = new XMLHttpRequest()
            // 超时2s设置取消
            xhr.timeout = 2000
            // 超时回调
            xhr.ontimeout = function(){
                alert('网络异常，请稍后重试！！')
            }
            xhr.open('GET','http://127.0.0.1:8000/delay')
            xhr.send()
            xhr.onreadystatechange = function(){
                if(xhr.readyState === 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        result.innerHTML = xhr.response
                    }
                }
            }
        })
    </script>
</body>
</html>

设置express服务

// 1.引入express
const { response } = require('express')
const express = require('express')

// 2.创建应用对象
const app = express()


// 3.延时响应
app.get('/delay',(request,response)=>{
    // 设置响应头
    response.setHeader('Access-Control-Allow-Origin','*')
    // 设置延时效果
    setTimeout(()=>{
        // 设置响应体
        response.send('延时响应')
    },3000)
})

// 4.监听端口启动服务
app.listen(8000,()=>{
    console.log('服务已经启动,8080端口监听中....');
})

网络异常：访问网站时，如果网络突然断掉，通过Ajax来提醒我们网络断开。

取消请求

既然Ajax可以请求数据，那我们也可以将Ajax请求的数据取消也可以的，这里需要借助Ajax的一个属性 abort 来进行操作。案例如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击发送请求</button>
    <button>点击取消请求</button>
    <script>
        const btns = document.querySelectorAll('button')
        // 将x设置为全局变量
        let x = null
        btns[0].addEventListener('click',function(){
            x = new XMLHttpRequest()
            x.open('GET','http://127.0.0.1:8000/delay')
            x.send()
        })
        // 取消方法 abort
        btns[1].addEventListener('click',function(){
            x.abort()
        })
    </script>
</body>
</html>

当然我也设置一个延时服务来进行数据还没有请求完就取消的过程。

取消重复请求

在日常浏览网页中，可以由于一些网络或其他原因导致用户疯狂的进行数据请求，这样一来，用户的数量一高请求的数据就很庞大，导致服务器承受不住这么大的流量，所以我们就要进行取消重复的操作来缓解服务器的压力。操作过程如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击发送请求</button>
    <script>
        const btns = document.querySelector('button')
        // 将x设置为全局变量
        let x = null
        // 标识变量
        let isSending = false

        btns.addEventListener('click',function(){
            // 判断标识变量
            if(isSending) x.abort()//如果正在发送，则取消该请求，创建一个新的请求
            x = new XMLHttpRequest()
            // 修改 标识变量的值
            isSending = true
            x.open('GET','http://127.0.0.1:8000/delay')
            x.send()
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    // 修改标识变量
                    isSending = false
                }
            }
        })

    </script>
</body>
</html>

提供express服务

// 1.引入express
const { response } = require('express')
const express = require('express')

// 2.创建应用对象
const app = express()

// 3.延时响应
app.get('/delay',(request,response)=>{
    // 设置响应头
    response.setHeader('Access-Control-Allow-Origin','*')
    // 设置延时效果
    setTimeout(()=>{
        // 设置响应体
        response.send('延时响应')
    },3000)
})

// 4.监听端口启动服务
app.listen(8000,()=>{
    console.log('服务已经启动,8080端口监听中....');
})

Ajax请求—fetch()

fetch()方法用于发起获取资源的请求，它返回一个promise，这个promise会在请求响应后被resolve，并传回 response 对象。注意：fetch()方法的参数与request()构造器是一样的。

<body>
    <button>Ajax请求</button>
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            fetch('http://127.0.0.1:8000/fetch',{
                // 请求方法
                method:'POST',
                // 请求头
                headers:{
                    name:'zhangsan'
                },
                // 请求体
                body:'username=admin&password=admin'
            }).then(response=>{
                return response.json()
            }).then(response=>{
                console.log(response);
            })
        })
    </script>
</body>

// 1.引入express
const { response } = require('express')
const express = require('express')

// 2.创建应用对象
const app = express()

// 3.fetch服务
app.all('/fetch',(request,response)=>{
    // 设置响应头
    response.setHeader('Access-Control-Allow-Origin','*')
    response.setHeader('Access-Control-Allow-Headers','*')
    // response.send('hello jQuery')
    const data = {name:'张三'}
    response.send(JSON.stringify(data))
})

// 4.监听端口启动服务
app.listen(8000,()=>{
    console.log('服务已经启动,8080端口监听中....');
})

跨域

同源策略(Same-Origin-Policy)最早由 Netscape 公司提出，是浏览器的一种安全策略。同源就是协议、域名、端口号必须完全相同，违背同源策略就是跨域。Ajax默认遵循同源策略。

<body>
    <button>点击获取用户数据</button>
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            const x = new XMLHttpRequest()
            // 因为是满足同源策略的，所以url是可以简写的
            x.open('GET','/data')
            x.send()
            x.onreadystatechange = function(){
                if(x.readyState === 4){
                    if(x.status >= 200 && x.status <300){
                        console.log(x.response);
                    }
                }
            }
        })
    </script>
</body>

const { response, request } = require('express')
const express = require('express')
const app = express()
app.get('/home',(request,response)=>{
    // 响应一个页面
    response.sendFile(__dirname+'/index.html')
})

app.get('/data',(request,response)=>{
    response.send('用户数据')
})
app.listen(9000,()=>{
    console.log('9000端口开启，服务已启动...');
})

如何解决跨域：

JSONP，是一个非官方的跨域解决方案，由程序员开发出来，只支持get请求。在网页中有一些标签天生具有跨域能力，比如：img、link、iframe、script等，JSONP就是利用script标签的跨域能力来发送请求的。

原理：返回函数调用，并把参数放在里面，让前端的函数对它进行一个处理，用服务端代码去响应JS代码。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 300px;
            height: 200px;
            border: 1px solid #008c8c;
        }
    </style>
</head>

<body>
    <div id="result"></div>
    <script>
        // 处理函数
        function handle (data) {
            // 获取元素
            const result = document.querySelector('#result')
            result.innerHTML = data.name
        }
    </script>
    <!-- <script src="./app.js"></script> -->
    <script src="http://127.0.0.1:8000/jsonp"></script>
</body>

</html>

原生JS代码

const data = {
    name:'张三'
}

handle(data)

express服务

// 1.引入express
const { response } = require('express')
const express = require('express')

// 2.创建应用对象
const app = express()

// 3.JSONP服务
app.all('/jsonp',(request,response)=>{
    // response.send('console.log("hello jsonp");')
    const data = {
        name:'张三'
    }
    // 将数据转换为字符串
    let str = JSON.stringify(data)
    // 返回结果 end()不会加特殊响应头
    // 返回的结果是一个函数调用，而函数的实参就是我们想给客户端返回的结果数据
    response.end(`handle(${str})`)
})

// 4.监听端口启动服务
app.listen(8000,()=>{
    console.log('服务已经启动,8080端口监听中....');
})

jsonp实践：

<body>
    用户名：<input type="text" id="username">
    <p></p>
    <script>
        // 获取 input 元素
        const input = document.querySelector('input')
        const p = document.querySelector('p')

        // 声明 handle 函数
        function handle (data) {
            input.style.border = "solid 1px #f00"
            // 修改 p 标签的提示文本
            p.innerHTML = data.msg
        }

        // 绑定事件
        input.onblur = function () {
            // 获取用户的输入值
            let username = this.value
            // 向服务器发送请求，检测用户名是否存在
            // 1.创建 script 标签
            const script = document.createElement('script')
            // 2.设置标签的 src 属性
            script.src = 'http://127.0.0.1:8000/username'
            // 3.将script插入到文档中
            document.body.appendChild(script)
        }
    </script>
</body>

jQuery实现发送jsonp请求：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #result {
            width: 300px;
            height: 200px;
            border: 1px solid #008c8c;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js"></script>
</head>
<body>
    <button>点击发送 jsonp 请求</button>
    <div id="result">
        
    </div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://127.0.0.1:8000/jquery?callback=?',function(data){
                $('#result').html(`
                    名称：${data.name},<br>
                    科目：${data.subject}
                `)
            })
        })
    </script>
</body>

</html>

// 1.引入express
const { response } = require('express')
const express = require('express')

// 2.创建应用对象
const app = express()

// 3.jQuery服务
app.all('/jquery',(request,response)=>{
    // response.send('hello jQuery')
    const data = {
        name:'张三',
        subject:['语文','数学','英语']
    }
    let str = JSON.stringify(data)
    // 接收 callback 参数
    let cb = request.query.callback
    // 返回结果
    response.end(`${cb}(${str})`)
})

// 4.监听端口启动服务
app.listen(8000,()=>{
    console.log('服务已经启动,8080端口监听中....');
})

CORS：跨域资源共享 。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中进行处理，支持get和post请求，跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源。

CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该响应以后就会对响应放行。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>点击发送请求</button>
    <script>
        const btn = document.querySelector('button')
        btn.addEventListener('click',function(){
            // 1.创建对象
            const x = new XMLHttpRequest()
            // 2.初始化设置
            x.open('GET','http://127.0.0.1:8000/cors')
            // 3.发送
            x.send()
            // 4.绑定事件
            x.onreadystatechange = function(){
                if(x.readyState ===4 ){
                    if(x.status >= 200 && x.status < 300){
                        // 输出响应体
                        console.log(x.response );
                    }
                }
            }
        })
    </script>
</body>
</html>

// 1.引入express
const { response } = require('express')
const express = require('express')

// 2.创建应用对象
const app = express()

// 3.CORS
app.all('/cors',(request,response)=>{
    // 设置响应头
    response.setHeader('Access-Control-Allow-Origin','*')
    response.send('hello cors')
})

// 4.监听端口启动服务
app.listen(8000,()=>{
    console.log('服务已经启动,8080端口监听中....');
})

Ajax 请求

有关Ajax--》请求操作以及跨域相关讲解的更多相关文章

ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby 中生成它们？ - 2
我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%
ruby-on-rails - Rails HTML 请求渲染 JSON - 2
在我的Controller中，我通过以下方式在我的index方法中支持HTML和JSON:respond_todo|format|format.htmlformat.json{renderjson:@user}end在浏览器中拉起它时，它会自然地以HTML呈现。但是，当我对/user资源进行内容类型为application/json的curl调用时(因为它是索引方法)，我仍然将HTML作为响应。如何获取JSON作为响应？我还需要说明什么？最佳答案您应该将.json附加到请求的url，提供的格式在routes.rb的路径中定义。这
ruby-on-rails - 相关表上的范围为 "WHERE ... LIKE" - 2
我正在尝试从Postgresql表(table1)中获取数据，该表由另一个相关表(property)的字段(table2)过滤。在纯SQL中，我会这样编写查询:SELECT*FROMtable1JOINtable2USING(table2_id)WHEREtable2.propertyLIKE'query%'这工作正常:scope:my_scope,->(query){includes(:table2).where("table2.property":query)}但我真正需要的是使用LIKE运算符进行过滤，而不是严格相等。然而，这是行不通的:scope:my_scope,->(que
jquery - 我的 jquery AJAX POST 请求无需发送 Authenticity Token (Rails) - 2
rails中是否有任何规定允许站点的所有AJAXPOST请求在没有authenticity_token的情况下通过？我有一个调用Controller方法的JqueryPOSTajax调用，但我没有在其中放置任何真实性代码，但调用成功。我的ApplicationController确实有'request_forgery_protection'并且我已经改变了config.action_controller.consider_all_requests_local在我的environments/development.rb中为false我还搜索了我的代码以确保我没有重载ajaxSend来发送
世界前沿3D开发引擎HOOPS全面讲解——集3D数据读取、3D图形渲染、3D数据发布于一体的全新3D应用开发工具 - 2
无论您是想搭建桌面端、WEB端或者移动端APP应用，HOOPSPlatform组件都可以为您提供弹性的3D集成架构，同时，由工业领域3D技术专家组成的HOOPS技术团队也能为您提供技术支持服务。如果您的客户期望有一种在多个平台（桌面/WEB/APP，而且某些客户端是“瘦”客户端）快速、方便地将数据接入到3D应用系统的解决方案，并且当访问数据时，在各个平台上的性能和用户体验保持一致，HOOPSPlatform将帮助您完成。利用HOOPSPlatform，您可以开发在任何环境下的3D基础应用架构。HOOPSPlatform可以帮您打造3D创新型产品，HOOPSSDK包含的技术有：快速且准确的CAD
【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2
在应用开发中，有时候我们需要获取系统的设备信息，用于数据上报和行为分析。那在鸿蒙系统中，我们应该怎么去获取设备的系统信息呢，比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况，一种是设备信息的获取，一种是系统信息的获取。1.1、获取设备信息获取设备信息，鸿蒙的SDK包为我们提供了DeviceInfo类，通过该类的一些静态方法，可以获取设备信息，DeviceInfo类的包路径为：ohos.system.DeviceInfo.具体的方法如下：ModifierandTypeMethodDescriptionstatic StringgetAbiList()Obt
阿里云国际版免费试用：如何注册以及注意事项 - 2
作为新的阿里云用户，您可以50免费试用多种优惠，价值高达1,700美元（或8,500美元）。这将让您了解和体验阿里云平台上提供的一系列产品和服务。如果您以个人身份注册免费试用，您将获得价值1,700美元的优惠。但是，如果您是注册公司，您可以选择企业免费试用，提交基本信息通过企业实名注册验证，即可开始价值$8,500的免费试用！本教程介绍了如何设置您的帐户并使用您的免费试用版。关于免费试用在我们开始此试用之前，您还必须遵守以下条款和条件才能访问您的免费试用：只有在一年内创建的账户才有资格获得阿里云免费试用。通过此免费试用优惠，用户可以免费试用免费试用活动页面上列出的每种产品一次。如果您有多个帐
ruby - 如何使用 Selenium Webdriver 根据 div 的内容执行操作？ - 2
我有一个使用SeleniumWebdriver和Nokogiri的Ruby应用程序。我想选择一个类，然后对于那个类对应的每个div，我想根据div的内容执行一个Action。例如，我正在解析以下页面:https://www.google.com/webhp?sourceid=chrome-instant&ion=1&espv=2&ie=UTF-8#q=puppies这是一个搜索结果页面，我正在寻找描述中包含“Adoption”一词的第一个结果。因此机器人应该寻找带有className:"result"的div，对于每个检查它的.descriptiondiv是否包含单词“adoption
ruby-on-rails - 如何处理 Grape 中特定操作的过滤器之前？ - 2
我正在我的Rails项目中安装Grape以构建RESTfulAPI。现在一些端点的操作需要身份验证，而另一些则不需要身份验证。例如，我有users端点，看起来像这样:moduleBackendmoduleV1classUsers现在如您所见，除了password/forget之外的所有操作都需要用户登录/验证。创建一个新的端点也没有意义，比如passwords并且只是删除password/forget从逻辑上讲，这个端点应该与用户资源。问题是Grapebefore过滤器没有像except,only这样的选项，我可以在其中说对某些操作应用过滤器。您通常如何干净利落地处理这种情况？
ruby-on-rails - 在 Ruby on Rails 中发送响应之前如何等待多个异步操作完成？ - 2
在我做的一些网络开发中，我有多个操作开始，比如对外部API的GET请求，我希望它们同时开始，因为一个不依赖另一个的结果。我希望事情能够在后台运行。我找到了concurrent-rubylibrary这似乎运作良好。通过将其混合到您创建的类中，该类的方法具有在后台线程上运行的异步版本。这导致我编写如下代码，其中FirstAsyncWorker和SecondAsyncWorker是我编写的类，我在其中混合了Concurrent::Async模块，并编写了一个名为“work”的方法来发送HTTP请求:defindexop1_result=FirstAsyncWorker.new.async.