[ajax] 基础 HTTP相关问题-GET-POST-XHR使用-jQuery中的ajax-跨域-同源-jsonp-cors

最新推荐文章于 2023-06-09 09:45:34 发布
最新推荐文章于 2023-06-09 09:45:34 发布
阅读量272 收藏 1
点赞数
分类专栏： # ajax 文章标签： ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_14993591/article/details/120485951
版权

1、AJAX简介

AJAX全称为Asynchronous JavaScript And XML，就是异步的 JS 和 XML。

通过AJAX可以在浏览器中向服务器发送异步请求，最大的优势: 无刷新获取数据。

AJAX不是新的编程语言，而是一种将现有的标准组合在一起使用的新方式。

2、XML简介

XML 可扩展标记语言。

XML 被设计用来传输和存储数据。

XML 和 HTML类似，不同的是HTML中都是预定义标签，而XML中没有预定义标签，全都是自定义标签，用来表示一些数据。

比如说我有一个学生数据:
	name = "孙悟空",age = 18; gender = "男";

用XML表示:
	<student>
		<name>孙悟空</name>
        <age>18</age>
        <gender>男</gender>
	</student>

现在已经被JSON取代了。

{"name":"孙悟空","age":18,"gender":"男"}

3、AJAX的特点

3.1、AJAX的优点

可以无需刷新页面而与服务器端进行通信。
允许你根据用户事件来更新部分页面内容。

3.2、AJAX的缺点

没有浏览历史，不能回退
存在跨域问题(同源)
SEO不友好，(SEO意思: 是搜索引擎优化)

4、HTTP协议请求与响应的结构

HTTP协议【超文本传输协议】，协议详细规定了浏览器和万维网服务器之间互相通信的规则。

4.1、HTTP 请求交互的基本过程

在这里插入图片描述

  1. 前后应用从浏览器端向服务器发送HTTP 请求(请求报文)
  2. 后台服务器接收到请求后, 调度服务器应用处理请求, 向浏览器端返回HTTP响应(响应报文)
  3. 浏览器端接收到响应, 解析显示响应体/调用监视回调

4.2、请求报文

HTTP请求报文由3部分组成（请求行+请求头+请求体）：
在这里插入图片描述


4.3、HTTP 响应报文

HTTP的响应报文也由三部分组成（响应行+响应头+响应体）
在这里插入图片描述

4.4、常见的响应状态码

200 OK 请求成功。一般用于GET 与POST 请求
201 Created 已创建。成功请求并创建了新的资源
401 Unauthorized 未授权/请求要求用户的身份认证
404 Not Found 服务器无法根据客户端的请求找到资源
500 Internal Server Error 服务器内部错误，无法完成请求

4.5、不同类型的请求及其作用

GET: 从服务器端读取数据（查）
POST: 向服务器端添加新数据 （增）
PUT: 更新服务器端已经数据 （改）
DELETE: 删除服务器端数据 （删）

4.6、 区别 一般http请求 与 ajax请求

  1. ajax请求 是一种特别的 http请求

  2. 对服务器端来说, 没有任何区别, 区别在浏览器端

  3. 浏览器端发送请求: 只有XHR 或fetch发出的才是ajax 请求, 其它所有的都是非ajax 请求

  4. 浏览器端接收到响应

    (1) 一般请求: 浏览器一般会直接显示响应体数据, 也就是我们常说的刷新/跳转页面
    (2) ajax请求: 浏览器不会对界面进行任何更新操作, 只是调用监视的回调函数并传入响应相关数据

5、 原生AJAX 的基本使用 XHR

5.0 准备工作

5.0.1 安装node.js

http://nodejs.cn/

5.0.2 安装express（服务端框架）

https://www.expressjs.com.cn/

初始化环境

npm init --yes

下载express包

npm install express --save

编写js代码

// 1. 引入express
const express = require('express');

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

// 3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response) => {
  //  设置响应
  response.send("hello express");
});

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

运行js程序

node .\01express使用.js

在这里插入图片描述
打开网页显示页面

在这里插入图片描述

5.1、安装nodemon自动重启工具

文件内容有修改自动重新启动服务
https://www.npmjs.com/package/nodemon

安装

npm install -g nodemon

启动服务

ndoemon server.js

5.2、Ajax代码

5.2.1、步骤

创建XMLHttpRequest 对象

var xhr = new XMLHttpRequest();

设置请求信息（请求方法和url）

// 请求方式
xhr.open(method, url);

//可以设置请求头，一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

发送请求

xhr.send(body) //get请求不传 body 参数，只有post请求使用

接收响应（事件绑定，处理服务端返回的结果）

//xhr.responseXML 接收 xml格式 的响应数据
//xhr.responseText 接收 文本格式 的响应数据
xhr.onreadystatechange = function (){
	// readyState 是 xhr对象中的属性, 表示状态 0 1 2 3 4
	if(xhr.readyState == 4 && xhr.status == 200){
	    console.log(xhr.status) //状态码
	    console.log(xhr.statusText) //状态字符串
	    console.log(xhr.getAllResponseHeaders) //所有响应头
	    console.log(xhr.response) //响应体
	}
}
5.2.2、案例
5.2.2.1、GET 请求

在这里插入图片描述

创建两个文件，浏览器端使用的html文件和服务器端使用的js文件
在这里插入图片描述

服务器端 server.js

// 1. 引入express
const express = require('express');

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

// 3. 创建路由规则
app.get('/server', (request, response) => {
  // 设置响应头 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  // 设置响应体
  response.send("Hello Ajax");
});

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

启动服务

node server.js

在这里插入图片描述
前端页面 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>Ajax GET 请求</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #90b;
    }
  </style>
</head>
<body>
  <button>点击发送请求</button>
  <div id="result"></div>
  <script>
    //获取button元素
    const btn = document.getElementsByTagName('button')[0];
    const result = document.getElementById('result');
    
    //绑定事件
    btn.onclick = function(){
    
      // 1. 创建对象 
      const xhr = new XMLHttpRequest();
      
      // 2. 初始化 设置请求方法和url
      xhr.open('GET', 'http://127.0.0.1:8000/server')
      
      // 3. 发送
      xhr.send();
      
      // 4. 事件绑定 处理服务端返回的结果
      xhr.onreadystatechange = function(){
        // readyState 是 xhr 对象中的属性, 表示状态 0 1 2 3 4
        //判断 (服务端返回了所有的结果)
        if(xhr.readyState === 4){
          //判断响应状态码 200  404  403 401 500
          if(xhr.status >= 200 && xhr.status < 300){
            //设置 result 的文本
            result.innerHTML=xhr.response;
          }
        }
      } 
    }
  </script>
</body>
</html>
5.2.2.2、GET 请求设置请求参数

设置url参数

xhr.open('GET', 'http://127.0.0.1:8000/server?a=100&b=200&c=300');

在这里插入图片描述
在这里插入图片描述

5.2.2.3、POST请求

鼠标放到div中，发post请求，将响应体放在div中呈现

server.js添加post

app.post('/server', (request, response) => {
  // 设置响应头, 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  // 设置响应体
  response.send("Hello Ajax POST");
});

post.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>Ajax POST 请求</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #903;
    }
  </style>
</head>
<body>
  <div id="result"></div>
  <script>
    // 获取元素对象
    const result = document.getElementById('result');
    // 绑定事件
    result.addEventListener("mouseover", function(){
      // 1. 创建对象
      const xhr = new XMLHttpRequest();
      // 2. 初始化 设置类型（请求方式）与url
      xhr.open('POST', 'http://127.0.0.1:8000/server');
      // 3. 发送   设置请求参数（请求体）
      xhr.send('a=100&b=200&c=300');
      // 4. 事件绑定
      xhr.onreadystatechange = function(){
        // 判断
        if(xhr.readyState === 4){
          if(xhr.status >=200 && xhr.status < 300){
            // 处理服务端返回的结果
            result.innerHTML = xhr.response;
          }
        }
      }
    });
  </script>
</body>
</html>

设置请求头信息

// 设置请求体内容的类型
xhr.setRequesHeader('Content-Type','application/x-www-from-urlencoded');
// 自定义头信息
xhr.setRequesHeader('name', 'ykyk');

server.js中设置响应头允许自定义请求头 post改成all

response.setHeader('Access-Control-Allow-Header','*');
5.2.3、json数据请求
app.all('/json-server', (request, response) => {
  // 设置响应头, 设置允许跨域
  response.setHeader('Access-Control-Allow-Origin', '*');
  // 设置响应头, 设置允许自定义头信息
  response.setHeader('Access-Control-Allow-Headers', '*');
  // 响应一个数据
  const data = {
    name: 'atguigu'
  };
  // 对 对象 进行 字符串 转换
  let str = JSON.stringify(data)
  // 设置响应体 
  response.send(str);
});


<!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>JSON</title>
  <style>
    #result {
      width: 200px;
      height: 100px;
      border: solid 1px #89b;
    }
  </style>
</head>
<body>
  <div id="result"></div>
  <script>
    const result = document.getElementById('result');
    // 绑定键盘按下事件
    window.onkeydown = function(){
      // 发送请求
      const xhr = new XMLHttpRequest();
      // *2*.(自动转换) 设置响应体数据的类型(自动转换)
      xhr.responseType = 'json';
      // 初始化
      xhr.open('GET', 'http://127.0.0.1:8000/json-server');
      // 发送
      xhr.send();
      // 事件绑定
      xhr.onreadystatechange = function(){
        if(xhr.readyState === 4){
          if(xhr.status >= 200 && xhr.status < 300){
            console.log(xhr.response);
            // 1. 手动对数据转化 (字符串再转换成json)
            // let data = JSON.parse(xhr.response); //转换成json
            // result.innerHTML = data.name;
            // *2*. (自动转换)自动转换(自动转换)
            result.innerHTML = xhr.response.name; //已经自动变成json
          }
        }
      }
    }
  </script>
</body>
</html>

在这里插入图片描述

5.2.4、解决 IE 缓存问题

问题：在一些浏览器中(IE),由于缓存机制的存在，ajax 只会发送的第一次请求，剩余多次请求不会在发送给浏览器而是直接加载缓存中的数据。
解决方式：浏览器的缓存是根据url 地址来记录的，所以我们只需要修改url 地址即可避免缓存问题

xhr.open("get","/testAJAX?t="+Date.now());
5.2.5、请求超时与网络异常
// 超时设置 （2秒）
xhr.timeout = 2000;
// 超时回调
xhr.ontimeout = function(){
	alert('网络超时，请稍后重试')
}
// 网络异常回调
xhr.onerror = function(){
	alert('网络异常，请稍后重试')
}
5.2.6、取消请求
// 手动取消
xhr.abort()
5.2.7、请求重复发送问题

html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>重复请求问题</title>
</head>
<body>
    <button>点击发送</button>
    <script>
        //获取元素对象
        const btns = document.querySelectorAll('button');
        let x = null;
        
        //标识变量
        let isSending = false; // 是否正在发送AJAX请求

        btns[0].onclick = 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;
                }
            }
        }

        // abort 中止
        btns[1].onclick = function(){
            x.abort();
        }
    </script>
</body>
</html>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();

// 3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
});
//json
app.get('/json-server',(request,response)=>{
});
//ie缓存
app.get('/ie',(request,response)=>{
});
//延迟响应
app.get('/delay',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    //定时器
    setTimeout(()=>{
        //设置响应体
    response.send('延时响应');
    },3000)
    
});
//4.监听端口启动服务
app.listen(8000,()=>{
	console.log("服务已经启动，8000端口监听中.....");
})

在这里插入图片描述

6、jQuery 中的AJAX

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery 发送 AJAX 请求</title>
    <link crossorigin="anonymous" href="https://cdn.bootcss.com/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <div class="container">
        <h2 class="page-header">jQuery发送AJAX请求 </h2>
        <button class="btn btn-primary">GET</button>
        <button class="btn btn-danger">POST</button>
        <button class="btn btn-info">通用型方法ajax</button>
    </div>
    <script>
    
        //使用jquery发送get请求
        $('button').eq(0).click(function(){
            $.get('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){
                console.log(data);
            },'json');
        })
        
       //使用jquery发送post请求
       $('button').eq(1).click(function(){
            $.post('http://127.0.0.1:8000/jquery',{a:100,b:200},function(data){
                console.log(data);
            },'json');
        })
        
       //通用方法(开发常用)
       $("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>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();

// 3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
});
//json
app.get('/json-server',(request,response)=>{
});
//ie缓存
app.get('/ie',(request,response)=>{
});
//延迟响应
app.get('/delay',(request,response)=>{
   
});
//JQuery
app.all('/jquery',(request,response)=>{
    //设置响应头
    response.setHeader('Access-Control-Allow-Origin','*');
    response.setHeader('Access-Control-Allow-Headers', '*');
    const data = {name:'张三'};
    response.send(JSON.stringify(data));
    
});
//4.监听端口启动服务
app.listen(8000,()=>{
	console.log("服务已经启动，8000端口监听中.....");
})

在这里插入图片描述

7、axios

使用axios发送AJAX请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        h2{
            width: 1200px;
            margin: 50px auto 20px;
            padding-bottom:10px ;
            font-size: 30px;
            border-bottom:1px solid gray ;
        }
        button{
            border-radius: 5px;
            height: 35px;
            width: 100px;   
            background-color: blueviolet;
            float: left;
            margin-right: 10px;
            color: white;
            border: none;
            text-align: center;
        }
        .btn-primary{
            margin-left: 160px;
            background-color: #cd6969;
        }
        .btn-danger{
            background-color: orange;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
</head>
<body>
    <h2>jQuery发送Ajax请求</h2>
    <button class="btn btn-primary">GET</button>
    <button class="btn btn-danger">POST</button>
    <button class="btn btn-info">通用型方法</button>
    <script>
        const btns = document.querySelectorAll('button')
        btns[0].onclick = function(){
            //GET请求
            axios.get('http://localhost:8000/axios-server', {
                //url参数
                params:{
                    id:1000,
                    vip:12
                },
                //请求头信息
                headers:{
                    name:'hanser',
                    age:'2'
                }
            }).then(value=>{
                console.log(value)
            })
        }
        
        //POST请求
        btns[1].onclick = function(){
            axios.post('http://localhost:8000/axios-server', {
                    username:'admin',
                    password:'123'
                },{
                //url参数
                params:{
                    id:1,
                    vip:123
                },
                //请求头参数
                headers:{
                    name:'yousa',
                    age:'23'
                },
                //请求体
               
            })
        }
        
		//通用方法(开发使用)
        btns[2].onclick = function(){
            axios({
                method:'POST',
                url:'http://localhost:8000/axios-server',
                //url参数
                params:{
                    vip:10,
                    id:123
                },
                //头信息
                headers:{
                    a:100,
                    b:200
                },
                //请求体参数
                data:{
                    name:'hanser',
                    age:'7'
                }
            }).then(response=>{
                console.log(response)
            })
        }
    </script>
</body>
</html>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();

// 3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
});
//json
app.get('/json-server',(request,response)=>{
});
//ie缓存
app.get('/ie',(request,response)=>{
});
//延迟响应
app.get('/delay',(request,response)=>{
   
});
//JQuery
app.all('/jquery',(request,response)=>{

});

//axios 服务
app.all('/axios-server', (requesr, response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    response.setHeader('Access-Control-Allow-Headers', '*')

    const data = {name:'hanser'}
    //设置响应
    response.send(JSON.stringify(data))
})

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

在这里插入图片描述

8、Fetch

使用fetch发送AJAX请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <button>ajax请求</button>
    <script>
        const btn = document.getElementsByTagName('button')
        btn[0].onclick = function(){
            fetch('http://localhost:8000/fetch-server',{
                //请求方法
                method:'POST',
                //请求头
                headers:{
                    name:'hanser'
                },
                //请求体
                body: 'name=admin&pd=admin'
            }).then(Response=>{
                console.log(Response)
                return Response.text()
            }).then(Response=>{
                console.log(Response)
            })
        }
    </script>
</body>
</html>

server.js

// 1.引入express
const express = require('express');
// 2.创建应用对象
const app = express();

// 3.创建路由规则
//request 是对请求报文的封装
//response 是对响应报文的封装
app.get('/server',(request,response)=>{
});
//json
app.get('/json-server',(request,response)=>{
});
//ie缓存
app.get('/ie',(request,response)=>{
});
//延迟响应
app.get('/delay',(request,response)=>{
   
});
//JQuery
app.all('/jquery',(request,response)=>{

});
//axios
app.all('/axios',(request,response)=>{
 
});
//fetch 服务
app.all('/fetch-server', (requesr, response)=>{
    //设置响应头 设置允许跨域
    response.setHeader('Access-Control-Allow-Origin', '*')
    response.setHeader('Access-Control-Allow-Headers', '*')

    const data = {name:'hanser'}
    //设置响应
    response.send(JSON.stringify(data))
})

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

在这里插入图片描述

9、跨域

9.1、 同源策略

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

9.2、 如何解决跨域

9.2.1 JSONP
1、JSONP是什么

​ JSONP是一个非官方的跨域解决方法，纯粹凭借程序员的聪明才智开发出来，只支持get请求。

2、JSONP怎么工作?

​ 在网页有一些标签天生具有跨域能力，比如: img link iframe script

​ JSONP就是利用script标签的跨域能力来发送请求的。

3、JSONP的使用

1.动态的创建一个script 标签

const script = document.createElement('script')

2.设置script 的src，设置回调函数

script.src = 'http://localhost:8000/check-username'

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

3.将script 添加到body 中

 document.body.appendChild(script)

4.服务器中路由的处理

//用户名检测是否存在
app.all('/check-username', (requesr, response)=>{

    const data = {
        exist:1,
        msg:'用户名已经存在'}
    //设置响应
    let str = JSON.stringify(data)
    // response.send('console.log("hello jsonp")')
    response.send(`handle(${str})`)

})

code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    用户名：<input type="text" id="username">
    <p></p>
    <script>
        const input = document.getElementById('username')
        const p = document.querySelectorAll('p')[0]

        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://localhost:8000/check-username'
            //3 将script插入文档中
            document.body.appendChild(script)

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

在这里插入图片描述

4、jQuery 中的JSONP
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div{
            width: 200px;
            height: 150px;
            border: 1px solid #bfa;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>
<body>
    <button>点击发送jsonp请求</button>
    <div id="res"></div>
    <script>
        $('button').eq(0).click(function(){
            $.getJSON('http://localhost:8000/jquery-jsonp-server?callback=?', function(data){
                console.log(data)
                $('#res').html(`
                姓名：${data.name},
                年龄：${data.age}`)
            })

        })
    </script>
</body>
</html>


//用户名检测是否存在
app.all('/jquery-jsonp-server', (request, response)=>{

    const data = {
        name:'hanser',
        age:2}
    //设置响应
    let str = JSON.stringify(data)
    //接受callback参数
    let cb = request.query.callback
    response.send(`${cb}(${str})`)

})

在这里插入图片描述

9.2.2 CORS

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

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

3) CORS 的使用

主要是服务器端的设置：

router.get("/testAJAX" , function (req , res) {
	//通过res 来设置响应头，来允许跨域请求
	res.set("Access-Control-Allow-Origin","*");
	res.send("testAJAX 返回的响应");
});


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CORS</title>
    <script crossorigin="anonymous" src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.js"></script>
    <style>
        #result{
            width:200px;
            height:100px;
            border:solid 1px #90b;
        }
    </style>
</head>
<body>
    <button>发送请求</button>
    <div id="result"></div>
    <script>
        const btn = document.querySelector('button');
        const result = document.getElementById('result');
        btn.onclick = function(){
           axios({
               method: 'GET',
               url: 'http://localhost:8000/cors-server',
           }).then(response =>{
                result.innerHTML = response.data;
           })
        }
    </script>
</body>
</html>

server.js

//1. 引入express
const express = require('express');

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

//3. 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
//jsonp服务
app.all('/jsonp-server',(request, response) => {
});
//用户名检测是否存在
app.all('/check',(request, response) => {
});

app.all('/jquery-jsonp',(request, response) => {
});
app.all('/cors-server', (request, response)=>{
    //设置响应头
    response.setHeader("Access-Control-Allow-Origin", "*");
    response.setHeader("Access-Control-Allow-Headers", '*');
    response.setHeader("Access-Control-Allow-Method", '*');
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500");
    response.send('hello CORS');
});


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



参考： https://blog.csdn.net/qq_45632660/article/details/109823169 https://blog.csdn.net/weixin_44972008/article/details/113772348
533_
关注
专栏目录
【Ajax】HTTP相关问题-GET-POST-XHR使用-jQuery中的ajax-跨域-同源-jsonp-cors
YK菌的博客
02-23 3万+
文章目录1. Ajax概述1.1 AJAX 简介1.2 XML 简介1.3 AJAX 的特点1.3.1 AJAX 的优点1.3.2 AJAX 的缺点2. 原生AJAX 的基本使用2.0 准备工作2.1 核心对象2.2 使用步骤2.3 使用案例1. GET 请求设置请求参数2. POST请求2.4 解决IE 缓存问题2.5 AJAX 请求状态3. jQuery 中的AJAX3.1 get 请求3.2 post 请求4. 跨域4.1 同源策略4.2 如何解决跨域4.2.1 JSONP4.2.2 CORS 1.
axios使用和原理
caoxinjian423的博客
09-20 1967
axios使用 什么是axios axios是一个基于promise封装好的发送请求、返回响应的http库，可以应用在浏览器中和node.js中。 axios的特性 在浏览器中发送请求会创建 XMLHttpRequests 在 node.js 发送请求会创建 http请求 Promise封装，故支持Promise API 支持拦截器interceptors，可以分别设置请求拦截和响应拦截，在发出请求和响应到达then之前进行判断处理。 转换请求数据和响应数
vue项目中axios在一个单独接口请求时重设超时时间
最新发布
qq_44130891的博客
06-09 4382
vue项目中axios在一个单独接口请求时重设超时时间
axios中timeout的作用
m0_67403240的博客
03-12 7174
详细axios 在项目中使用axios肯定会使用到timeout属性， 常见的写法 （1） axios.defaults.timeout = 5000; （2）let instance= axios.create({ baseURL: “”, timeout: 5000, }); 这里的timeout的作用其实就是，设置了在5000毫秒内请求数据 如果没有请求成功就执行错误函数，这里用axios实例举例 如： let instance = axios.create({ baseURL: "https
axios 设置超时时间 timeout
热门推荐
一片天空
05-31 7万+
全局设置网络超时 axios.defaults.timeout = 30000; 单独对某个请求设置网络超时 let timeout = parseInt(paramsTimeout); this.$ajax.post(url, params, {timeout: timeout}) .then(res => { console.log('response='+r...
axios实现原理
往后余生的博客
08-01 1万+
axios 原理还是属于 XMLHttpRequest， 因此需要实现一个ajax。   还需要但会一个promise对象来对结果进行处理。 以get请求为例，实现一个axios 实现ajax的get请求 var Ajax={ get: function(url, fn) { // XMLHttpRequest对象用于在后台与服务器交换数据 ...
axios原理
VegetableKCCCC的博客
09-06 4370
1.axios是什么？ axios是一个基于promise的http库，可以用在浏览器和node.js的环境中；本质上也是对原生xhr的封装，只不过它是promise的实现版本，符合最新的ES规范 axios有什么特性 1.可以用在浏览器和node.js的环境中，从浏览器中创建XMLHttpRequests；基于node内置核心模块http实现axios，从中创建http请求，也就是说，axios可以在浏览器上和服务器上都可以发起请求 2.是一个基于Promise的HTTP库，支持promise的所有API
JavaScript案例-原生ajax
02-16
但通过设置服务器端的CORS（跨源资源共享）头或者使用JSONP（JSON with Padding）可以解决跨域问题。 8. **安全和性能**：考虑使用HTTPS协议以提高安全性，同时注意合理设置超时时间以避免长时间等待。 9. **现代...
js代码-手写代码练习----jsonp ， ajax , 解决跨域问题几种方式
07-15
本篇将深入探讨如何通过JSONP和AJAX技术，以及其他的解决跨域问题的方法。 首先，我们来理解什么是“跨域”。同源策略是浏览器为了安全而设定的一项规定，它限制了来自不同源（协议+域名+端口）的脚本之间交互。这...
手写axios核心原理，再也不怕面试官问我axios原理
weixin_43964148的博客
10-19 1633
手写axios核心原理，再也不怕面试官问我axios原理 手写axios核心原理手写axios核心原理，再也不怕面试官问我axios原理手写axios核心原理一、axios简介axios...
面试官：请手写一个带取消功能的延迟函数，axios 取消功能的原理是什么
u012384510的博客
12-21 357
大家好，我是若川。最近组织了源码共读活动，感兴趣的可以点此加我微信 ruochuan12参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》...
axios请求失败、请求超时重新发送请求
weixin_47437528的博客
11-25 1万+
axios请求超时，重新发送请求，拦截非网络错误的请求直接返回错误信息
axios设置timeout失效问题
踏步修行
07-10 1万+
在项目中遇到了后台接口返回数据慢的时候往往需要设置请求失效时间，在项目中遇到设置timeout失效问题由此记录下来。 之前代码是这样设置axios的 import axios from 'axios'; let Config = { TIMEOUT: 60000, baseURL: { dev: window.BASEURL_01, prod: '' } }; axios.defau...
axios 设置 timeout 不生效
曹曹的博客
10-21 4211
axios 设置 timeout 不生效 目前只是记录一下， 还没有深入研究， 若有不对或其他见解还请大家多多留言补充！ 自己封装的方法： const axiosWithTimeout = async (config) => { const { timeout } = config; const abort = axios.CancelToken.source(); setTimeout( () => abort.cance
axios 设置超时时间 — timeout
qq_43430897的博客
08-14 2845
全局设置网络超时时间 axios.defaults.timeout = 30 * 1000;
axios 设置超时
不正经的博客
08-14 4620
以post请求为例： axios.post(url, params, {timeout: 1000 * 60 * 2}).then(function(resp){     console.log(resp) }).catch(() =&gt; {     console.log('111') }) url：请求地址 params：请求参数 {timeout: 1000 * 60 *...
设置请求超时时间(timeoutInterval)不起作用
qq_28091923的博客
01-10 1万+
方法一： 解决办法: AFHTTPSessionManager *manager = [AFHTTPSessionManager manager]; manager.responseSerializer = [AFHTTPResponseSerializer serializer]; // 设置超时时间 [manager.requestSerializer willChangeValue...
解决在vue中axios请求超时的问题
h666000的博客
08-30 3531
自从使用Vue2之后，就使用官方推荐的axios的插件来调用API，在使用过程中，如果服务器或者网络不稳定掉包了, 你们该如何处理呢? 下面我给你们分享一下我的经历。 具体原因 最近公司在做一个项目, 服务端数据接口用的是java输出的API, 有时候在调用的过程中会失败, 在谷歌浏览器里边显示Provisional headers are shown。 按照搜索引擎给出来的解决方案，解决不了我的问题. 最近在研究AOP这个开发编程的概念，axios开发说明里边提到的栏截器(axios.Intercepto
jquery ajax boundary,javascript - AJAX error:
06-01
抱歉，这两个问题似乎没有明确的联系，可以分别解答。 1. jQuery AJAX boundary 我猜这里的 boundary 指的是...另外，还需要注意跨域请求时可能会遇到的跨域问题，需要设置合适的跨域策略（比如 CORS 或 JSONP）。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值