var MyXMLHttpRequest=function(){
var xmlhttprequest;
if(window.XMLHttpRequest){
xmlhttprequest=new XMLHttpRequest();
if(xmlhttprequest.overrideMimeType){
xmlhttprequest.overrideMimeType("text/xml");
}
}else if(window.ActiveXObject){
var activeName=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for(var i=0;i<activeName.length;i++){
try{
xmlhttprequest=new ActiveXObject(activeName[i]);
break;
}catch(e){
}
}
}
if(xmlhttprequest == undefined || xmlhttprequest == null){
alert("XMLHttpRequest对象创建失败!!");
}else{
this.xmlhttp=xmlhttprequest;
}
//用户发送请求的方法
MyXMLHttpRequest.prototype.send=function(method,url,data,callback,failback){
if(this.xmlhttp!=undefined && this.xmlhttp!=null){
method=method.toUpperCase();
if(method!="GET" && method!="POST"){
alert("HTTP的请求方法必须为GET或POST!!!");
return;
}
if(url==null || url==undefined){
alert("HTTP的请求地址必须设置!");
return ;
}
var tempxmlhttp=this.xmlhttp;
this.xmlhttp.onreadystatechange=function(){
if(tempxmlhttp.readyState==4){
if(tempxmlhttp.status==200){
var responseText=tempxmlhttp.responseText;
var responseXML=tempxmlhttp.reponseXML;
if(callback==undefined || callback==null){
alert("没有设置处理数据正确返回的方法");
alert("返回的数据:" + responseText);
}else{
callback(responseText,responseXML);
}
}else{
if(failback==undefined ||failback==null){
alert("没有设置处理数据返回失败的处理方法!");
alert("HTTP的响应码:" + tempxmlhttp.status + ",响应码的文本信息:" + tempxmlhttp.statusText);
}else{
failback(tempxmlhttp.status,tempxmlhttp.statusText);
}
}
}
}
//解决缓存的转换
if(url.indexOf("?")>=0){
url=url + "&t=" + (new Date()).valueOf();
}else{
url=url+"?+="+(new Date()).valueOf();
}
//解决跨域的问题
if(url.indexOf("http://")>=0){
url.replace("?","&");
url="Proxy?url=" +url;
}
this.xmlhttp.open(method,url,true);
//如果是POST方式,需要设置请求头
if(method=="POST"){
// this.xmlhttp.setRequestHeader("Content-type","multipart/form-data");
// this.xmlhttp.setRequestHeader("Accept","text/html,application/xhtml+xml,application/xml;q=0.9,image/webp");
// this.xmlhttp.setRequestHeader("Origin","http://192.168.1.8");
// this.xmlhttp.setRequestHeader("Access-Control-Allow-Origin", "http://119.28.24.177:9696");
}
this.xmlhttp.send(data);
}else{
alert("XMLHttpRequest对象创建失败,无法发送数据!");
}
MyXMLHttpRequest.prototype.abort=function(){
this.xmlhttp.abort();
}
}
}
js类使用:
var url = "http://www.baidu.com";
var formData = new FormData($("#pay_form")[0]);
var my = new MyXMLHttpRequest();
my.send('post',url,formData,function(data){
alert(data);
},function(data){
alert(data);
});
post跨域:
在服务器端设置response响应头: Access-Control-Allow-Origin
需要特别注意的是:在请求信息中,浏览器使用 Origin 这个 HTTP 头来标识该请求来自于 http://www.meng_xian_hui.com:801;在返回的响应信息中,使用 Access-Control-Allow-Origin 头来控制哪些域名的脚本可以访问该资源。如果设置 Access-Control-Allow-Origin:*,则允许所有域名的脚本访问该资源。如果有多个,则只需要使用逗号分隔开即可。
注意:在服务器端,Access-Control-Allow-Origin 响应头 http://www.meng_xian_hui.com:801 中的端口信息不能省略。
有人可能会想:自己发送请求头会如何呢?比如 xhr.setRequestHeader("Origin","http://www.meng_xian_hui.com:801"); 实践证明,自己设置 Origin 头是不行的。
是不是现在就可以采用 XMLHttpRequest 来请求任意一个网站的数据呢?还是不行的。允许哪些域名可以访问,还需要服务器来设置 Access-Control-Allow-Origin 头来进行授权,具体的代码是:
Response.AddHeader("Access-Control-Allow-Origin", "http://www.meng_xian_hui.com:801");
这行代码就告诉浏览器,只有来自 http://www.meng_xian_hui.com:801 源下的脚本才可以进行访问。
好了,上面我们就完成了一个简单的跨域请求,怎么样?感觉还是不错的吧。下面我们进行一个“预检”请求。