jsonp跨域问题

浏览数：46 / 时间：2015年06月09日

之前一直对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);
    }