Ajax的post和get请求

Ajax的post和get请求

get无参数的请求

  document.querySelector('button').onclick=function(){
            //1.创建XMLHTTP对象
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function(){
                console.log(xhr.status,xhr.readyState);
                if(xhr.readyState==2){
                    document.write('正在加载。。。。。。');
                }else if(xhr.readyState==4){
                    document.write('收到服务器数据。。。。。');
                }
            };
            //2.打开链接
            xhr.open('GET',"http://localhost:4000");
            //3.发送信息
            xhr.send(null);
            //4.监听状态改变
            // xhr.onreadystatechange=function(){
            //     if(xhr.readyState==2){
            //         document.write('正在加载。。。。。。');
            //     }else if(xhr.readyState==4){
            //         document.write('收到服务器数据。。。。。');
            //     }
            // };
        };

get携带参数的请求

var oName=document.querySelector('#txtName');
        var oPwd=document.querySelector('#txtPwd');
        document.querySelector('button').onclick=function(){
            //
            let url="http://localhost:5000";
            let newURL=`${url}?username=${oName.value}&pwd=${oPwd.value}`;
            let xhr=new XMLHttpRequest();
            xhr.open('GET',newURL);
            xhr.send(null);
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    //读取服务器数据  
                    //responseText
                    console.log(xhr.responseText);
                    // console.log(xhr.responseXML);
                }
            };

            
        };

主要需要在原有地址上拼接上参数

post无参数的请求

    
        document.querySelector('button').onclick=function(){
            let xhr=new XMLHttpRequest();
            xhr.open('POST','http://localhost:5000');
            xhr.send(null);
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    console.log(xhr.responseText);
                }
            };
        }

post携带参数的请求

 var oName=document.querySelector('#txtName');
                var oPwd=document.querySelector('#txtPwd');
                document.querySelector('button').onclick=function(){
                    //
                    let url="http://localhost:5000/login";
                    //请求参数
                    let parm=`username=${oName.value}&pwd=${oPwd.value}`;
                    // let parm="username=jack";
                    let xhr=new XMLHttpRequest();
                  
                    // xhr.open('POST',url,false);//同步
                    xhr.open('POST',url,true);//异步
                    // xhr.onreadystatechange=function(){
                    //     if(xhr.readyState==4){
                    //         console.log(xhr.responseText);
                    //     }
                    // };
                    //添加头
                    //注意：使用ajax发送带有参数的post请求，需要加header
                    xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');                                       
                    // xhr.send(null);
                    xhr.send(parm);
                    xhr.onreadystatechange=function(){
                        if(xhr.readyState==4){
                            // console.log(xhr.responseText,typeof xhr.responseText);
                            let obj=JSON.parse(xhr.responseText);
                            console.log(obj,obj.name,obj.age);   
                        }
                    };

                    console.log('end');
                            
                };

使用ajax发送带有参数的post请求，需要加header！

xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');                                       
                    // xhr.send(null);

封装Ajax方法

实现从客户端请求服务器
@parm method POST GET
@url 服务器地址
@parms 请求参数
@fn 回调函数

function ajax(method,url,parms){
   return new Promise(function(resolve,reject){
        var xhr=new XMLHttpRequest();
        method=method.toUpperCase();//转换为大写
        //GET并且有参数
        if(method==="GET"&&parms!=undefined){
            // xhr.open(method,url,true);
            url=url+"?"+parms;
        }
        xhr.open(method,url,true);
        if(method=="POST" && parms!=undefined){
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
            xhr.send(parms);
        }else{
            xhr.send(null);
        }
    
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4 && xhr.status ==200){
                // console.log(xhr.responseText);
                // fn(xhr.responseText);
                resolve(xhr.responseText);
            }
        };
    });

利用promise封装

function getdata(method, url, parms) {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        if (method === "get" && parms !== undefined) {
            url = `${url}?${parms}`;
        }
        xhr.open(method, url, true);
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                resolve(xhr.responseText);
            }
        };
        if (method === 'get') {
            xhr.send(null);
        } else {
            xhr.send(parms);
        }
    }).then(data => {
        console.log(data);
    }).catch(err => {
        console.log("错误信息为："+err);
    });
}

发起网络请求

post请求不完整

  let url='http://localhost:5000/login';
        let data="username=tom&pwd=123456";

        //get  无参

        // ajax("GET",url);

        //get 有参数
        // ajax('GET',url,data);

        //post  无参
        // ajax('POST',url);

        //post 有参数
        // ajax('POST',url,function(res){
        //     // console.log(res);
        //     var person=JSON.parse(res);
        //     document.querySelector('#box').innerHTML=`姓名：${person.name},年龄：${person.age}`;
        // },data);


        ajax('POST',url,data).then(function(data){
            console.log(data);
        });


        /*
            fetch(url).then()
            fetch(url,{
                method:"POST",
                body:{},
                headers:{},                
            });

            //实现封装
        */