【JavaScript】通过封装自己的JSONP解决浏览器的跨域问题(Ajax跨域)

简介: 版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/82701029 ...
版权声明:本文为博主原创文章,未经博主允许不得转载。更多学习资料请访问我爱科技论坛:www.52tech.tech https://blog.csdn.net/m0_37981569/article/details/82701029
问题引出:要发送Ajax请求,就必须使用HTTP请求?什么是跨域问题?

什么是跨域问题:如果两个页面中的协议、域名、端口、子域名任意有一项不同,两者之间所进行的访问行动就是跨域的,而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。

如何解决呢?

1. 使用创建DOM元素的方式创建img对象, audio, video, link 这几个对象都支持跨域请求,。
var img = new Image();
    img.src = 'http://192.168.1.105:8080?name=zhangsan&age=18';

类似于上面的这种呢?还有其他一些类似的标签,实际上是可以向服务器发送请求的,但是不能拿到返回值

 

2.  使用link标签, 但是也不能拿到服务器的请求, 然后再试试script这个标签来试试看???

<link rel="stylesheet" href="">

link标签只能支持css的格式,其他格式的内容浏览器是显示不出来的

 

3. 使用script标签来实现跨域, 也能满足发送数据的要求, 接受数据呢?来测试一下。

 var script = document.createElement('script');
    script.src = 'http://192.168.1.105:8080?name=zhangsan&age=18';
    document.body.appendChild(script);          // 开始正式发送请求

经测试,还是真可以的,而且在客户端也成功接受到了数据,这说明我们终于找对了路!

 

4. 解决没有加载完成就输出的问题( 这样就会等待到script标签加载完成之后执行)

 // 在返回数据到客户端之前,先进行字符串拼接
    let json = JSON.stringify({
        id: 1,
        name: 'zhangsan',
        age: 18,
        gender: 'Male'
    });

    let jsonStr = 'var data = ' + json;

上面的是我们服务器的数据, 我们直接通过字符串拼接json,然后发给浏览器。

console.log(data)

直接输出,我们发现报错了,找不到这个变量???

原因是因为,浏览器自上而下执行代码,如果DOM元素没有加载完毕就输出,坑定会报错的 

 

5.解决没有加载完成就输出的问题( 这样就会等待到script标签加载完成之后执行)
script.addEventListener('load', function () {
        console.log(data);
    });

直接绑定个事件不就行了,测试以后还真是可以。

但是,缺点是: 这种方式需要服务器端定义一个全局变量, 从而会污染全局变量, 不太推荐…………

 

 6. 上面的思路逻辑和代码优化, 由于脚本执行过后才可以拿到数据, 上面的代码可以优化吗?
var script = document.createElement('script');
    script.src = 'http://192.168.1.105:8080?name=zhangsan&age=18';
    document.body.appendChild(script);

    function callback(data) {
        console.log(data)
    }

    实现原理: 服务器端实际上是返回了一个callback函数的调用, 类似于callback(jsondata), 因此当且仅当服务器断点数据返回来以后, 下面的这个函数就相当于是自动调用了, 就会直接得到服务器端传回来的数据信息, 从而打印输出数据。

服务器端就是这样的:

    let jsonFunc = `callback(${json})`;

7. 代码的继续优化, 可以直接在请求中, 我要自己定义一个函数呢?函数名我要自己指定的方法, 可以直接写在url请求中。

 var script1 = document.createElement('script');
    var url =  'http://192.168.1.105:8080?name=zhangsan&age=19&callback=callback1';
    script1.src = url;
    document.body.appendChild(script1);
    function callback1(data) {
        console.log(data);
    }

服务器端进行参数解析,换成用户自己定义的函数名字不就行了?

 let callback = urlObj.query.callback;

let jsonFunc = ''+callback+'' + '('+ json + ')';

到此,浏览器的跨域问题已经基本全部解决。

相关文章
|
3月前
|
前端开发 数据安全/隐私保护
crypto-js中AES的加解密封装
文章介绍了如何在前端使用crypto-js库进行AES加密和解密,提供了加解密的函数封装示例,并演示了如何加密和解密字符串或对象。
331 1
crypto-js中AES的加解密封装
|
3月前
|
Web App开发 JavaScript 前端开发
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
添加浮动按钮点击滚动到网页底部的纯JavaScript演示代码 IE9、11,Maxthon 1.6.7,Firefox30、31,360极速浏览器7.5.3.308下测试正常
|
1月前
|
移动开发 JavaScript 前端开发
一些处理浏览器兼容性问题的JavaScript库
这些库在处理浏览器兼容性问题方面都有着各自的特点和优势,可以根据具体的需求和项目情况选择合适的库来使用,从而提高代码的兼容性和稳定性,为用户提供更好的体验。同时,随着浏览器技术的不断发展,还需要持续关注和学习新的兼容性解决方案。
107 48
|
1月前
|
JavaScript 前端开发 Java
springboot解决js前端跨域问题,javascript跨域问题解决
本文介绍了如何在Spring Boot项目中编写Filter过滤器以处理跨域问题,并通过一个示例展示了使用JavaScript进行跨域请求的方法。首先,在Spring Boot应用中添加一个实现了`Filter`接口的类,设置响应头允许所有来源的跨域请求。接着,通过一个简单的HTML页面和jQuery发送AJAX请求到指定URL,验证跨域请求是否成功。文中还提供了请求成功的响应数据样例及请求效果截图。
springboot解决js前端跨域问题,javascript跨域问题解决
|
1月前
|
JSON 移动开发 JavaScript
在浏览器执行js脚本的两种方式
【10月更文挑战第20天】本文介绍了在浏览器中执行HTTP请求的两种方式:`fetch`和`XMLHttpRequest`。`fetch`支持GET和POST请求,返回Promise对象,可以方便地处理异步操作。`XMLHttpRequest`则通过回调函数处理请求结果,适用于需要兼容旧浏览器的场景。文中还提供了具体的代码示例。
在浏览器执行js脚本的两种方式
|
1月前
|
JavaScript 前端开发 数据处理
模板字符串和普通字符串在浏览器和 Node.js 中的性能表现是否一致?
综上所述,模板字符串和普通字符串在浏览器和 Node.js 中的性能表现既有相似之处,也有不同之处。在实际应用中,需要根据具体的场景和性能需求来选择使用哪种字符串处理方式,以达到最佳的性能和开发效率。
|
1月前
|
算法 开发者
Moment.js库是如何处理不同浏览器的时间戳格式差异的?
总的来说,Moment.js 通过一系列的技术手段和策略,有效地处理了不同浏览器的时间戳格式差异,为开发者提供了一个稳定、可靠且易于使用的时间处理工具。
38 1
|
1月前
|
Web App开发 JavaScript 前端开发
使用 Chrome 浏览器的内存分析工具来检测 JavaScript 中的内存泄漏
【10月更文挑战第25天】利用 Chrome 浏览器的内存分析工具,可以较为准确地检测 JavaScript 中的内存泄漏问题,并帮助我们找出潜在的泄漏点,以便采取相应的解决措施。
293 9
|
1月前
|
机器学习/深度学习 自然语言处理 前端开发
前端神经网络入门:Brain.js - 详细介绍和对比不同的实现 - CNN、RNN、DNN、FFNN -无需准备环境打开浏览器即可测试运行-支持WebGPU加速
本文介绍了如何使用 JavaScript 神经网络库 **Brain.js** 实现不同类型的神经网络,包括前馈神经网络(FFNN)、深度神经网络(DNN)和循环神经网络(RNN)。通过简单的示例和代码,帮助前端开发者快速入门并理解神经网络的基本概念。文章还对比了各类神经网络的特点和适用场景,并简要介绍了卷积神经网络(CNN)的替代方案。
129 1
|
1月前
|
JSON JavaScript 前端开发
js跨域实现
【10月更文挑战第31天】在实际开发中,需要根据具体的需求和项目情况选择合适的跨域解决方案。
29 1