AJAX如何现实跨域请求？

AJAX如何现实跨域请求的原理

1） 什么是跨域？
跨域可以理解为跨领域、跨域名、跨服务器，具体表现为：协议、主机名、域名、IP、端口号这些任意一项不相同都属于跨域

2） 为什么要跨域？
跨域的目标是： 自己的服务器没有相关数据，只能去其它服务器读取数据显示在页面上，要其它服务器读数据。
由于ajax引擎不能够跨域读取数据，所以才需要自己实现跨域读取数据。

原理：由于同源策略，正常的ajax无权访问其他域名的资源。后来发现src这个属性却不受同源策略的影响（img,iframed等），其中也包括< script>标签的src属性。于是，人们考虑在远程服务器上把数据放进js文件里返回。这样就可以像ajax一样进行跨域请求了

如： remote.js：

remoteHandle({"result":"remote数据"});

 <script type="text/javascript"> 
   var localHandler = function(data){
        alert('remote数据是：' + data.result);
    };
    </script>
<script type="text/javascript" src="http://xxxxxx.com/remote.js"></script>

这样虽然可以完成跨域请求，但是在大公司里有很多业务。如携程有这样一个场景：酒店业务可以获得中国的一二级城市。
后来机票网站也需要这些一二级城市的数据，怎么样从机票域下请求酒店的数据呢？？？

 var queryCity= function(data){
   ......
  };

    var url = "http://xxx.ashx?cityType=1&callback=queryCity";
    // 创建script标签，设置其属性
    var script = document.createElement('script');
    script.setAttribute('src', url);
// 把script标签加入head，此时调用开始           document.getElementsByTagName('head')[0].appendChild(script); 


dResponce.Write(callback+”(data)”);

在jQuery里，ajax方法里封装好对JsonP的使用：

  $.ajax({
             type : "get",
             async:false,
             url : "xxx.php",
             dataType : "jsonp",
             jsonp: "callbackparam",//传递给请求处理程序或页面的，用以获得jsonp回调函数名的参数名(默认为:callback)
             jsonpCallback:"jsonpCallback",//自定义的jsonp回调函数名称，默认为jQuery自动生成的随机函数名
             success : function(json){             
             },
             error:function(){  
             }
         });

jsonp 原生写法

a. jsonp
            什么是JSONP？
                JSONP是JSON的一种使用模式，程序员之间的一种协议。
                可用于解决主流浏览器的跨域数据访问的问题
                利用script标签的跨域能力来实现

            JSONP协议
                服务器端：提供数据，接收callback参数名的值作为数据的函数进行调用（将数据作为该函数的参数进行调用）
                客户端：请求数据，在<script>标签的src属性中写远程服务器的地址，并且传一个参数 callback过去。

        JSONP的原生写法：
            服务器端(node.js)：
                var fn=req.query.callback;
                res.send('show({"name":"123","age":18})');

            客户端：
                <script>
                    function show(a){
                        console.log(a);
                    }
                </script>
                <script src="http://www.***.com/data.html？callback=show">
                    //show({"name":"123","age":18});
                </script>