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" });
  • 相关阅读:
    JS匿名函数及调用及闭包
    js的变量提升和函数提升
    JS调用模式以及bind()方法
    转载:JS call()方法和apply()方法
    创建一个用于上传文件的表单
    POST 异步请求 url没有明文显示
    转载:nodejs res.end和res.send 区别
    HTTP中get和post区别
    通读cheerio API
    转载:JS数组reduce()和reduceRight()方法
  • 原文地址:https://www.cnblogs.com/web369/p/4342647.html
Copyright © 2011-2022 走看看