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>