原生ajax调用,JavaScript进阶之原生AJAX接口请求的方式

简单介绍接口调用的方式

原生ajax 指的是 XMLHttpRequest(XHR)

基于jQuery的ajax是 jQuery对原生ajax的进一步封装

fetch则是通过而是es6 JavaScript Promisess设计的Ajax的替代品但是它不是对原本Ajax的封装 ，它本来就是原生而且比Ajax更加简化

axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端，本质上也是对原生Ajax的封装，只不过它是Promise的实现版本(Vue中常用它)

下面我们先了解原生Ajax的一些知识

简述JavaScript执行方式

我们都知道JavaScript的执行环境是「单线程」，所谓单线程，是指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务 ，这个任务可称为主线程 。

简述异步(Asynchronous [eskrns])

而所谓的异步(Asynchronous)指某段程序执行时不会阻塞其它程序执行，其表现形式为程序的执行顺序不依赖程序本身的书写顺序，相反则为同步。

其优势在于不阻塞程序的执行，从而提升整体执行效率。

区别：

同步：同一时刻只能做一件事，上一步完成才能开始下一步

异步：同时做多件事，效率更高

什么是AJAX

AJAX(即 Asynchronous Javascript And XML)AJAX 不是一门的新的语言，而是对现有持术的综合利用。

简单来说AJAX是基于web标签的xhtml+css ，可以使用dom进行动态的显示和交互 ，使用XML和XSLT(是一种用于将XML文档转换任意文本的描述语言) 进行数据的交换和操作 ，并使用XMLHttpRequest进行异步的数据查询和检索等操作……

AJAX的本质：能在HTTP协议的基础上以异步的方式通过XMLHttpRequest对象与服务器进行通信。

AJAX的作用：可以在页面不刷新的情况下，请求服务器，局部更新页面的数据。

XMLHttpRequest

浏览器内建对象，用于在后台与服务器通信(交换数据) ，由此我们便可实现对网页的部分更新，而不是刷新整个页面。

简单post异步请求对象

由于服务器做出响应需要时间(比如网速慢等原因)，所以我们需要监听服务器响应的状态，然后才能进行处理。onreadystatechange 是 Javascript 的事件的一种，其意义在于监听 XMLHttpRequest 的状态

简单get请求

状态在200说明请求成功

AJAX API解析

1.xhr.open() 发起请求，可以是get、post方式

2.xhr.timeout：

a) 设置超时 xhr.timeout

b) 监听超时事件 xhr.ontimeout = function () {// code}

当请求超时，此事件就会被触发

3.xhr.setRequestHeader() 设置请求头

4.xhr.send() 发送请求主体get方式使用xhr.send(null)

5.xhr.status表示响应码，如200

6.xhr.statusText表示响应信息，如OK

7.xhr.getAllResponseHeaders() 获取全部响应头信息

8.xhr.getResponseHeader('key') 获取指定头信息

9.xhr.responseText、xhr.responseXML都表示响应主体

10.xhr.onreadystatechange = function () {} 监听响应状态

readstate 属性有五个状态：

xhr.readyState = 0时，(未初始化)还没有调用send()方法xhr.readyState = 1时，(载入)已调用send()方法，正在发送请求xhr.readyState = 2时，(载入完成)send()方法执行完成，已经接收到全部响应内容xhr.readyState = 3时，(交互)正在解析响应内容xhr.readyState = 4时，(完成)响应内容解析完成，可以在客户端调用了注GET和POST请求方式的差异

1、GET没有请求主体，使用xhr.send(null)

2、GET可以通过在请求URL上添加请求参数(get请求如果有参数就需要在url后面拼接参数)

3、POST可以通过xhr.send('name=itcast&age=10')(post如果有参数，就在请求体中传递)

4、POST如果有参数需要设置请求头[ xhr.setRequestHeader("") ]

5、GET传递数据有大小限制一般约4K，POST则没有限制(可修改)

如何简单封装原生AJAX方法

AJAX方法

举报/反馈