cors跨域资源共享的原理和简单应用

一.

CORS：CORS（Cross-Origin Resourse Sharing）,跨源资源共享，是一份浏览器技术的规范，提供了Web服务从不同网域传来沙盒脚本的方法，以避开浏览器的同源策略，是JSONP模式的现代版。

二.

CORS的原理：

 CORS定义一种跨域访问的机制，可以让AJAX实现跨域访问。CORS 允许一个域上的网络应用向另一个域提交跨域 AJAX 请求。实现此功能非常简单，只需由服务器发送一个响应标头即可，利用自定义的HTTP头部让浏览器与服务器进行沟通。例如：当服务器端是php作为后台语言时，添加header(“Access-Control-Allow-Origin:*”)：可以理解为，权限-控制-允许-来源：全部，服务器A（a.com）在响应头中加上Access-Control-Allow-Origin:*，其他客户端就能向服务器A发送跨域请求。在这里，加上响应头的是需要被跨域访问的资源本身，而不是发送跨域请求的主体——文档。

三.实例：

var xmlobj;     function createXMLHttpRequest(){    if(window.ActiveXObject){               xmlobj=new ActiveXObject("Microsoft.XMLHTTP");    }    else if(window.XMLHttpRequest){        xmlobj=new XMLHttpRequest();    }   }var btnobj=document.getElementById("btn");    btnobj.addEventListener("click",checkform,false);    function checkform(){        var usernameobj=document.getElementById('username').value;    var usernumobj=document.getElementById('usernum').value;    var data=http://xiyin001.blog.51cto.com/9831864/{username:usernameobj,usernum:usernumobj};    var jsonobj=JSON.stringify(data);//将对象转换为JSON串，通过ajax进行传递        var cb = ajaxResultdeal;    url='http://127.0.0.1/ajax/json/test3.php?data='http://xiyin001.blog.51cto.com/9831864/+jsonobj+"&r="+Math.random();         toAjax(url,cb);  }function toAjax(url,callback){        createXMLHttpRequest();             xmlobj.onreadystatechange=function(){   if(xmlobj.readyState==4&&xmlobj.status==200){     callback(xmlobj.responseText);    }   }             xmlobj.open("GET",url,true);                xmlobj.send(null);}

function ajaxResultdeal(response){
var tips=document.getElementById(‘tips’);
var json=JSON.parse(response);
if(json[‘username’]==”11”){
tips.innerHTML=”

你输入的名字是：”+json[‘username’]+”

“;
}
else{
tips.innerHTML=”

你输入的有误

“;

  }            

}
服务器端，php页面代码入下：