学习AJAX必知必会~Ajax基本使用，设置请求行请求体请求头，服务端响应JSON数据

Posted 2022-01-22 一乐乐

一、Ajax的基本使用

1、发送ajax请求（4个步骤）：

• 创建xhr对象，然后open方法初始化，设置请求方式和请求路径，接着send方法发送请求，从而接收服务端响应回来的数据（通过绑定事件onreadystatechange）

//Ajax发送get请求

//1、创建XmlHttpRequset对象
const xhr = new XMLHttpRequest();
//2、通过xhr对象的open方法进行初始化，设置请求方式get和请求url,请求参数（第一个参数使用?,其余使用&）
xhr.open(\'get\', \'http://127.0.0.1:8000/server?a=1&b=2\');
//3、发送Ajax请求
xhr.send();
//4、事件绑定，处理服务端返回结果
xhr.onreadystatechange = function () 
    //处理前判断服务端是否返回所有结果和服务端的状态码是2**
    if(xhr.readyState === 4)
        if(xhr.status >= 200 && xhr.status < 300)
            //处理结果（响应行、响应头、空行、响应体）
            // //1、响应行
            // console.log(xhr.status);//状态码
            // console.log(xhr.statusText);//状态字符串,若成功响应式为OK
            // console.log(xhr.getAllResponseHeaders());//所有响应头
            // console.log(xhr.response);//所有响应体
            //将响应内容显示到dom视图
            result.innerHTML = xhr.response;
        
    

■ onreadystatechange (on 意思是：当...的时候；readystate：是XmlHttpRequset对象的状态属性,有五个值，分别是0、1、2、3、4 )

0 未初始化
1 open方法调用完毕
2 send方法调用完毕
3 服务端返回部分结果
4 服务端返回所有结果

//Ajax发送post请求(跟get请求不同的地方：open方法第一个参数是post，然后请求参数（请求体）是设置为send方法的参数)

//1、创建XmlHttpRequset对象
const xhr = new XMLHttpRequest();
//2、通过xhr对象的open方法进行初始化，设置请求方式post和请求url
xhr.open(\'post\', \'http://127.0.0.1:8000/server\');
//3、发送Ajax请求(设置请求参数)
xhr.send(\'a=1&b=2\');
//4、事件绑定，处理服务端返回结果
xhr.onreadystatechange = function () 
    //处理前判断服务端是否返回所有结果和服务端的状态码是2**
    if(xhr.readyState === 4)
        if(xhr.status >= 200 && xhr.status < 300)
            //处理结果（响应行、响应头、空行、响应体）
            // //1、响应行
            // console.log(xhr.status);//状态码
            // console.log(xhr.statusText);//状态字符串,若成功响应式为OK
            // console.log(xhr.getAllResponseHeaders());//所有响应头
            // console.log(xhr.response);//所有响应体
            //将响应内容显示到dom视图
            result.innerHTML = xhr.response;
        
    

2、设置请求头（在xhr的send方法之前进行设置）

• 通过xhr.setRequestHeader方法

  //设置请求头
  //属性：Content-Type：设置请求体的类型
  xhr.setRequestHeader(\'Content-Type\',\'application/x-www-form-urlencoded\');
  //也可以自定义请求头,但是需要服务端设置允许，
  // 例如服务端的代码中添加响应头的设置：response.setHeader(\'Access-Control-Allow-Headers\', \'*\');
  //自定义请求头
  xhr.setRequestHeader(\'custom\', \'111\');

✿ 总结一下：在Ajax请求中设置请求行、请求体、请求头

（1）请求行的请求方式、请求路径设置在xhr对象的open方法的第一个参数、第二个参数上

（2）请求体(请求参数-要传输的数据): 请求方式是get时，请求参数拼接在请求路径url上，请求方式是post时，请求参数设置为send方法的参数。

（3）请求头在send方法之前进行设置，通过xhr.setRequsetHeader(\'请求头名\', \'请求头值\')方法进行设置

3、服务端响应Json数据

■ 服务端代码server.js 文件：

• 通过JSON.stringify(json对象)； 将json对象转化成字符串，然后再响应给客户端-

//3、创建路由规则
//请求方式设置为all,可以接收http任意类型的请求
app.all(\'/server\', (request, response) => 
    //设置响应头(允许跨域)
    response.setHeader(\'Access-Control-Allow-Origin\', \'*\');
    //设置响应头（允许自动自定义请求头）
    response.setHeader(\'Access-Control-Allow-Headers\', \'*\');

     //响应一个json数据（因为send方法的参数类型是字符串，所以需要先对json数据进行转化）
    const data = 
        name: \'小明\',
        age: 18,
        sex: \'男\'
    ;
    //data 数据类型转化（通过JSON.stringify()方法进行转化）,
    // 接收的时候通过设置响应体数据格式为json即可,也可以通过JSON.parse(xhr.response) 将数据类型转为json对象
    let str = JSON.stringify(data);

    //设置响应体
    response.send(str);
);

■ 发送ajax请求.html 文件：

• 客户端的html代码中设置xhr响应数据格式为Json； xhr.responseType = \'json\';

<script>
    //获取按钮
    const btn = document.getElementsByTagName(\'button\')[0];
    const result = document.getElementById(\'result\');
    btn.onclick = function () 
        // console.log(\'test\');
        //接下来发送ajax请求（4个步骤）
        //1、创建XmlHttpRequset对象
        const xhr = new XMLHttpRequest();

        //设置响应的数据格式为json
        xhr.responseType = \'json\';

        //2、通过xhr对象的open方法进行初始化，设置请求方法和请求url，请求参数（第一个参数使用?,其余使用&）
        xhr.open(\'get\', \'http://127.0.0.1:8000/server\');
        //设置请求头
        //属性：Content-Type：设置请求体的类型
        xhr.setRequestHeader(\'Content-Type\',\'application/x-www-form-urlencoded\');
        //也可以自定义请求头,但是需要服务端设置允许，
        // 例如服务端的代码中添加响应头的设置：response.setHeader(\'Access-Control-Allow-Headers\', \'*\');
        //自定义请求头
        xhr.setRequestHeader(\'custom\', \'111\');

        //3、发送Ajax请求
        xhr.send();
        //4、事件绑定，处理服务端返回结果
        xhr.onreadystatechange = function () 
            //处理前判断服务端是否返回所有结果和服务端的状态码是2**
            if (xhr.readyState === 4) 
                if (xhr.status >= 200 && xhr.status < 300) 
                    //处理结果（响应行、响应头、空行、响应体）
                    // //1、响应行
                    // console.log(xhr.status);//状态码
                    // console.log(xhr.statusText);//状态字符串,若成功响应式为OK
                    // console.log(xhr.getAllResponseHeaders());//所有响应头
                    // console.log(xhr.response);//所有响应体
                    //将响应内容显示到dom视图
                    // result.innerHTML = xhr.response;
                    console.log(xhr.response);
                

            
        
    

</script>