xhr的send方法以及node如何处理get和post数据

起因：看了阮一峰老师的关于上传文件的文章，进行测试，在使用xhr对象的send方法时遇到问题。

遇到的问题是使用send方法传送过去的数据，在node后台无法接收，经过很多次测试，怀疑是不是send与node不兼容导致。

所以使用了jq的ajax方法进行测试，

$("#sub").click(function(){
        $.ajax({
            url:"/upload",
            data:"foo=123",
            type:"POST"
        })
    })

发现post过去的数据可以使用req.body接收。

因为jq的ajax方法的原生便是xhr对象，所以基本排除send方法与node不兼容的说法。

之后查阅资料发现，原来使用send方法时，如果是get请求则直接写open和send即可，

但是假设是post方法传数据给后台，则需要加

xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");

否则post过去的数据无法被正常接收。

 

补充：如果使用get方法，基本用法应该如下：

 var xhr=new XMLHttpRequest();
 xhr.open("GET","upload?username=qiangzi&password=123";
 xhr.send(null);

其中的url可以拼接字符串从而达到传参。

后台的node接收get数据如下：

var url=require("url");
var querystring=require("querystring");

exports.upload=function(req,res){

    var body=req.url;
    //得到的是一段字符串
    //  /?username=qiangzi&password=123

    var urlObj=url.parse(body);
    //把url解析成为对象
    //Url {
    //    protocol: null,
    //    slashes: null,
    //    auth: null,
    //    host: null,
    //    port: null,
    //    hostname: null,
    //    hash: null,
    //    search: '?username=qiangzi&password=123',
    //    query: 'username=qiangzi&password=123',
    //    pathname: '/',
    //    path: '/?username=qiangzi&password=123',
    //    href: '/?username=qiangzi&password=123' }
    
    var queryStr=urlObj.query;
    //获得传值部分

    //由于传的值是字符串，所以想办法变成对象，此处使用的是node自带的querystring方法，需引入
    var queryObj = querystring.parse(queryStr);
    //切割成对象之后我们就可以获取我们想要的部分.

　　console.log(queryObj)

　　//{ username: 'qiangzi', password: '123' }

};

 

post方法：

var xhr=new XMLHttpRequest();
xhr.open("POST","upload");
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded;charset=UTF-8");
xhr.send("user=qiangzi");

后台接收post数据：

exports.upload=function(req,res){
    console.log(req.body)
　　//{ user: 'qiangzi' }
};