Ajax请求

前端程序开发之中我们常常需要使用到ajax请求。本文内容我们将会详细的学习我们的ajax请求的内容。争取可以理解的透透的，让它成为我们开发之中的利器。我们这里所有的实例都是以IE9以上的（包括IE9）版本为基础的，IE9以下的版本就不再多做阐述。

简介

为什么会有ajax呢，ajax的全名是 Asynchronous Javascript And XML And HTML 。意思是异步的js，xml和html。再ajax的技术没有出现之前呢，我们的网页在请求后端的数据之后只能全页面刷新，这就表示全页面需要重新加载，这样将会消耗我们很大量的资源，并且页面的展示效果十分的不好。ajax就是为了处理之一问题而来，其是一种用于快速的创建动态页面的技术，无需重新加载整个页面只是对页面上的部分内容进行动态的更新。这样将会大大的减少我们的资源消耗，和用户的等待时长。

从上面这段话我们可以了解到：

1. ajax是异步的，在页面展示之后需要像后端请求新数据的时候运用到的。
2. ajax是部分网页内容更新的，无需全局刷新。
3. ajax是一种解决资源浪费的技术，而不是一门新的语言。

所以我们可以这样的去理接ajax。它是一种异步的算法，用于后台给出的新数据体缓原有数据展示到页面上的方式。它不是一种新的语言。所以ajax技术可以有一个流程如此： 请求后台数据 --> 数据筛选处理 --> dom进行页面内容的替换展示。

XMLHttpRequest

1. XMLHttpRequest：所有浏览器都提供的对象，主要是用于服务端的通信内容。

XMLHttpRequest是继承于XMLHttpRequestEventTarget的，而XMLHttpRequestEventTarget继承与EventTarget的，所以我们可以知道XMLHttpRequest是有自己的事件可以监听的。而且它不仅仅支持http，同时也支持ftp等请求协议的。

我们先来说一说他的属性吧：

• readyState：我们之后要常常接触到的一个属性，表示请求状态码，请求分为5种状态：

  

• response: 返回响应的正文部分，其类型主要是responseType进行控制的，在readyState状态是4之后可以进行内容的获取。

• responseType： 返回响应正文的类型，在请求对象调用open之后可以进行设置，设置好之后通过send发出，当设置了返回正文类型的时候，如果服务器给定的值不是这一类型的时候，response将会是null。还有就是各一个同步请求设置返回类型的时候会出现InvalidAccessError。我们来看一下可选类型吧：

  

• responseText：返回一个DOMString属性的值，如果response不是text或者""，那么将会报InvalidAccessError。

• responseUrl： 返回序列化的URL，如果URL有锚点，则#之后的内容会被删除。如果有重定向，responseURL的值是经过多次重定向之后的最终的URL。

• status：返回响应之中的数字状态码，就是那些个200，404等等。

• statusText：对应于status的说明。

• timeout：用于设置请求超时时长。单位是毫秒数。

• withCredentials：布尔类型，它指示了是否该使用类似cookies,authorization headers(头部授权)或者TLS客户端证书这一类资格证书来创建一个跨站点访问控制（cross-site Access-Control）请求。在同一个站点下使用withCredentials属性是无效的。此外，这个指示也会被用做响应中cookies 被忽视的标示。默认值是false。

接下来是方法一览：

• abort() : 终止该请求内容，其readyState将会被设置为0.
• getAllResponseHeaders() ： 返回所有的响应头。
• getResponseHeaders(name) ：传递的是标题头，返回相应的值。
• open(method, url, [async], [user], [password]) : 激活一个请求，如果激活之后再次调用，作用类似于abort。
• overrideMimeType() : 方法是指定一个MIME类型用于替代服务器指定的类型，使服务端响应信息中传输的数据按照该指定MIME类型处理。例如强制使流方式处理为"text/xml"类型处理时会被使用到，即使服务器在响应头中并没有这样指定。此方法必须在send方法之前调用方为有效。主要是用于设置Content-Type 的值啦。
• send(data) ：发送http请求，方法接受一个可选的参数，其作为请求主体；如果请求方法是 GET 或者 HEAD，则应将请求主体设置为 null。
• setRequest() : 是设置HTTP请求头部的方法。此方法必须在 open() 方法和 send() 之间调用。如果多次对同一个请求头赋值，只会生成一个合并了多个值的请求头。如果没有设置 Accept 属性，则此发送出send() 的值为此属性的默认值*/* 。

最后我们要来了解一下事件内容：

• onreadyStateChange：监听readyState改变事件，当readstate改变的时候会自动的调用。
• onabort：当终端当前请求的时候调用。
• onerror：当出现错误的时候调用。
• onload：当请求成功完成的时候调用。
• onloadStart：当请求开始的时候调用。
• onloadEnd：当请求不论什么状态结束都会调用。
• onProgress：当请求还有更多数据接受的时候调用。

说了这么多怎么可以没有一个完整的例子，代码伺候：

ajax: (method, URL) => {
    let request = new XMLHttpRequest();

    request.onreadystatechange = (e) => {
      if(request.readyState === request.UNSENT){
        console.log("还没有调用open方法");
      }
      else if(request.readyState === request.OPENED){
        request.timeout = 2000 //设置请求超时时长
        request.withCredentials = true //设置跨域授权
        request.overrideMimeType('text/plain') //设置MIME类型
        // request.setRequestHeader(header, value) 可以设置请求头的信息内容。
        request.responseType = "text"
      }
      else if(request.readyState === request.HEADERS_RECEIVED){
        console.log("已经获取了响应头部")
      }
      else if(request.readyState === request.LOADING){
        console.log("还在读取返回体内容")
      }
      else if(request.readyState === request.DONE){
        console.log(request.status)
        console.log(request.response)
        console.log(request.responseText)
        console.log(request.responseXML)
      }
    }

    request.onloadstart = (e) => {
      console.log("loadstart 触发了")
    }

    request.onload = (e) => {
      console.log(request.responseURL);
    }

    request.onloadend = (e) => {
      console.log("loadend 触发了")
    }

    request.onerror = (err) => {
      console.log(err);
    }

    request.onabort = (e) => {
      console.log('请求已经终止');
    }

    request.ontimeout = () => {
      console.log('请求已经超时了')
    }

    request.open(method, URL)
    request.send()
    return request;
}
复制代码

我们使用mock.js来模拟请求。

结束

本骈文站针对ajax做了一个基础讲解，之后的跨与问题等等我们将会统一的在后面的跨域问题总纲之中进行学习总结，望共同学习共同进步，拜拜