// ajax在前端运用中是非常广泛的， 那么有一点需要注意的就是跨域，意思是跨服务器，跨端口去调取数据，使用正常的ajax是不可以的，  那么就要使用别的方法了，  方法有好几种，常用的就是 jsonp和使用CORS来进行跨域， 下面我为大家提供了一种 jsonp 跨域的方式源码和jsonp跨域的原理，  我们可以通过控制台来看到它调取的数据的方式

//常用的方式有两种   一种是jsonp   一种是  使用CORS跨域

$('.button').click(function(){

        var type=$(this).attr('id');

        $.ajax({

                type:'get',//这种形式  只支持get,  缺点：不安全 ，下面data数据大小不能太大（一般是够用的）

                url:"http://www.zhuyongchun.cn/ajax",  //一般域名这块要以变量的形式写 变量+ajax 

                dataType:'jsonp',  

                data:{'type':type},

                jsonp:'callback',  

                success : function(data){

                        // data=JSON.parse(data);//解析json串 ，这里不需要解析

                        if(data.status==1){

                        var html ='';

                        $.each(data.content, function(infoIndex,info){

                                       html+='<li>'+info['name']+'</li>';

                            })

                                if(type=='add'){

                                        $('.ul').append(html);

                                  }else{

                                        $('.ul').html(html);

                                    }

                        }else{

                                alert(data.status)

                        }

                }

        })

})

//

2.jsonp跨域的原理

我们知道，在页面上有三种资源是可以与页面本身不同源的。它们是：js脚本，css样式文件，图片，像taobao等大型网站，很定会将这些静态资源放入cdn中，然后在页面上连接，如下所示，所以它们是可以链接访问到不同源的资源的。

<xmp>

1）<script type="text/javascript" src="某个cdn地址" ></script>

2）<link type="text/css" rel="stylesheet" href="某个cdn地址" />

3）<img src="某个cdn地址" alt=""/>

</xmp>

而jsonp就是利用了

。当链接的资源到达浏览器时，浏览器会根据他们的类型来采取不同的处理方式，比如，如果是css文件，则会进行对页面 repaint，如果是img 则会将图片渲染出来，如果是script 脚本，则会进行执行，比如我们在页面引入了jquery库，为什么就可以使用 $ 了呢？就是因为 jquery 库被浏览器执行之后，会给全局对象window增加一个属性： $ ，所以我们才能使用 $ 来进行各种处理。（另外为什么要一般要加css放在头部，而js脚本放在body尾部呢，就是为了减少repaint的次数，另外因为js引擎是单线程执行，如果将js脚本放在头部，那么在js引擎在执行js代码时，会造成页面暂停。）