JS post跨域及js类定义及使用

  //类的构建定义，主要职责就是新建XMLHttpRequest对象  
    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 源下的脚本才可以进行访问。

好了，上面我们就完成了一个简单的跨域请求，怎么样？感觉还是不错的吧。下面我们进行一个“预检”请求。