首页 > 代码库 > jsonp跨域问题

jsonp跨域问题

2024-11-18 21:01:39   205人阅读

之前一直对jsonp跨域问题不知道怎么去解答，今天在百度文库看到了一篇文档，很不错，来一个：传送门 传送门 传送门

这篇文档讲的很明白，也很清楚，下面总结下我自己或得到知识：

 

首先，jsonp的出现是解决跨域问题的，这个是我们经常用到的，由于同源策略，一个a.com的网站与b.com的网站无法进行服务器通信，

而文档中可以看出，HTML中的script出现了例外，所有利用这个开发策略，可以通过其他JSON来源来获得所要的数据。

在项目中通常我们会用jquery的ajax进行通信，其形式如下

$("#getJsonpByJquery").click(function () {    $.ajax({        url: ‘http://your_url‘,        dataType: "jsonp",        jsonp: "callback",        success: function (data) {            console.log(data)        }    })})

下面贴出项目中整个流程使用的jsonp的过程

（以下是选课系统项目中产生课程列表的具体代码）

    var url=WebServiceURL+"course_list?"+arr[1];    console.log(url);        $.ajax({        url:url,        type:‘POST‘,        dataType:‘jsonp‘,        success:function(data){            if(2000==data[‘code‘]&&‘success‘==data[‘msg‘]){            var courseData= http://www.mamicode.com/data["data"];            console.log(courseData);            for(var i=0;i<courseData.length;i++)                addList(courseData[i],i);            }        }    });    var addList=function(course,index){        var href="http://www.mamicode.com/course_detail.html?courseNo="+course["courseNo"];        var contextHead="<a class=\"list\" href=http://www.mamicode.com/""+href+"\">";        var contextFoot="</a>";        var part1="<div class=\"list_img\"><img src=http://www.mamicode.com/""+ServiceURL+"attachments"+course["thumb"]+"\"></div>";        var part2="<div class=\"list_datial\"><div class=\"list_tit\">"+course["courseName"]+"</div>";        var part3="<div class=\"list_cont\">"+course["courseContent"].substr(0, 60)+"</div></div>";        context=contextHead+part1+part2+part3+contextFoot;        $(‘#courseList‘).append(context);    }

下面再介绍下jsonp，jsonp是由两部分组成，一部分是数据，一部分是回调函数，回调函数就是当响应到来时应该在页面中调用的函数，数据就是传入回调函数中的json数据。

优点是：第一，能直接访问响应文本；第二，jsonp支持在浏览器与服务器之间的双向通信。缺点：它无法保证加载的来自其他域的代码是安全的，还有就是无法判断jsonp的请求是否失败。

 

 

谢谢，如有错误联系本博，看到会在24小时内修正。

 

jsonp跨域问题


联系
我们