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 源下的脚本才可以进行访问。

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