zoukankan      html  css  js  c++  java
  • js中ajax如何解决跨域请求

    js中ajax如何解决跨域请求,在讲这个问题之前先解释几个名词

    1、跨域请求
    所有的浏览器都是同源策略,这个策略能保证页面脚本资源和cookie安全 ,浏览器隔离了来自不同源的请求,防上跨域不安全的操作。
    跨域指的协议、域名、端口 有一个不同的情况下都是跨域
    例:在本站点请求外站的数据是不允许的

    //在本站点请求外站点的资源是不允许的
    $(function () {
        $.ajax({
            url: "http://127.0.0.1:14847/Web/jsonp.js",
            success: function (data) {
                console.log(data);
            }
        });
    });

    2、URL详解
    http://www.baidu.com/a.html?key=1111
    https://www.baidu.com:8080/a.html?key=2222
    协议:http、https
    域名:www.baidu.com
    端口:8080 默认是80端口不显示
    路径:/a.html
    参数:key=2222

    3、json
    在页面中一般都会用ajax进行数据请求返回的是json格式,json(JavaScript Object Notation)是一种轻量级的数据交换格式,采用文本格式,兼容各大语言
    表示一个对象:
    {"name":"tom","sex":"F","age":"22"}
    表示一组对象
    [
    {"name":"tom","sex":"F","age":"22"},
    {"name":"jim","sex":"M","age":"21"}
    ]


    4、jsonp
    JSONP(JSON with Padding)是JSON的一种“使用模式”,主要用于解决浏览器的跨域数据访问的问题


    采用一种变通的方法解决跨域请求的限制

      在ajax请求中出于安全考虑是绝对不允许跨域请求;
      但是有些确可以跨域请求例如:<img> <script> <style>这些标签是可以实现跨域请求的,不然也实现不了CDN请求;

    //jsonp主要就是通过<script>嵌入外站点的js代码实现跨域请求,但是目标js文件不能直接输出json数据了;
    //需要定义一个方法名,以参数的形式来调用,例如下面所示
    //在目标js文件中定义了一个jsonp_20150316方法 括号号内的是参数
    //在当前页引用时就通过参数的形式得到数据,从而实现了跨域请求

    <script type="text/javascript"> // 得到航班信息查询结果后的回调函数 var jsonp_20150316 = function (data) { console.log(data["name"]); console.log(data["sex"]); console.log(data["age"]); }; var url = "http://127.0.0.1:14847/Web/jsonp.js?callback=flightHandler"; //jsonp_20150316({ "name": "tom", "sex": "F", "age": "22" });
      //以下是动态引用目标请求文件 等价于<script src="http://127.0.0.1:14847/Web/jsonp.js" type="text/javascript"></script> var script = document.createElement('script'); script.setAttribute('src', url); document.getElementsByTagName('head')[0].appendChild(script); </script> //http://127.0.0.1:14847/Web/jsonp.js?callback=flightHandler jsonp_20150316({ "name": "tom", "sex": "F", "age": "22" });
  • 相关阅读:
    还不懂MySQL索引?这1次彻底搞懂B+树和B-树
    11条MySQL规范,你知道的有几个?
    4个点说清楚Java中synchronized和volatile的区别
    还不知道如何实践微服务的Java程序员,这遍文章千万不要错过!
    14个Java并发容器,你用过几个?
    分布式事务解决方案,中间件 Seata 的设计原理详解
    一篇文章搞明白Integer、new Integer() 和 int 的概念与区别
    一线大厂面试官最喜欢问的15道Java多线程面试题
    70道阿里百度高频Java面试题(框架+JVM+多线程+算法+数据库)
    关于spark当中生成的RDD分区的设置情况。
  • 原文地址:https://www.cnblogs.com/web369/p/4342647.html
Copyright © 2011-2022 走看看