Ajax跨域请求，Json与Jsonp

一、跨域
http://www.abc:8000/script/demo.js

http（协议）、www（子域名）、abc（主域名）、8000（端口号）、script/demo.js（请求的地址）

当协议、子域名、主域名、端口号中任意一个不同时，即为不同的域。不同的域之间相互请求资源，即为跨域。

二、Json与Jsonp

之前有人形容Java与JavaScript之间的关系是雷锋与雷峰塔之间的关系，现在Json与Jsonp也可以这么形容。

json是一种数据交换格式。
json只有{}和[]两种数据描述符，:映射符、,分隔符，""定义符。
{}用来描述一组“不同类型的无序键值对组合”，[]用来描述一组“相同类型的有序数据组合”。

jsonp是一种跨域的数据交互方式。
可以这样说，json是我们写信使用的语言，而jsonp是我们将信送出去的方式。

三、Ajax跨域请求

最近写了一个Ajax请求，发现请求成功后，不执行success中的回调函数，而是执行error中的回调函数。总结可能的原因有：

    1.返回的数据类型一定要与dataType中定义的数据类型一致，否则就会执行error部分的程序块。（注意返回的json数据一定要是严格的json格式。）
    2.Ajax请求跨域了。

我了解的解决Ajax跨域请求的方法：

    1.代理：由我们的后端访问另一个域的服务，将请求的数据返回给前端，而前端直接访问我们的服务就相当于请求了另一个域的服务，即在我们的后端做了一个代理。
    2.利用jsonp：
    jsonp跨域的原理：某个服务器下的页面是无法获取到该服务器以外的数据的，但像script、img、iframe这种具有src属性的标签是可以通过src来访问其他服务器上的数据。我们利用script标签的开放策略，来访问其它服务器上数据。当我们正常请求json数据的时候，服务端返回来的是一段json类型的数据，而当我们用jsonp请求的时候，服务端返回来的是一段可执行的JavaScript代码。
    例：我们要从服务器获取的数据如下：

    {"id":123,"name",Jhon,"age":18};

使用JSONP方式请求(http://www.abc.com/user?id=123?callback=foo)的数据如下：

    foo({"id":123,"name",Jhon,"age":18});

如服务器端考虑充分，返回的可能是：

    try{foo({"id":123,"name",Jhon,"age":18});}cache(e){}

这时候我们只要定义一个foo()函数，并动态地创建一个script标签，使其的src属性为http://www.a.com/user?id=123?callback=foo：便可以使用foo函数来调用返回的数据了。

在jQuery中通过jsonp跨域获取数据：
1.在Ajax中设置dataType类型为"jsonp"

    $.ajax({
        dataType:"jsonp",
        url:"http://www.abc.com/user?id=123",
        success:function(){
            //处理data数据
        }
    });

2.利用getJSON来实现，只要在地址中加上callback=?参数即可：

    $.getJSON("http://www.abc.com/user？id=123&callback=?",function(data){
        //处理data数据
    })

也可以简单地使用getScript方法：

    function foo(data){
        //处理data数据
    }
    $.getJSON("http://www.abc.com/user？id=123&callback=foo");

Ajax与Jsonp的目的是样的，都是请求一个url，把服务器返回的数据进行处理，但Ajax的核心是通过XmlHttpRequest获取非本页的内容，而jsonp的核心是通过添加<script>标签来调用服务器提供的js脚本。

Ajax跨域请求，Json与Jsonp

猜你喜欢