如何解决IE8下Ajax调用时跨域的问题

Posted 2023-05-17

你没说跨域要干嘛，我没法给你准确的答案；

但IE9以下跨域的办法只有那几种：

如果是简单的跨域，只需要传值过去，并不需要服务器响应，使用下面的代码

var img = new Image();
img.src = '要跨域的网址';

如果需要服务器端响应，使用JSONP

原理大概是这样的，先在当前JS里面创建一个回调函数，然后再以加载外部scipt的方法访问要跨域的网址，然后网址调用回调函数并传参。

var script = document.createElement('script');
script.src = '//localhost//web01/index.php?s=home/index/xhr';
document.body.appendChild(script);
function callback(json) 
    console.log(json);

服务器返回的信息里面一定要用  callback()包裹。

参考技术A ajax跨域你用jsonp就不存在兼容问题嘛,各浏览器都支持这种方式的跨域请求

AJAX的一个简单实例，跨域的解决，使用JQuery来进行ajax的调用

1.什么是AJAX

ajax（Asynchronous Javascript And XML），中文名为异步的js和xml。可以在不刷新网页的情况下与后台服务器进行通讯，加强用户的体验感。是目前广泛使用的前端技术，下面将用原生js和JQuery来介绍一个简单的ajax实例。

2.一个简单的AJAX实例

get请求

// 采用原生的js代码（get请求）
//1.实例化XMLHttpRequest对象
var request = new XMLHttpRequest();
//2.调用open方法，第一个参数为请求方式（get、post），第二个参数为请求地址，第三个参数为异步或者同步
 request.open("GET", "请求url"，true);
 //3.发送请求
 request.send();
 //4.监听服务器响应数据
 request.onreadystatechange = function () {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    console.log(request.responseText);//打印服务器响应的数据
                }else {
                    alert("错误");
                }
            }
        }

post请求,注意post请求必须添加响应头

// 采用原生的js代码（post请求）
//1.实例化XMLHttpRequest对象
var request = new XMLHttpRequest();
//2.调用open方法，第一个参数为请求方式（get、post），第二个参数为请求地址，第三个参数为异步或者同步
 request.open("POST", "请求url"，true);
 //3.准备数据
 var data = ['key' = 'value'];
 //4.设置响应头,注意post请求必须添加响应头
 request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 //5.发送请求
 request.send(data);
 //6.监听服务器响应数据
 request.onreadystatechange = function () {
            if (request.readyState === 4) {
                if (request.status === 200) {
                    console.log(request.responseText);//打印服务器响应的数据
                }else {
                    alert("错误");
                }
            }
        }

3.采用JQuery内置的方法来调用ajax

get请求

//JQuery
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>//引入jq库
$.ajax({
	type: "GET",	
	url: "请求url",
	dataType: "json",
	success: function(data) {
		//请求成功后回调函数
	},
	error: function(jqXHR){
		//请求失败后回调函数
	},
});

post请求

//JQuery
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>//引入jq库
$.ajax({
	type: "POST",	
	url: "请求url",
	data:{
		key:value
	},
	dataType: "json",
	success: function(data) {
		//请求成功后回调函数
	},
	error: function(jqXHR){
		//请求失败后回调函数
	},
});

4.解决跨域问题

http://www.abc.com:8080/index.php

协议.二级域名.域名:端口号/目标脚本文件

跨域是用ajax异步请求时经常遇到的问题,只要协议、域名、端口号其中一个不同，就产生了跨域访问，解决的方法很简单，建议利用XHR2方法，在后台进行操作从而实现跨域支持IE9以上在服务器设置以下2个请求头就可以解决：

header('Access-Control-Allow-Origin:*'); //*为支持所有地址跨域，可以改为只允许特定地地址跨域
header('Access-Control-Allow-Methods:POST,GET');//POST、GET为允许的请求方式