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作了一个基础讲解，以后的跨与问题等等咱们将会统一的在后面的跨域问题总纲之中进行学习总结，望共同窗习共同进步，拜拜