Ajax与JSON详细讲解，Ajax传递JSON数据与Ajax接受JSON数据

Ajax与JSON是密不可分的，因为目前我们大部分Ajax请求都采用JSON来完成前后端之间的数据交互。

Ajax传递JSON数据

用一个原生的JavaScript来写一个Ajax，来讲述怎么提交JSON参数到后端，首先提交JSON数据，后端要以JSON方式接收，另外前端要采用POST提交方式，下面来直接看代码。

Ajax原生的JavaScript写法分为六步：

1.创建Ajax request对象
2.绑定监听回调函数
3.打开一个Ajax请求
4.设置请求头（setRequestHeader），具体要设置什么请求头，这个看业务需要。
5.发送请求。
6.接受请求。

具体代码直接看下面：

//1.创建ajax request对象
var request = new XMLHttpRequest();
//2.绑定监听回调函数
request.onreadystatechange = function(){
    //判断返回状态是否正常
    if(request.readyState ===4 &&request.status === 200){
        //6.接收数据
        var res = request.responseText;
        //输出数据
        console.log('返回值',res);
    }else{
        //错误
        console.log('error');
    }
};

/**
 * 3.打开请求
 * 第一个参数为请求方式，常用可选为 GET/POST，还有DELETE、UPDATE、OPTIONS等
 * 第二个参数为请求的链接，可以是相对路径和绝对路径。
 * 第三个参数设置请求为同步还是异步，true为异步，false为同步
 */
request.open("POST","https://cdn.sojson.com/file/demo-json.json",true);
/**
 * 4. setRequestHeader 方法可以设置请求头，这个看业务需要，这里设置为表单提交
 */
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
/**
 * 5.发送请求
 *
 * GET请求方式：request.send();
 *
 * POST请求方式：可以传参，可以是字符型的JSON或者 ？和 &方式如下：
 * request.send("name=Alice&age=23");
 * //这个方式如果后端接受不到参数，请把请求头改成 "Content-type","application/json"
 *
 *
 *
 */
//发送JSON数据
request.send('{"name":"Alice","age":23}');

我们从浏览器的请求信息里，可以看到提交参数，如下图：

JSON提交返回参数

Ajax接受JSON数据

Ajax接受JSON数据，是表示被请求方返回为JSON数据，前端需要接收数据，并且解析数据。

Ajax 步骤还是和上面一样，还是6个步骤，我们直接看代码。

//1.创建ajax request对象
var request = new XMLHttpRequest();
//2.绑定监听回调函数
request.onreadystatechange = function(){
    //判断返回状态是否正常
    if(request.readyState ===4 &&request.status === 200){
        //6.接收数据
        var res = request.responseText;
        //输出数据
        console.log('返回值',res);

        /**
         * 如果返回来的参数是JSON，就可以直接转换。
         */
        var json = JSON.parse(res);
        console.log('返回值-转换JSON对象',json);
        console.log('demo:',json.demo);
        console.log('Name:',json.Name);
        console.log('Birthday:',json.Birthday);
        console.log('Birthday:',json.Birthday);
        console.log('Birthplace:',json.Birthplace);
        console.log('Info:',json.Info);

    }else{
        console.log('error');
    }
};

/**
 * 3.打开请求
 * 第一个参数为请求方式，常用可选为 GET/POST，还有DELETE、UPDATE、OPTIONS等
 * 第二个参数为请求的链接，可以是相对路径和绝对路径。
 * 第三个参数设置请求为同步还是异步，true为异步，false为同步
 *
 * 备注：GET请求，直接把参数以 ？和 & 来传参，如 url+  ?name=Alice&age=23
 */
request.open("GET","https://cdn.sojson.com/file/demo-json.json",true);
/**
 * 4. setRequestHeader 方法可以设置请求头，这个看业务需要，这里设置为表单提交
 */
request.setRequestHeader("Content-type","application/x-www-form-urlencoded");
/**
 * 5.发送请求
 *
 * GET请求方式：request.send();
 *
 * POST请求方式：可以传参，可以是字符型的JSON或者 ？和 &方式如下：
 * request.send("name=Alice&age=23");
 * //这个方式如果后端接受不到参数，请把请求头改成 "Content-type","application/json"
 * request.send('{"name":"Alice","age":23}');
 *
 *
 */
request.send();

我们从浏览器控制台（console)看到输出的内容：

JSON参数输出