向服务器发送请求的四种方法Ajax，Fetch，Axios，JQurey中的（$.ajax）

Ajax发送请求

• get请求

  		//创建XMLHttpRequest
      　　let xhr = new XMLHttpRequest();
          //监听响应
      　　xhr.onreadystatechange = function () {
      　　　　if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
      　　　　　　console.log(xhr.responseText);
      　　　　}
      　　};
		//建立链接
      　　xhr.open("GET","你要访问的url地址",true);
      　　结束连接
      　　xhr.send();

• post请求

         //请求参数、url、创建XMLHttpRequest
      　　let data = 'name=tom&age=18',
      　　　　url = '你的链接地址',
      　　　　xhr = new XMLHttpRequest();

      　　xhr.open('post', url);
          //设置header
      　　xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
      　　xhr.send(data);
      　　xhr.onreadystatechange = function () {
      　　　　if (xhr.readyState === 4 && ( xhr.status === 200 || xhr.status === 304 )){
      　　　　　　console.log(xhr.responseText);
      　　　　}
      　　}

• 用函数封装的思想实现配置发送请求

/*
    实现从客户端请求服务器
    @parm  method    POST  GET
    @url  服务器地址
    @parms  请求参数
    @fn     回调函数
    接收一个对象，带参数。
*/
function ajax(obj){
    var xhr=new XMLHttpRequest();
    obj.method=obj.method.toUpperCase();//转换为大写
    //GET并且有参数
    if(obj.method==="GET"&& obj.parms){//如果没有值，就是undefined，所以为false
        // xhr.open(method,url,true);
        obj.url=obj.url+"?"+obj.parms;
        obj.parms=null;//这样就可以最后send data即可
    }
    xhr.open(obj.method,obj.url);
    if(obj.method=="POST" && obj.parms){
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); 
        
    }

    xhr.onreadystatechange=function(){
        if(xhr.readyState==4 && xhr.status ==200){
            // console.log(xhr.responseText);
            obj.fn(xhr.responseText);
        }
    };
    xhr.send(obj.parms);
}

Fetch发送请求

• GET请求

 //发送请求，获取是否有账号
        var url = 'http://localhost:8888'
        fetch(`${url}/log?name=${name}&pwd=${pwd}`)
        .then(
            data => {
            return data.json()
        })
        .then(
            res=>{
                console.log(res);
            }
        )

• post发送请求

 fetch(`${url}/reg`, {
            method: "POST",
            body: objs,//这是要发送到数据库的数据
            headers: {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        }).then(data => {
            return data.json()
        }).then(
            res => {
                console.log(res.mes);
            }
        )

Axios发送请求

• 使用之前需要先安装
  • npm install axios
• 或者使用远程链接

• get请求

axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

• post 请求

axios.post('/user', {
    firstName: 'Fred',
    lastName: 'Flintstone'
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

• 用配置的方式发送请求

axios({
  method: 'post',
  url: '/user/12345',
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

JQuery中的发送请求

  $.ajax({
                    url:"https://sp0.baidu.com/9_Q4sjW91Qh3otqbppnN2DJv/pae/channel/data/asyncqury?cb=?",
                    type:"get",//请求方式
                    data:{c :$company,nu:$value,appid:4001},//请求参数
                    dataType:"json",//是用json 还是jsonp还是别的请求
                    success:function(msg){
                        // 清空历史消息
                        $("#show").empty();

                        // 获取接口返回的数据
                        console.log(msg);
                        var $info = msg.data.info.context;

                        // 循环遍历数据
                        for(var i = 0; i <$info.length;i++){
                            // 获取每一笔的时间信息
                            var $time = $info[i].time;
                            $time = getTimeStr($time);

                            // 获取每一笔的快递信息
                            var $desc = $info[i].desc;

                            // 创建标签，添加到页面中
                            var $msg = $("
").text($time + ":" + $desc);
                            var $i = $("");

                            var $kd = $("
");
                            $kd.append($i).append($msg);
                            // 添加到页面中
                            $("#show").append($kd);
                        } 


                    },
                    error:function(){
                        console.log("系统繁忙，查询失败");
                    }
                });
            });

跨域的解决办法

1. 使用JsonP ，实际的原理为在页面添加script 中src属性实现跨域。请求链接中要有callback，才能拿到数据。而且这种智能发送get请求，。

2. 使用代理服务器 ，也叫作反向代理；
   废话不多说直接上代码
   客户端代码

    var src = 'http://cache.video.iqiyi.com/jp/avlist/202861101/1/'
         fetch(`http://localhost:9000/?src=${src}`)
        .then(
            data => {
            return data.json()
        })
        .then(
            res=>{
                console.log(res);
            }
        )

自己服务器代码

 //向第三方服务器发起请求
                getInfoFromServer(data => {
                   
                    console.log(data);
                    res.send(data);
                });

                // res.end('接收到响应了')

            })
            //向第三方服务器发起请求
            function getInfoFromServer(fn) {
                let msg = ""; //保存数据
                http.get(rep.query.src, res => {
                    //接收数据
                    res.on('data', chuck => {
                        msg += chuck;
                    });
                    res.on('end', () => {
                        // console.log(msg);
                        fn(msg);
                    }).on('error',(err)=>{
                        console.log(err);
                        
                    });
                });
            }
            app.listen(9000, err => {
                if (!err) {
                    console.log("服务器启动成功");

                }
            })