AJAX学习笔记完（学习自用）

跨域

同源策略

同源策略（same-Origin-Policy）最早由Netscape公司提出，是浏览器的一种安全策略。

同源：协议、域名、端口号、必须完全相同。

违背同源策略就是跨域。

ajax默认遵从同源策略

同源策略：

复制代码

<!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>
    <h1>svt</h1>
    <button>点击获取用户信息</button>
    <script>
        const btn=document.querySelector('button')
        btn.onclick=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>
</html>

js 复制代码

const express=require('express')

const app=express()

app.get('/home',(req,res)=>{
    res.sendFile(__dirname+'/index.html')
})

app.get('/data',(req,res)=>{
    res.send("用户数据")
})

app.listen(9000,()=>{
    console.log("服务已启动");
})

如何解决跨域

JSONP

JSONP是什么
JSONP（JSON with Padding），是一个非官方的跨域解决方案，只支持get请求。
JSONP是怎么工作的
在网页有一些标签天生具有跨域能力，比如：img link iframe script。
JSONP就是利用script标签的跨域能力来发送请求的。
JSONP的使用
1. 动态的创建一个script标签
  var script=document.createElement("script");
2. 设置script的src，设置回调函数
  script.src="http://localhost:3000/testAJAX?callback=abc";

原理演示：

原理演示

复制代码

 <script>
     function handle(data){
         const result=document.getElementById('result');
         result.innerHTML=data.name;
     }
 </script>
 <script src="http://127.0.0.1:8000/jsonp-server"></script>
 <!-- <script src="http://127.0.0.1:5500/code/7-%E8%B7%A8%E5%9F%9F/2-JSONP/1-%E5%8E%9F%E7%90%86%E6%BC%94%E7%A4%BA.html"></script> -->

js 复制代码

//jsonp服务
app.all('/jsonp-server',(req,res)=>{
    const data={
        name:'hoshihhh'
    };
    //将数据转化为字符串
    let str=JSON.stringify(data);
    //返回结果
    res.end(`handle(${str})`);
})

jsonp实践
案例用户名：

js 复制代码

app.all('/jquery-jsonp-server',(req,res)=>{
    const data={
        name:'hoshi',
        city:['北京','上海','深圳']
    };
    //将数据转化为字符串
    let str=JSON.stringify(data);
    //接收callback参数
    let cb=req.query.callback;

    //返回结果
    res.end(`${cb}(${str})`);
})

CORS

CORS是什么？
CORS（Cross-Origin Resource Sharing），跨域资源共享。CORS是官方的跨域解决方案，它的特点是不需要在客户端做任何特殊的操作，完全在服务器中处理，支持get和post请求。跨域资源共享标准新增了一组HTTP首部字段，允许服务器声明哪些源站通过浏览器有权限访问哪些资源
CORS怎么工作的？
CORS是通过设置一个响应头来告诉浏览器，该请求允许跨域，浏览器收到该相应以后就会对响应放行。
CORS

js 复制代码

app.all('/cors-server',(req,res)=>{
    //设置响应头 设置允许跨域
    res.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    res.setHeader('Access-Control-Allow-Headers','*');
    //响应方法
    res.setHeader('Access-Control-Allow-Methods','*');
    res.send('hello cors')
})

js 复制代码

app.all('/cors-server',(req,res)=>{
    //设置响应头 设置允许跨域
    res.setHeader('Access-Control-Allow-Origin','*');
    //响应头
    res.setHeader('Access-Control-Allow-Headers','*');
    //响应方法
    res.setHeader('Access-Control-Allow-Methods','*');
    res.send('hello cors')
})