首页 > 编程笔记 > JavaScript笔记 > Ajax
阅读:16
AJAX跨域请求(案例实战)
AJAX 跨域通信的实现方法:在被请求域中提供一个用于响应请求的服务器端脚本文件,并在响应头部消息中添加 Access-Control-Allow-Origin 参数,将参数值指定为允许向该页面请求数据的域名+端口即可。
【示例】下面示例演示了如何实现跨域数据请求。在客户端页面中设计一个操作按钮,当单击该按钮时,向另一个域中的 test.php 脚本文件发送请求数据,该脚本文件返回一段简单的字符串,本页面收到该文字后将其显示在页面上。
【示例】下面示例演示了如何实现跨域数据请求。在客户端页面中设计一个操作按钮,当单击该按钮时,向另一个域中的 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(); ?>演示效果如下图所示。
所有教程
- socket
- Python基础教程
- C#教程
- MySQL函数
- MySQL
- C语言入门
- C语言专题
- C语言编译器
- C语言编程实例
- GCC编译器
- 数据结构
- C语言项目案例
- C++教程
- OpenCV
- Qt教程
- Unity 3D教程
- UE4
- STL
- Redis
- Android教程
- JavaScript
- PHP
- Mybatis
- Spring Cloud
- Maven
- vi命令
- Spring Boot
- Spring MVC
- Hibernate
- Linux
- Linux命令
- Shell脚本
- Java教程
- 设计模式
- Spring
- Servlet
- Struts2
- Java Swing
- JSP教程
- CSS教程
- TensorFlow
- 区块链
- Go语言教程
- Docker
- 编程笔记
- 资源下载
- 关于我们
- 汇编语言
- 大数据
- 云计算
- VIP视频