原生JS ajax与jquery ajax

原生JS ajax

是一个原生js的一个网络请求，通过创建XMLHttpRequest的实例来发送请求
### 发送请求的步骤

1.创建一个XMLHttpRequest的实例对象

var request = new XMLHttpRequest();

2.配置请求方式，设置请求接口地址

配置参数

如果有参数，那么需要设置参数

open 打开连接

request.open(method,url,boolean)
参数 ：
	method :取值 get/post
	url: 取值为请求的地址， 注意跨域请求会报错
	boolean ： true默认值，代表异步请求，false：代表同步请求，用同步请求会阻塞，像alter一样（一般不建议更改，默认为true）

3.设置请求头 requestHeader()

在请求中有参数的话需要设置，请求都可以设置多个

setRequestHeader

格式：request.setRequestHeader(‘Content-type’, '数据格式');
	数据格式参数的选项有如下

• 常用的数据格式(编码可带可不带)

发送json格式数据

request.setRequestHeader('Content-type', 'application/json; charset=utf-8');

发送表单数据

request.setRequestHeader('Content-type', 'application/x-www-form-urlencoded; charset=utf-8');

发送纯文本(不指定Content-type时，此是默认值)

request.setRequestHeader('Content-type', 'text/plain; charset=utf-8');

发送html文本

request.setRequestHeader('Content-type', 'text/html; charset=utf-8');

4.发送请求

request.send();//调用send()之后,请求就会发送到服务器
请求发送后，会在控制台获得响应的数据，但在前端看不见，如果是post请求，那么参数写在括号里，注意转换数据格式，数据格式跟以上设置的请求头格式应该要一样。

获取响应的注册事件

发送请求后，会收到响应，收到响应后，XHR对象的以下属性会被填充上数据。

• responseText：作为响应体返回的文本。

• responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的 XML DOM 文档。

• status：响应的 HTTP 状态。一般200 为成功

• statusText：响应的 HTTP 状态描述。

• readyState：返回HTTP请求状态
  0 open()尚未调用 UNSENT
  1 open()已调用 OPENED
  2 接收到头信息 HEADERS_RECEIVED
  3 接收到响应主体 LOADING
  4 响应完成 DONE

• readystatechange 请求状态改变事件
  当readyState值改变为4或服务器的响应完成时，所有的浏览器都触发该事件

5.获取响应返回的数据

	request.onreadystatechange = function () {
      if (request.readyState === 4 && request.status === 200) {
        // console.log(request.responseText);
        // 转换为JSON对象
        console.log(JSON.parse(request.responseText));
      }
    }

get有参请求 三种方式

1.url拼接字符串

2.参数序列化

2.1创建参数对象

var params = {参数：值，参数：值 }

2.2参数序列化

	2.21 导入qs ----一个序列化工具
			 <script src="./qs.js"></script>
	2.22 序列化 Qs.stringify(params)
	2.23 拼接到url地址 'url?'+ Qs.stringify(params)

post 有参请求

基本操作与get有参请求一样，但参数不拼接到地址栏里，但是在send前根据接口需求需要设置请求头，即：
 request.setRequestHeader('Content-type','application/json;charset=utf-8');
request.send(JSON.stringify(params))

原版案例

下面是一个完整的post有参请求案例

 function saveOrUpdate () {
        // 1.创建一个实例对象
        var xhr = new XMLHttpRequest();
        // 设置参数
        var obj = {
          name: '123'
        };

        // 打开连接
        xhr.open('post', '请求的地址')
        // 设置请求头
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencode')
        //一个登录的验证的请求头，没有额可以忽略，sessionStorage.getItem为在session里面获得该值
        xhr.setRequestHeader('Authorization', sessionStorage.getItem('token'))

        // 发送请求
        xhr.send(Qs.stringify(obj))
        // 接受响应
        xhr.onreadystatechange = function () {
          if (xhr.readyState === 4 && xhr.status == 200) {
            console.log(xhr.responseText);//拿到是的是一个json格式

          }
        }
      }

jquery ajax

在jquery中，做了一个原生ajax的封装$.ajax({})的格式
请求步骤与原生的相似，只是书写上有不同
下面附一个jquery的post请求

 // 登录：点击登录获取token并存储起来，并配置到Ajax的全局对象中
      $(".login").click(function () {
        // 设置参数
        var obj = {
          username: 'admin1',
          password: '123321'
        }
        $.ajax({
          // 请求路径
          url:  '/user/login',
          // 请求方式
          method: 'post',
          // 请求头
          headers: {
            'Content-Type': 'application/json'
          },
          // 要携带的参数
          data: JSON.stringify(obj),
          success (res) {
            // 请求成功的操作 res 为请求回来的数据
            console.log(res);
            // 存储token
            sessionStorage.setItem('token', res.data.token)
            // 全局配置每个都需要请求携带的token
            $.ajaxSetup({
              headers: {
                'Authorization': sessionStorage.getItem('token')
              }
            })
          },
          error (err) {
            // 请求失败的操作放这里，err为请求的错误代码
          }
        })
      })