几种网络请求方式

Ajax的特点

注意：在看jQuery的时候，需要先搞明白美元符号在jQuery中的作用

Ajax的优点

（1）可以无刷新页面与服务器端进行通信。

（2）允许你根据用户时间来更新部分页面内容

Ajax的缺点

（1）没有浏览历史

（2）存在跨域问题

（3）对SEO（搜索引擎优化）不友好：网页中的内容，爬虫是爬不到的

HTTP

请求报文

格式和参数

行：Get / URL路径 协议版本 状态码
头：
空行
体：路径？后面的参数信息

响应报文

格式和参数

行：版本号 状态码 原因（作为数字状态码的补充，是更详细的解释文字）
头：
空行
体：页面的源码

GET请求

const xhr = new XMLHttpRequest();
xhr.open('GET','http://localhost:8080/');						//设置请求的行
xhr.setRequestHeader('Content-Type',"application/json");		//设置请求头
xhr.send();		//发送请求
//事件绑定
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status >= 200 && xhr.status < 300){
            result.innerHTML = xhr.response;
        }
    }
}

POST请求

const xhr = new XMLHttpRequest();
xhr.open('POST','http://localhost:8080/');					//设置请求的行
xhr.setRequestHeader('Content-Type',"application/json");	//设置请求头
xhr.send("");	//设置请求参数
//事件绑定
xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        if(xhr.status >= 200 && xhr.status < 300){
            result.innerHTML = xhr.response;
        }
    }
}

GET、POST请求使用小结

以上两种请求，见过的用法有：

①放在回调函数中

②作为DOM的绑定事件

服务器端响应

服务器端对Ajax响应的数据格式：

①普通字符串

②JSON

③XML数据

JQuery发送Ajax请求

GET请求

$('#userName').click()
{
    $.get(
        'http://localhost:8080',
        {			//请求带有的参数
            a: 100,
            b: 200,
        },
        function (data) {			//得到响应之后的回调函数
            console.log(data)
        },
        "json"      //设置响应体类型，在服务器端也要杜应进行设置为一致
    );
}

POST请求

$('#userName').click()
{
    $.post(
        'http://localhost:8080',
        {			//请求带有的参数
            a: 100,
            b: 200,
        },
        function (data) {		//得到响应之后的回调函数
            console.log(data)
        },
        "json"      //设置响应体类型，在服务器端也要杜应进行设置为一致
    );
}

JQuery通用请求方法

$.ajax({

    url: "http://localhost:8080",	//url

    data: {a: 100, b: 200},			//参数

    type: 'GET',			//请求类型，也可以是'POST'
    dataType: 'json',				//响应体结果
    success: function (data) {		    //成功的回调
        console.log(data);
    },
    timeout: 2000,				    //超时时间
    error: function () {		    //失败的回调
        console.log('c出错啦！！');
    },
    headers: {			    //头信息
        /*请求头*/
    }
})

Axios发送Ajax请求请求

Axios 是一个基于 Promise（ES6中用于处理异步的）的 HTTP 库

下面的写法与，jQuery的$作用一样，都是，直接执行了该请求，所以一般，我们常放在函数中，以便需要请求的时候在请求

axios(config)

//请求方法的别名
axios.request(config)
axios.get(url[, config])
axios.delete(url[, config])
axios.head(url[, config])
axios.post(url[, data[, config]])
axios.put(url[, data[, config]])
axios.patch(url[, data[, config]])

其中config可以根据需求进行配置（配置大全）：

axios请求成功和失败，分别会执行then，catch，详见下例：

axios.get("http://localhost:8080", {
                //携带的参数
                params: {
                    id: 100,
                    vip: 7
                },
                //请求头信息
                headers: {
                    Accept: "text/html,image/apng"      //代表客户端希望接受的数据类型是html或者是png图片类型
                }
            }
        ).then(response => {							
            //成功返回，如果请求成功，就会执行then函数，且将请求得到的响应，作为参数，传给then中的函数的参数使用
            console.log(response);
        }).catch(error => {
            //失败返回，如果请求失败，就会执行then函数，且将失败信息，作为参数，传给catch中的函数的参数使用
            console.log(error);
        })

上面的写法与，jQuery的$作用一样，都是，直接执行了该请求，所以一般，我们常放在函数中，以便需要请求的时候在请求

在Vue中，通常Promise和Axios一块使用

案例：

new Promise((resolve, reject) => {
      axios({	//在Promise的内部可以执行一个axios的一个网络请求，然后根据axios的执行结果，选择执行resolve和reject函数
            url: url
            method: 'post',
            data: {
            }
          }).then((res) => {
              resolve(res.data);	//请求成功，执行resolve
              // console.log(res);
          }).catch(function (error) {
              reject(error);		//请求失败，执行reject
              // console.log(error);
          });
    }).then(data => {
    	console.log("执行成功，请求结果为：" + data);
	}).catch(err => {
    	console.log("执行失败，失败信息为：" + err);
	});