jsonp跨域问题

之前一直对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= data["data"];
            console.log(courseData);
            for(var i=0;i<courseData.length;i++)
                addList(courseData[i],i);
            }
        }
    });
    var addList=function(course,index){
        var href="course_detail.html?courseNo="+course["courseNo"];
        var contextHead="<a class="list" href=""+href+"">";
        var contextFoot="</a>";
        var part1="<div class="list_img"><img src=""+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的请求是否失败。

其中jq的使用方式如下：

 

传送门

jsonp详解

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