首页 > Web开发 > 详细

前端跨域之Jsonp的原生请求和Jquery的ajax请求,简单易懂。

时间:2019-01-17 18:29:24      阅读:25      评论:0      收藏:0      [点我收藏+]

标签:java   支持   con   err   ror   local   存在   后端   https   

前言 :本文示例部署在XAMPP建站集成软件包上,在localhost环境下进行测试

1、什么是跨域

  • 由于浏览器同源策略,凡是发送请求url的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。存在跨域的情况 :
(1)网络协议不同,如http协议访问https协议。
(2)端口不同,如8080端口访问3000端口。
(3)域名不同,如aaaa.com访问bbbb.com。
(4)子域名不同,如java.ddd.com访问qianduan.ddd.com。
(5)域名和域名对应ip,如www.a.com访问20.205.28.90.

2、Jsonp方法

  • 因为srript标签是不存在跨域的,所以利用 script标签,加载src路径,实现跨域加载js文件。该js文件中需要定义好一个方法,将该方法名传递给服务端,服务端根据该方法名,拼装一个方法调用语句,响应给浏览器。又浏览器来执行该语句调用方法。通过参数,将响应的数据取出即可。

    (1)原生JS请求方式
  • 前端代码:
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = './js/text.js';
            document.head.appendChild(script);
            // 回调执行函数
            function onBack(res) {
                console.log(res)      //{name:"小明",age:24}
            }
  • 后端代码:
onBack({
    name:"小明",
    age:24
})
  • 这里需要注意的是,后端的数据形式必须作为函数的参数,且函数名要前后端保持一致。

    (2)Jquery中的ajax请求方式
    前端代码:
$.ajax({
            url:"./js/text.js",
            type:"GET",
            dataType:"jsonp",                 //  定义返回方式为jsonp
            jsonpCallback:"onBack",     //定义回调函数名字,前后端保持一致
            success:function(data){
                console.log(data)     //{name:"小明",age:24}
            },
            error:function(res){
                console.log("请求失败!")
            }
        })

后端代码:

onBack({
    name:"小明",
    age:24
})
  • 缺点1:只能使用get请求。
  • 缺点2:因为使用的是script标签,存在安全隐患。
  • 优点1:支持老式浏览器,以及可以向不支持CORS的网站请求数据。

前端跨域之Jsonp的原生请求和Jquery的ajax请求,简单易懂。

标签:java   支持   con   err   ror   local   存在   后端   https   

原文:https://www.cnblogs.com/xwkj/p/10283378.html

(0)
(0)
   
举报
评论 一句话评论(0
0条  
登录后才能评论!
© 2014 designnerd.net 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号