首页 > 编程笔记 > JavaScript笔记 > Ajax 阅读:128

AJAX跨域请求(案例实战)

AJAX 跨域通信的实现方法:在被请求域中提供一个用于响应请求的服务器端脚本文件,并在响应头部消息中添加 Access-Control-Allow-Origin 参数,将参数值指定为允许向该页面请求数据的域名+端口即可。

【示例】下面示例演示了如何实现跨域数据请求。在客户端页面中设计一个操作按钮,当单击该按钮时,向另一个域中的 test.php 脚本文件发送请求数据,该脚本文件返回一段简单的字符串,本页面收到该文字后将其显示在页面上。

前台页面

<script type="text/javascript">
    function ajaxRequest () {
        var xhr = new XMLHttpRequest();
        xhr.open('GET', 'http://localhost/test.php', true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                document.getElementById("result").innerHTML = this.responseText;
            }
        };
        xhr.send(null);
    }
</script>
<input type="button" value="跨域请求" onclick=ajaxRequest()"></input><br>
响应数据:<output id="result">

跨域后台页面

<?php
    header('Access-Control-Allow-Origin:http://localhost/');
    header('Content-Type:text/plain;charset=UTF-8');
    echo '我是来自异域服务器的数据。';
    flush();
?>
演示效果如下图所示。

爱面试的程序媛,一个分享面试经验的公众号。跟着站长一起学习,每天都有进步。

通俗易懂,深入浅出,定时分享程序员面试的那点事。

面试如何造火箭?工作如何拧螺丝?都在这个公号哦。

扫描二维码关注公众号,免费领取价值 1000 元的求职面试资料(限时免费)!

当你决定关注「爱面试的程序媛」,你已然超越了90%的程序员!

爱面试的程序媛二维码
微信扫描二维码关注

所有教程

优秀文章