欢迎登录

原生的ajax和jsonp跨域

:2019-12-14    :95 次   :1594 字   

前言:

前端利用ajax请求服务器数据,和利用jsonp解决请求跨域问题,后端时php,下面时几个demo。

例子:

1、ajax

<div id="app"></div>
    <script>
        /**
        get请求数据,由于后端已经用 跨域资源共享(CORS) php:header("Access-Control-Allow-Origin:*");
        前端不需要跨域处理
        **/
        function ajax() {
            //新建一个对象
            var xml = new XMLHttpRequest();
            //open (method:请求的类型;GET 或 POST,url:文件在服务器上的位置,async:true(异步)或 false(同步))
            xml.open("GET", "https://api.xygeng.cn/dailywd/api/", true);
            //send (string)
            xml.send();
            xml.onreadystatechange = function () {
                if (xml.readyState == 4 && xml.status == 200) {
                    console.log("请求成功");
                    document.getElementById("app").innerHTML = xml.responseText;
                }
            }
        }
        ajax();
    </script>

2、jsonp

前端

<script>
        //jsonp可以解决get跨域
        var script = document.createElement('script');
        script.type = 'text/javascript';
        script.src = 'http://localhost/test/index.php?callback=login&&text="我是文字"';
        document.head.appendChild(script); // 回调执行函数
        function callBack(res) {
            console.log(res);
        }

        function login(res) {
            console.log(res);
            console.log("回调成功");
        }
</script>

php后端

<?php

echo $_GET['callback'].'('.$_GET['text'].')';

?>
    暂无评论,快来抢沙发吧!
×