node.js Ajax向服务器发送请求

<script>
        // 1.创建ajax对象
        let xhr = new XMLHttpRequest();
        // 2.发送请求的位置和方式
        xhr.open('get','http://localhost:3000/first');
        // 3.send发送请求
        xhr.send();
        // 4.获取服务器响应到客户端的数据
        xhr.onload  = ()=>{
            console.log(xhr.responseText);

        }
    </script>

ajax状态码

3已经接收到服务端的部分数据

4服务端的响应数据已经接收完成

<script>
        let xhr = new XMLHttpRequest();
        console.log(xhr.readyState)
        xhr.open('get','http://localhost:3000/readystate')
        console.log(xhr.readyState)
        // 事件监听（状态码）
        xhr.onreadystatechange = ()=>{
            console.log(xhr.readyState);
            if(xhr.readyState == 4){
                console.log(xhr.responseText)
            }
        }
        xhr.send();
       
    </script>

onload和onreadystatechange

1.onload只被调用一次，不兼容低版本ie

2.onreadystatechange调用多次

建议使用onload

错误处理http状态码 xhr.status

<script>
        let btn = document.getElementById('btn');
        btn.onclick = ()=>{
            let xhr = new XMLHttpRequest();
            xhr.open('get','http://localhost:3000/error');
            xhr.send();
            xhr.onload = ()=>{
                console.log(xhr.responseText,xhr.status)
                if(xhr.status == 411){
                    alert('error')
                }
            }
            xhr.onerror = ()=>{
                alert('网络中断！');
            }
        }
    </script>

Ajax状态码：表示Ajax请求的过程状态 ajax对象返回的

Http状态码：表示请求的处理结果 是服务端返回的

低版本ie缓存问题

Ajax封装

1、基本简单封装

<script>
        function ajax(options){
            // 1.创建
            let xhr = new XMLHttpRequest();
            // 2.配置ajax对象
            xhr.open(options.type,options.url);
            // 3.发送请求
            xhr.send();
            // 监听xhr对象下面的onload事件
            xhr.onload = ()=>{
                options.success(xhr.responseText);
            }
        }
        ajax({
            type:'get',
            url:'http://localhost:3000/first',
            success:(data)=>{
                console.log('this is '+ data)
            }
        });
    </script>

2.补充

<script>
        function ajax(options){
            // 1.创建
            let xhr = new XMLHttpRequest();
            // 拼接请求参数的变量
            let params = '';
            // 循环用户传递进来的对象格式参数
            for(let attr in options.data){
                // 参数转换为字符串格式 
                params += attr + '=' + options.data[attr] +'&';
            }
            // 将参数最后面的&截取掉
            params = params.substr(0,params.length - 1);
            // 判断请求方式
            if(options.type == 'get'){
                options.url = options.url + '?' + params;
            }
            console.log(params);
            // 2.配置ajax对象
            xhr.open(options.type,options.url);
            // 如果请求方式为post
            if(options.type == 'post'){
                // 用户希望的向服务器传递的请求参数的类型
                let contentType = options.header['Content-Type'];
                // 设置请求参数格式的类型 
                xhr.setRequestHeader('Content-type',contentType);
                // application/x-www-form-urlencoded是get式的字符拼接 
                // application/json 是json格式的
                if(contentType == 'application/json'){
                    xhr.send(JSON.stringify(options.data));//json转换为json字符串
                }else{
                    xhr.send(params);
                }

            }else{
                // 3.发送请求
                xhr.send();
            }
            // 监听xhr对象下面的onload事件
            xhr.onload = ()=>{
                options.success(xhr.responseText);
            }
        }
        ajax({
            type:'post',
            url:'http://localhost:3000/first',
            data: {
                name:'lf',
                age:20
            },
            header:{
                'Content-Type':'application/json'
            },
            success:(data)=>{
                console.log('this is '+ data)
            }
        });

    </script>

完结撒花（完整封装）

<script>
        // 请求服务器返回客户端的数据是字符串的json数据，所以把json数据转换为json对象

        function ajax(options){
            // 存储的是默认值
            let defaults = {
                type:'get',
                url:'',
                data:{},
                header:{
                'Content-Type':'application/json'
                },
                success:()=>{},
                error:()=>{}
            };
            // 使用options里面的属性覆盖defaults里面的属性
            Object.assign(defaults,options);
            // 1.创建
            let xhr = new XMLHttpRequest();
            // 拼接请求参数的变量
            let params = '';
            // 循环用户传递进来的对象格式参数
            for(let attr in defaults.data){
                // 参数转换为字符串格式 
                params += attr + '=' + defaults.data[attr] +'&';
            }
            // 将参数最后面的&截取掉
            params = params.substr(0,params.length - 1);
            // 判断请求方式
            if(defaults.type == 'get'){
                defaults.url = defaults.url + '?' + params;
            }
            // console.log(params);
            // 2.配置ajax对象
            xhr.open(defaults.type,defaults.url);
            // 如果请求方式为post
            if(defaults.type == 'post'){
                // 用户希望的向服务器传递的请求参数的类型
                let contentType = defaults.header['Content-Type'];
                // 设置请求参数格式的类型 
                xhr.setRequestHeader('Content-type',contentType);
                // application/x-www-form-urlencoded是get式的字符拼接 
                // application/json 是json格式的
                if(contentType == 'application/json'){
                    xhr.send(JSON.stringify(defaults.data));//json转换为json字符串
                }else{
                    xhr.send(params);
                }

            }else{
                // 3.发送请求
                xhr.send();
            }
            // 监听xhr对象下面的onload事件
            xhr.onload = ()=>{
                // 获取响应头中的数据
                let contentType = xhr.getResponseHeader('Content-Type');
                // 服务器端返回的数据
                let responseText = xhr.responseText;
                // 如果响应类型包含application/json
                if(contentType.includes('application/json')){
                    responseText = JSON.parse(responseText)
                }
                if(xhr.status == 200){
                    defaults.success(responseText,xhr);
                }else{
                    defaults.error(responseText,xhr);
                }
                
            }
        }
        ajax({
            url:'http://localhost:3000/responseData',
            data: {
                name:'lf',
                age:20
            },
            success:(data,xhr)=>{
                // console.log('this is '+ data)
                console.log(data)
            }
        });

    </script>