122Ajax-Ajax请求限制、同源非同源、JSONP封装是【同步】可以放在html最前面判断是否登陆、ajax是【异步请求】

教练我真的想敲代码

于 2020-08-02 14:39:55 发布

阅读量362

点赞数

分类专栏： ajax js 文章标签： ajax

本文链接：https://blog.csdn.net/Gy_9543/article/details/107744310

版权

本文介绍了Ajax的同源限制，即不同网站的HTML文件无法跨域发送Ajax请求。为了解决这个问题，文章详细讨论了JSONP的工作原理，包括模拟Ajax请求、参数传递的特点，并讲解了客户端和服务器端的JSONP封装过程。特别指出，由于JSONP是同步的，因此可以在HTML页面加载初期用于判断用户登录状态。

摘要由CSDN通过智能技术生成

Ajax请求限制

Ajax 只能向自己的服务器发送请求。比如现在有一个A网站、有一个B网站，A网站中的 HTML 文件只能向A网站服务器中发送 Ajax 请求，B网站中的 HTML 文件只能向 B 网站中发送 Ajax 请求，但是 A 网站是不能向 B 网站发送 Ajax请求的，同理，B 网站也不能向 A 网站发送 Ajax请求。

同源

在这里插入图片描述

JSONP解决同源限制【模拟 Ajax 请求、传递的参数不会像ajax一样都变为字符串格式】

fn定义的名字要对应一样
客户端fn要写在src之前
在这里插入图片描述

<!-- 
    使用 JSONP 解决同源限制问题
jsonp 是 json with padding 的缩写，它不属于 Ajax 请求，但它可以模拟 Ajax 请求。
1.   将不同源的服务器端请求地址写在 script 标签的 src 属性中
 <script src="www.example.com"></script>
 <script src=“https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
2.   服务器端响应数据必须是一个函数的调用，真正要发送给客户端的数据需要作为函数调用的参数。
 const data = 'fn({name: "张三", age: "20"})';
 res.send(data);
3.   在客户端全局作用域下定义函数 fn
 function fn (data) {
    }
4.   在 fn 函数内部对服务器端返