Ajax 是什么? 如何创建一个 Ajax

一、ajax是什么

ajax是2005年2月，第一次正式提出的，它是Asynchronous javascript and xml的缩写，指的是通过
javascript的异步通信，从服务器获取xml文档从中提取数据，再进行更新网页的对应部分，而不用刷新整个网页。

二、创建ajax的步骤如下

1、创建一个XMLHttpRequest对象，也就是创建一个异步调用对象。
2、创建一个新的HTTP请求，并指定该http请求的方法，url以及验证信息。
3、设置http请求状态变化的函数。
4、发送http请求
5、获取异步调用返回的数据。
6、使用javascript和dom实现局部刷新

三、一般实现

const baseUrl = "xxxx"
//创建xhr对象
var xhr = new XMLHttpRequest()
//创建http请求
xhr.open("GET", baseUrl, true)  
//设置状态监听函数
xhr.onreadystatechange = function() {
	if(xhr.readyState !== 4) return
	//当请求成功时
	if(xhr.status >= 200 && xhr.status <300) {
		//处理相应
		handle(xhr.response)
	}else {
        console.error(this.statusText);
	}
}
//监听错误的函数
xhr.onerror = function(){
   console.error(this.statusText);
}
//设置请求头信息
xhr.responseType = "json"
xhr.setRequestHander("Accept", "aplication/json")
//发送http请求
xhr.send(null)

四、promise简单封装

    function getData(url) {
      return new Promise((resolve, reject) => {
        var xhr = new XMLHttpRequest()
        xhr.open("GET", url, true)
        xhr.onreadystatechange = function() {
          if(xhr.readyState !== 4) return
          if(xhr.status >=200 && xhr.status < 300) {
            resolve(xhr.response)
          }else {
            reject(xhr.statusText)
          }
        }
        xhr.onerror = function() {
          reject(xhr.statusText)
        }
        xhr.responseType = "json"
        xhr.setRequestHeader("Accept", "application/json")
        xhr.send()
      })
    }