跨域：当协议、主域名、子域名、端口号中任意一个不相同时都不算同一个域，而在不同域之间请求数据即为跨域请求。解决方法有以下几种（如有错误欢迎指出）以请求图片url为例：
1.通过XMLHttpRequest对象实现（IE10以下不支持）
XMLHttpRequest2.0已经实现了对CORS的原生支持，只需要在访问资源的时候使用绝对URL即可，需要在服务器端将头信息“Access-Control-Origin"设为”*“或当前域名的地址：
html&javascript：
<button id="btn">load</button>
<div id="process"></div>
<div id="img"></div> <script>
var btn = document.getElementById('btn'),
pro = document.getElementById('process'),
pic = document.getElementById('img'); btn.onclick = function() { var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() { if(xhr.readyState == 4 && xhr.status == 200){
var img = document.createElement('img');
img.src = JSON.parse(xhr.responseText).src;
pic.appendChild(img);
}
}
xhr.open('GET','http://127.0.0.1:8085/AJAX/ajax/server.php',true);
xhr.send(null);
}
</script>
这个例子是在本地测试的，html文件所在的位置是localhost：8085下，虽然127.0.0.1也是指的localhost，但他们也不是同一个域，可以利用这两个地址来模拟跨域请求。
php：
<?php
header("Content-Type:text/plain");
header("Access-Control-Allow-Origin:http://localhost:8085");//设置头部，不设置的话请求会被拒绝
echo '{"src":"http://www.pinkbluecp.cn/face_alignment/img/picture.jpg"}';
?>
post请求也差不多：
btn.onclick = function() {
if(typeof XMLHttpRequest != 'undefined'){
var xhr = new XMLHttpRequest();
}else if(typeof ActiveXObject != 'undefined'){
var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}
xhr.onreadystatechange = function() {
console.log(1)
if(xhr.readyState == 4 && xhr.status == 200){
console.log(2)
pic.innerHTML = xhr.responseText;
}
}
xhr.open('POST','http://127.0.0.1:8085/AJAX/ajax/server.php',true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); //需要设置下头部
var str = 'active=login';
xhr.send(str);
php
<?php
header("Content-Type:text/plain");
header("Access-Control-Allow-Origin:http://localhost:8085"); if($_POST['active'] == 'login'){
echo 'success';
}else {
echo "error";
}
?>
发送数据需要设置一下头部的Content-Type字段。
2.IE（8-10）中实现CORS：
IE8中引入了XDomainRequest对象，该对象和XHR相似，但它能实现安全可靠的跨域通信，不过在IE11中已经无法使用了。
var btn = document.getElementById('btn'),
pro = document.getElementById('process'),
pic = document.getElementById('img');
btn.onclick = function() {
var xhr = new XDomainRequest();
xhr.onload = function() {
var img = document.createElement('img');
console.log(xhr.responseText)
// img.src = JSON.parse(xhr.responseText).src;
img.src = xhr.responseText;
console.log(img.src);
pic.appendChild(img);
};
xhr.onerror = function() { //XDR无法确定响应状态，需要添加onerror来检测错误
alert("Error!");
}
xhr.open('GET','http://127.0.0.1:8085/AJAX/ajax/server.php'); //该对象的的请求都是异步，没有第三个参数
xhr.send(null);
}
XDR与XHR不同之处在于：
a. cookie不会随请求发送，也不会随响应返回
b. 只能设置请求头中的Content-Type字段
c. 不能访问响应头部信息
d. 只支持GET和POST请求
两者的方法也略有不同，XDR的open方法只有异步一种状态，所以只要传两个参数method和url，在请求返回之后会触发load事件，但无法获取响应状态码，所以想判断请求是否成功只能添加error事件。它也可以和XHR一样添加超时。
关于XDR的post请求，虽然js高编上有介绍，但是在多次尝试后发现已经行不通了，高编上说XDR有专门的属性contentType来设置请求头信息，但在浏览其中会报错：
无法进行设置contentType的操做，后来查阅了一下这篇博客，貌似XDR已经无法在设置请求头了，详情可以去看原博。
3. 实现跨浏览器的CORS
js高编上有一段实现跨浏览器的CORS实现函数：
<button id="btn">load</button>
<div id="process"></div>
<div id="img"></div> <script>
var btn = document.getElementById('btn'),
pic = document.getElementById('img'); btn.onclick = function() {
console.log(1);
var xhr = createCORS('GET','http://127.0.0.1:8085/AJAX/ajax/server.php');
if(xhr){
console.log(2)
xhr.onload = function(){
console.log(3)
var img = document.createElement('img');
img.src = xhr.responseText;
pic.appendChild(img);
};
xhr.onerror = function() {
alert("Error");
};
xhr.send(null);
}
} function createCORS(method,url){ //参考js高编
console.log('fun')
var xhr = new XMLHttpRequest();
if('withCredentials' in xhr){ //检测是否含有凭据属性
xhr.open(method,url,true);
}else if(typeof XDomainRequest != 'undefined'){ //兼容ie
xhr = new XDomainRequest();
xhr.open(method,url);
}else {
xhr = null;
}
return xhr;
}
</script>
除了IE10-外所有浏览器都有withCredentials属性，所以可以根据这个属性来判断是否支持XMLHttpRequest2.0.
4.图片Ping
图片Ping就是利用图片的src可以使用跨域资源的特性来实现，但是只能实现简单的单向请求，在img的src中传入一个其他域的url并附带一些参数。
5.JSONP
JSONP和图片Ping很相似，也是利用script标签中的链接不受同源限制可以向不同域传递信息，但它传递的是一个已经存在的回调函数，服务器接收到后，将响应数据传入该回调函数并执行该函数从而达到获取数据的目的。
先来看下<script>标签中传入src得到的是什么：
<script src="test.txt"></script>
在src中传入一个文本文件
浏览器中报语法错误，hello world这个变量未定义，服务器响应的数据就时test.txt的内容，而script把这段纯文本当作js代码来解析，当在test.txt中将这段文字加上单引号后：
浏览器不报错了，因为把它当作字符串来解析了。现在把链接换成一个php文件：
php
<?php
echo "Hello World!";
?>
结果一样，浏览器同样也会报错，加上引号后同样也不报错，如果这时服务器端返回的是一个函数名，而该页面正好又有一个同名函数会怎样：
php：
<?php
echo "callback('hello world')";
?>
html
<body>
<script>
function callback(res){
alert(res);
}
</script>
<script src="jsonp.php"></script>
</body>
结果：
callback函数被执行了，因为后台的响应数据被script标签当作js代码执行了，所以这就能理解jsonp的原理了，利用这个回调函数可以获得后台传来的数据：
html：
<body>
<script>
function jsonp(res){
for(var i in res){
console.log("key:"+i+";value:"+res[i]);
}
}
</script>
<script src="jsonp.php?callback=jsonp"></script> //可动态创建
</body>
php：
<?php
$str = '{"name":"Lee","age":20}';
$callback = $_GET['callback'];
echo $callback."($str)";
?>
上面一个简单的例子展示了jsonp如何用回调函数获取服务器响应的json数据：
JSONP的有点在于可以访问到服务器的响应文本，不过缺点就是要从其他域加载代码执行，必须要保证其他域的安全性，不然可能响应信息中会附带恶意脚本，还有一点就是无法确定请求是否失败，即使失败也不会有提示。
6.iframe跨域
iframe跨域与jsonp相似，也利用了src不受同源限制的特性。当A域下的x.html页面要访问B域下的y.html中的信息可以通过A域下的z.html页面作为代理来获取信息：
x.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head> <body>
<iframe src="http://127.0.0.1:8085/AJAX/ajax/proxya.html" style="display: none"></iframe>
<p id="getText"></p>
<script>
function callback(text){
text = JSON.parse(decodeURI(text));
document.getElementById("getText").innerHTML= '姓名：' + text.name + '; 年龄：' + text.age;
}
</script>
</body>
</html>
y.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head> <body>
<iframe id="myfarme" src="###"></iframe>
<script>
window.onload = function(){
var text = '{"name":"cheng","age":22}'; //存储一个json格式的数据
document.getElementById('myfarme').src="http://localhost:8085/AJAX/ajax/proxyb.html?content="+encodeURI(text); //将数据传个代理页面处理，此时src中的地址不受同源限制，与jsonp相似
}
</script>
</body>
</html>
z.html:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
<script>
window.onload = function(){
var text = window.location.href.split('=')[1]; //通过分解url获取y.html传来的参数
top.callback(text); //调用x.html的callback函数
}
</script>
</head> <body>
</body>
</html>