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

    目录

    jQuery中的Ajax

    请求超时与网络异常处理

    取消请求

    Ajax请求—fetch()

    跨域

    jQuery中的Ajax

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

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

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js">script>
    10. head>
    11. <body>
    12.     <div class="container">
    13.         <h2 class="page-header">jQuery发送Ajax请求h2>
    14.         <button class="btn btn-paimary">GETbutton>
    15.         <button class="btn btn-danger">POSTbutton>
    16.         <button class="btn btn-info">通用型方法button>
    17.     div>
    18.     <script>
    19.         $('button').eq(0).click(function(){
    20.             // 参数分别是 url 参数对象 回调函数 响应体类型-json
    21.             $.get('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){
    22.                 console.log(data);
    23.             },'json')//加了json返回的结果是一个对象
    24.         })
    25.         $('button').eq(1).click(function(){
    26.             $.post('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){
    27.                 console.log(data);
    28.             })//不加json返回的结果是一个字符串
    29.         })
    30.     script>
    31. body>
    32. html>
    1. // 1.引入express
    2. const { response } = require('express')
    3. const express = require('express')
    4.  
    5. // 2.创建应用对象
    6. const app = express()
    7.  
    8. // 3.jQuery服务
    9. app.all('/jquery',(request,response)=>{
    10.     // 设置响应头
    11.     response.setHeader('Access-Control-Allow-Origin','*')
    12.     // response.send('hello jQuery')
    13.     const data = {name:'张三'}
    14.     response.send(JSON.stringify(data))
    15. })
    16.  
    17. // 4.监听端口启动服务
    18. app.listen(8000,()=>{
    19.     console.log('服务已经启动,8080端口监听中....');
    20. })

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

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
    9.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js">script>
    10. head>
    11. <body>
    12.     <div class="container">
    13.         <h2 class="page-header">jQuery发送Ajax请求h2>
    14.         <button class="btn btn-paimary">GETbutton>
    15.         <button class="btn btn-danger">POSTbutton>
    16.         <button class="btn btn-info">通用型方法button>
    17.     div>
    18.     <script>
    19.         $('button').eq(2).click(function(){
    20.             $.ajax({
    21.                 // url
    22.                 url:'http://127.0.0.1:8000/jquery',
    23.                 // 参数
    24.                 data:{a:100,b:200},
    25.                 // 请求类型
    26.                 type:'GET',
    27.                 // 响应体结果设置
    28.                 dataType:'json',
    29.                 // 成功的回调
    30.                 success:function(data){
    31.                     console.log(data);
    32.                 },
    33.                 // 超时时间
    34.                 timeout:2000,
    35.                 // 失败的回调
    36.                 error:function(){
    37.                     console.log('出错了！！');
    38.                 },
    39.                 // 头信息
    40.                 headers:{
    41.                     c:300,
    42.                     d:400
    43.                 }
    44.             })
    45.         })
    46.     script>
    47. body>
    48. html>

    请求超时与网络异常处理

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8.     <style>
    9.         #result {
    10.             width: 200px;
    11.             height: 100px;
    12.             border: 1px solid #008c8c;
    13.         }
    14.     style>
    15. head>
    16. <body>
    17.     <button>点击发送请求button>
    18.     <div id="result">div>
    19.     <script>
    20.         const btn = document.querySelector('button')
    21.         const result = document.querySelector('#result')
    22.         btn.addEventListener('click',function(){
    23.             const xhr = new XMLHttpRequest()
    24.             // 超时2s设置取消
    25.             xhr.timeout = 2000
    26.             // 超时回调
    27.             xhr.ontimeout = function(){
    28.                 alert('网络异常，请稍后重试！！')
    29.             }
    30.             xhr.open('GET','http://127.0.0.1:8000/delay')
    31.             xhr.send()
    32.             xhr.onreadystatechange = function(){
    33.                 if(xhr.readyState === 4){
    34.                     if(xhr.status >= 200 && xhr.status < 300){
    35.                         result.innerHTML = xhr.response
    36.                     }
    37.                 }
    38.             }
    39.         })
    40.     script>
    41. body>
    42. html>

    设置express服务

    1. // 1.引入express
    2. const { response } = require('express')
    3. const express = require('express')
    4.  
    5. // 2.创建应用对象
    6. const app = express()
    7.  
    8.  
    9. // 3.延时响应
    10. app.get('/delay',(request,response)=>{
    11.     // 设置响应头
    12.     response.setHeader('Access-Control-Allow-Origin','*')
    13.     // 设置延时效果
    14.     setTimeout(()=>{
    15.         // 设置响应体
    16.         response.send('延时响应')
    17.     },3000)
    18. })
    19.  
    20. // 4.监听端口启动服务
    21. app.listen(8000,()=>{
    22.     console.log('服务已经启动,8080端口监听中....');
    23. })

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

    取消请求

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <button>点击发送请求button>
    11.     <button>点击取消请求button>
    12.     <script>
    13.         const btns = document.querySelectorAll('button')
    14.         // 将x设置为全局变量
    15.         let x = null
    16.         btns[0].addEventListener('click',function(){
    17.             x = new XMLHttpRequest()
    18.             x.open('GET','http://127.0.0.1:8000/delay')
    19.             x.send()
    20.         })
    21.         // 取消方法 abort
    22.         btns[1].addEventListener('click',function(){
    23.             x.abort()
    24.         })
    25.     script>
    26. body>
    27. html>

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

    取消重复请求

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <button>点击发送请求button>
    11.     <script>
    12.         const btns = document.querySelector('button')
    13.         // 将x设置为全局变量
    14.         let x = null
    15.         // 标识变量
    16.         let isSending = false
    17.  
    18.         btns.addEventListener('click',function(){
    19.             // 判断标识变量
    20.             if(isSending) x.abort()//如果正在发送，则取消该请求，创建一个新的请求
    21.             x = new XMLHttpRequest()
    22.             // 修改 标识变量的值
    23.             isSending = true
    24.             x.open('GET','http://127.0.0.1:8000/delay')
    25.             x.send()
    26.             x.onreadystatechange = function(){
    27.                 if(x.readyState === 4){
    28.                     // 修改标识变量
    29.                     isSending = false
    30.                 }
    31.             }
    32.         })
    33.  
    34.     script>
    35. body>
    36. html>

    提供express服务

    1. // 1.引入express
    2. const { response } = require('express')
    3. const express = require('express')
    4.  
    5. // 2.创建应用对象
    6. const app = express()
    7.  
    8. // 3.延时响应
    9. app.get('/delay',(request,response)=>{
    10.     // 设置响应头
    11.     response.setHeader('Access-Control-Allow-Origin','*')
    12.     // 设置延时效果
    13.     setTimeout(()=>{
    14.         // 设置响应体
    15.         response.send('延时响应')
    16.     },3000)
    17. })
    18.  
    19. // 4.监听端口启动服务
    20. app.listen(8000,()=>{
    21.     console.log('服务已经启动,8080端口监听中....');
    22. })

    Ajax请求—fetch()

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

    1. <body>
    2.     <button>Ajax请求button>
    3.     <script>
    4.         const btn = document.querySelector('button')
    5.         btn.addEventListener('click',function(){
    6.             fetch('http://127.0.0.1:8000/fetch',{
    7.                 // 请求方法
    8.                 method:'POST',
    9.                 // 请求头
    10.                 headers:{
    11.                     name:'zhangsan'
    12.                 },
    13.                 // 请求体
    14.                 body:'username=admin&password=admin'
    15.             }).then(response=>{
    16.                 return response.json()
    17.             }).then(response=>{
    18.                 console.log(response);
    19.             })
    20.         })
    21.     script>
    22. body>
    1. // 1.引入express
    2. const { response } = require('express')
    3. const express = require('express')
    4.  
    5. // 2.创建应用对象
    6. const app = express()
    7.  
    8. // 3.fetch服务
    9. app.all('/fetch',(request,response)=>{
    10.     // 设置响应头
    11.     response.setHeader('Access-Control-Allow-Origin','*')
    12.     response.setHeader('Access-Control-Allow-Headers','*')
    13.     // response.send('hello jQuery')
    14.     const data = {name:'张三'}
    15.     response.send(JSON.stringify(data))
    16. })
    17.  
    18. // 4.监听端口启动服务
    19. app.listen(8000,()=>{
    20.     console.log('服务已经启动,8080端口监听中....');
    21. })

    跨域

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

    1. <body>
    2.     <button>点击获取用户数据button>
    3.     <script>
    4.         const btn = document.querySelector('button')
    5.         btn.addEventListener('click',function(){
    6.             const x = new XMLHttpRequest()
    7.             // 因为是满足同源策略的，所以url是可以简写的
    8.             x.open('GET','/data')
    9.             x.send()
    10.             x.onreadystatechange = function(){
    11.                 if(x.readyState === 4){
    12.                     if(x.status >= 200 && x.status <300){
    13.                         console.log(x.response);
    14.                     }
    15.                 }
    16.             }
    17.         })
    18.     script>
    19. body>
    1. const { response, request } = require('express')
    2. const express = require('express')
    3. const app = express()
    4. app.get('/home',(request,response)=>{
    5.     // 响应一个页面
    6.     response.sendFile(__dirname+'/index.html')
    7. })
    8.  
    9. app.get('/data',(request,response)=>{
    10.     response.send('用户数据')
    11. })
    12. app.listen(9000,()=>{
    13.     console.log('9000端口开启，服务已启动...');
    14. })

    如何解决跨域：

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

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

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         #result {
    11.             width: 300px;
    12.             height: 200px;
    13.             border: 1px solid #008c8c;
    14.         }
    15.     style>
    16. head>
    17.  
    18. <body>
    19.     <div id="result">div>
    20.     <script>
    21.         // 处理函数
    22.         function handle (data) {
    23.             // 获取元素
    24.             const result = document.querySelector('#result')
    25.             result.innerHTML = data.name
    26.         }
    27.     script>
    28.     
    29.     <script src="http://127.0.0.1:8000/jsonp">script>
    30. body>
    31.  
    32. html>

    原生JS代码

    1. const data = {
    2.     name:'张三'
    3. }
    4.  
    5. handle(data)

    express服务

    1. // 1.引入express
    2. const { response } = require('express')
    3. const express = require('express')
    4.  
    5. // 2.创建应用对象
    6. const app = express()
    7.  
    8. // 3.JSONP服务
    9. app.all('/jsonp',(request,response)=>{
    10.     // response.send('console.log("hello jsonp");')
    11.     const data = {
    12.         name:'张三'
    13.     }
    14.     // 将数据转换为字符串
    15.     let str = JSON.stringify(data)
    16.     // 返回结果 end()不会加特殊响应头
    17.     // 返回的结果是一个函数调用，而函数的实参就是我们想给客户端返回的结果数据
    18.     response.end(`handle(${str})`)
    19. })
    20.  
    21. // 4.监听端口启动服务
    22. app.listen(8000,()=>{
    23.     console.log('服务已经启动,8080端口监听中....');
    24. })

    jsonp实践：

    1. <body>
    2.     用户名：<input type="text" id="username">
    3.     <p>p>
    4.     <script>
    5.         // 获取 input 元素
    6.         const input = document.querySelector('input')
    7.         const p = document.querySelector('p')
    8.  
    9.         // 声明 handle 函数
    10.         function handle (data) {
    11.             input.style.border = "solid 1px #f00"
    12.             // 修改 p 标签的提示文本
    13.             p.innerHTML = data.msg
    14.         }
    15.  
    16.         // 绑定事件
    17.         input.onblur = function () {
    18.             // 获取用户的输入值
    19.             let username = this.value
    20.             // 向服务器发送请求，检测用户名是否存在
    21.             // 1.创建 script 标签
    22.             const script = document.createElement('script')
    23.             // 2.设置标签的 src 属性
    24.             script.src = 'http://127.0.0.1:8000/username'
    25.             // 3.将script插入到文档中
    26.             document.body.appendChild(script)
    27.         }
    28.     script>
    29. body>

    jQuery实现发送jsonp请求：

    1. html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    7.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    8.     <title>Documenttitle>
    9.     <style>
    10.         #result {
    11.             width: 300px;
    12.             height: 200px;
    13.             border: 1px solid #008c8c;
    14.         }
    15.     style>
    16.     <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.1/jquery.min.js">script>
    17. head>
    18. <body>
    19.     <button>点击发送 jsonp 请求button>
    20.     <div id="result">
    21.         
    22.     div>
    23.     <script>
    24.         $('button').eq(0).click(function(){
    25.             $.getJSON('http://127.0.0.1:8000/jquery?callback=?',function(data){
    26.                 $('#result').html(`
    27.                     名称：${data.name},
    28.                     科目：${data.subject}
    29.                 `)
    30.             })
    31.         })
    32.     script>
    33. body>
    34.  
    35. html>
    1. // 1.引入express
    2. const { response } = require('express')
    3. const express = require('express')
    4.  
    5. // 2.创建应用对象
    6. const app = express()
    7.  
    8. // 3.jQuery服务
    9. app.all('/jquery',(request,response)=>{
    10.     // response.send('hello jQuery')
    11.     const data = {
    12.         name:'张三',
    13.         subject:['语文','数学','英语']
    14.     }
    15.     let str = JSON.stringify(data)
    16.     // 接收 callback 参数
    17.     let cb = request.query.callback
    18.     // 返回结果
    19.     response.end(`${cb}(${str})`)
    20. })
    21.  
    22. // 4.监听端口启动服务
    23. app.listen(8000,()=>{
    24.     console.log('服务已经启动,8080端口监听中....');
    25. })

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

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

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <button>点击发送请求button>
    11.     <script>
    12.         const btn = document.querySelector('button')
    13.         btn.addEventListener('click',function(){
    14.             // 1.创建对象
    15.             const x = new XMLHttpRequest()
    16.             // 2.初始化设置
    17.             x.open('GET','http://127.0.0.1:8000/cors')
    18.             // 3.发送
    19.             x.send()
    20.             // 4.绑定事件
    21.             x.onreadystatechange = function(){
    22.                 if(x.readyState ===4 ){
    23.                     if(x.status >= 200 && x.status < 300){
    24.                         // 输出响应体
    25.                         console.log(x.response );
    26.                     }
    27.                 }
    28.             }
    29.         })
    30.     script>
    31. body>
    32. html>
    1. // 1.引入express
    2. const { response } = require('express')
    3. const express = require('express')
    4.  
    5. // 2.创建应用对象
    6. const app = express()
    7.  
    8. // 3.CORS
    9. app.all('/cors',(request,response)=>{
    10.     // 设置响应头
    11.     response.setHeader('Access-Control-Allow-Origin','*')
    12.     response.send('hello cors')
    13. })
    14.  
    15. // 4.监听端口启动服务
    16. app.listen(8000,()=>{
    17.     console.log('服务已经启动,8080端口监听中....');
    18. })

  • 相关阅读:
    JUC下的常用类
    在爬虫的时候发现request 中的from data 是一串数据格式
    MySQL必知必会
    3 种方法限制 K8s Pod 磁盘容量使用
    SpringCloud (四) ——Nacos配置管理
    企业在知乎上做问答推广的技巧分析，企业知乎推广营销方法步骤
    一分钟学一个 Linux 命令 - cat 和 tail
    五、Spring Boot 整合持久层技术（2）
    你了解TLS协议吗？
    初探JVM
  • 原文地址：https://blog.csdn.net/qq_53123067/article/details/127326069