Ajax如何进行跨域请求?Ajax跨域请求的原理

2024-09-01 08:27:08

字体：大中小

来源：转载

供稿：网友

本文实例为大家分享了Ajax跨域请求的具体实现过程，供大家参考，具体内容如下

下面我们在本地建两个站点演示一下

第一步首先我们在本地搭建好一个Apache服务器；下载地址；
第二步服务器配置好以后，在本地配置好两个虚拟的域名；
第三步我们在C盘建一个文件夹命名为”HTML5”；
第四步找到Apache虚拟主机的配置文件，然后打开配置文件

Apache虚拟主机的配置文件

第五步在第三步建的HTML5文件夹下分别建一个文件夹a和文件夹b;
第六步修改Apache虚拟主机的配置文件,如图

修改Apache虚拟主机的配置文件

第七步修改一下host文件，添加a和b的网址，通常host文件路径在C:/Windows/System32/drivers/etc 下

修改一下host文件

我们在HTML5/a文件夹下建一个7.ajax.html文件

<!DOCTYPE HTML><html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title>获取同域下内容</title><script>window.onload = function() { var oBtn = document.getElementById('btn'); // 忽略IE6 oBtn.onclick = function() { //创建一个ajax对象 var xhr = new XMLHttpRequest(); //监听事件 xhr.onreadystatechange = function() { if (xhr.readyState == 4) { if (xhr.status == 200) { alert(xhr.responseText); } } } xhr.open('get', 'ajax.php', true); xhr.send(); }}</script></head><body> <input type="button" value="获取同域下内容" id="btn" /></body></html>

我们先看一下同域下的请求

我们在HTML5/a下建一个php文件，返回'hello'；

ajax.php