原生JavaScript的ajax和jsonp跨域原理

前言：

前端利用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'].')';

?>