黑马程序员技术交流社区

标题: 初步理解json [打印本页]

---

作者: 梦曦    时间: 2019-6-27 23:56
标题: 初步理解json


同源：域名相同||端口相同||协议相同
跨域：
若干情况

• 域名不同
• 域名相同||端口不同||协议相同
• 域名相同||端口相同||协议不同
  

场景说明：
网站域名：http://www.a.com
服务器地址:http://www.b.com/api/
后端文件：

[JavaScript] 纯文本查看 复制代码

var callbackName = Request.QueryString["callback"];

stringjsonData = "{"message":"ok"}";

return callbackName+"("+jsonData+")";

跨域请求代码：（以下代码为jQuery封装的AJAX请求）


获取请求成功后，在控制台输入的结构:{"message":"ok"}
通过script的开放策略，可以调用任何地址
同源策略的定义（百度）
同源策略 有网景提出的提出的一个著名的安全策略，现在支持javascript的浏览器都会使用这个策略
所谓的同源策略是值 域名,协议，端口相同 。
当一个浏览器的两个tab页中分别打开百度和谷歌的页面当一个浏览器执行一个脚本的时候会检测这个脚本是属于哪个页面的 【检查这个脚本是否属于这个页面(同源)】
条件：同源才会被执行
<script src="http://www.b.com/api/"></script>
script 中的src具有跨域特性
设计步骤如下：
1、定义一个jsonp函数，用于接收到跨域数据。
function jsonp(){}
2、函数中生成一个dom节点（script节点）,然后src属性上面计入发送的目的url 以及参数
3、生成一个全局函数，用于执行回调

[JavaScript] 纯文本查看 复制代码

function jsonp(obj){

    var script=document.createEleent("script");

    var callbackFn = obj.callback;  

    //组合URL 

    script src=obj.url+"?callback="+callBackFn;

    //获取数据

    for(key in obj.data){

        script.src+="&"+key+"="obj.data[key];

        // 获取数据 &name=zhangsan

    }

    //获取数据后 将创建的新节点添加到bom数上

    // 将创建的节点 添加到BOM数上

    document.getElementByTagName("body")[0].appendChild(script);

    window[callbackFn] = function(object){

        obj.success(object);

        // 移除回调函数

        delete window[callBackFn];

        // 执行完毕后移除节点

        script.parentNode.removeChild(script);

    }

}

调用jsonp 跨域请求http://www.b.com/api/
         

[JavaScript] 纯文本查看 复制代码

jsonp({

    url:"http://www.b.com/api/",   //请求地址

    type:'get',   

    data:{'id':1},

    success:function(res){

        console.log(res);

    }

})

---

欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2