zoukankan      html  css  js  c++  java
  • ajax跨域问题

          提到ajax 大家比较头疼的是跨域问题,在项目中大多说都是以json格式来存储数据的,所以说我们今天就简单说一下利用jsonp形式来解决跨域问题,大家都知道只要带有src的标签都可以跨域请求,如img、script、、、

          所以说解决ajax 跨域问题的关键是src标签,我们可以用script src 标签,然后再来个回调函数的方法解决跨域。

               假如我们远程服务器有个alert.js,然后里面有alert("跨域成功");

               然后我们在有index.html,

          

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    </head>
    <body>

    </body>

    <script src="alert.js"></script>
    </html>

     我们就会看到弹出个跨域成功;

    当然这只是证明src跨域能力,真实项目中不会这样的,真实项目中会有个回调函数来接收请求回来的数据

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">
        // 得到航班信息查询结果后的回调函数
        var flightHandler = function(data){
            alert('你查询的航班结果是:票价 ' + data.price + ' 元,' + '余票 ' + data.tickets + ' 张。');
        };
        // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
        var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
        // 创建script标签,设置其属性
        var script = document.createElement('script');
        script.setAttribute('src', url);
        // 把script标签加入head,此时调用开始
        document.getElementsByTagName('head')[0].appendChild(script); 
        </script>
    </head>
    <body>
    
    </body>
    </html>
    这样的话就获取所需要的数据了,当然这是原生的写法,在做项目的时候我们会用封装好的jq中的ajax来获取想要的数据。

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery-2.1.1.min.js" type="text/javascript"></script>
    <style>
    .bk{
    100%;
    border:1px solid;
    }
    </style>
    </head>
    <body>

    <input type="button" name="bt" id="bt" class="bk"/>
    </body>

    <script>
    bt.onclick=function(){
    $.ajax({
    type:"get",//请求的方式
    url:"http://flightQuery.com/jsonp/flightResult.php?code=CA1998",//航班的地址
    async:false,//是否同步
    dataType: "jsonp",//请求的格式
    jsonp:"callback",//代表回调函数
    jsonpCallback:'?',//回调函数的名字,默认为?
    success:function(json){
    alert("你查询的航班是:"+json.price)
    },
    error:function(){
    alert("fail");
    }
    });
    }


    </script>

    </html>

    好了,这是前端的解决跨域的方法,其实还有一种后端的解决方法

    如果是php文件就在文件头部添加 header('Access-Control-Allow-Origin:*') 标签

    使用如下标头可以接受指定网站请求:

    header('Access-Control-Allow-Origin:http://www.abc.com');

    今天就说这些吧

         

  • 相关阅读:
    (31)对象的克隆
    (30)批处理文件.bat
    06.v-on的修饰符
    06.v-on参数问题
    06.2修饰符补充
    06.1v-on基础+-.
    03.data数据对象
    02.el挂载点
    02.5v-pre指令
    02.4v-text指令
  • 原文地址:https://www.cnblogs.com/a8497336/p/6731158.html
Copyright © 2011-2022 走看看