理解ajax技术，封装原生 ajax请求

一、Ajax 概述

• Ajax 是 Asynchronous Javascript And XML 的简写

• Ajax是一门技术，并不是一门语言

  • 使用XHTML+CSS来标准化呈现
  • 使用XML和XSLT进行数据交换及相关操作
  • 使用XMLHttpRequest对象与Web服务器进行异步数据通信
  • 使用Javascript操作Document Object Model进行动态显示及交互
  • 使用JavaScript绑定和处理所有数据

• 优点：

  • 页面局部刷新：减少用户等待时间，提高用户体验
  • 与服务器异步通信：不需要打断用户的操作，具有更迅速的响应能力
  • 按需获取数据，节约带宽

• 缺点：

  • 破坏了浏览器的后退机制（ajax局部刷新页面，浏览器后退按钮不可点）；解决方案：HTML5 直接操作浏览历史
  • 不利于搜索引擎优化；解决方案：（待更新）
  • **安全问题：**Ajax技术就如同对企业数据建立了一个直接通道，这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑

• 核心：

  • **组成：**JavaScript、XMLHTTPRequest、DOM对象
  • 通过XMLHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用JavaScript来操作DOM而更新页面

• 工作原理：

  • 相当于在用户和服务器之间加了一个中间层(ajax引擎)，异步请求数据（使用户操作 与 服务器响应异步化）

  • 并不是所有的用户请求都提交给服务器，像一些数据验证（比如判断用户是否输入了数据）和数据处理（比如判断用户输入数据是否是数字）等都交给Ajax引擎自己来做, 只有确定需要从服务器读取新数据时再由Ajax引擎代为向服务器提交请求

• 对比：

  • 传统的JS获取数据：用户每触发一个 Http 请求，都需要空闲等待响应，服务器会返回一个完整的 HTML 页面，每一次数据交互，都是一个新的页面；即使是一次很小的交互，用户也需要等待服务器响应 及 完整的 HTML 页面；缺点：浪费带宽、应用的响应时间依赖于服务器的响应时间

  • Ajax 突出之处：*Ajax 在 Http 协议的基础上，以异步的方式与服务器进行通信*；可简单理解为：向服务器请求数据，不用刷新页面（页面局部更新），这样极大的提升了 整体执行效率 及 用户体验

二、Ajax 的核心对象

1. XMLHtttpRequest对象 是Ajax技术 的核心

• Javascript通过XMLHttpRequest对象直接与服务器进行交互（ 请求数据，获取数据 ）

• XMLHtttpRequest对象，简称xhr对象，是Ajax技术 的核心，即 Ajax技术的引擎

• XMLHtttpRequest对象 作为浏览器的内置对象，来实现发送、接收 HTTP请求 与 响应信息

2. xhr对象 的属性

readyState：返回 请求的状态（数字格式）

• 值有 5种，如下：

responseText：返回 响应体（字符串格式）

• 此属性表示：到目前为止接收到的响应体（不含头部）
• 若没有接收到数据，则返回空字符串
• readyState 值小于3时，这个属性的值肯定是空字符串
• readyState 值为3时，这是属性的值 可能是整个响应体，也可能是部分响应体

responseXML：返回的响应体（xml格式）

• 此属性表示：到目前为止接收到的响应体（不含头部）

status：由服务器返回的 HTTP 状态码（数字格式）

• 当 readyState 小于 3 的时候读取这一属性会导致一个异常

• 常见状态码如下：

  • 200：请求成功
  • 404：没有发现文件、查询或url
  • 400~499：客户端问题
  • 500 ：服务端问题

statusText：由服务器返回的 HTTP 状态（详细描述）

3. xhr对象 的方法

open( ) 初始化HTTP请求，但不发送请求

• 语法： open(method, url, async, username, password)

  • method 请求方式： GET、POST 、HEAD

  • url 请求地址：同源策略

  • async 是否异步请求：默认值为 true（可选参数）；如果这个参数是 false，请求是同步的，后续对 send() 的调用将阻塞，直到响应完全接收

  • username 、password：为 url 所需的授权提供认证资格（可选，一般不写）

• 作用：

  • 把 readyState 设置为 1

  • 保存供send()方法使用的请求参数，重置 XMLHttpRequest 对象，以便复用

    • 删除之前的请求头、接收到的响应头

    • 将响应体、响应状态码设为默认值

send( ) 发送 HTTP 请求（会打开一个Web 服务器的网络连接）

• 语法： send(body)

  • body 请求体：get请求时 body 为 null；post请求时 body 为 请求体（一个字符串 或 对象），参数 body 应该由 以下几部分组成：
    
    • 之前调用 open( ) 时指定的 HTTP 方法、url 以及认证资格（如果有的话）
    • 之前调用 setRequestHeader( ) 时指定的请求头部（如果有的话）
    • 传递给这个方法的 body 参数

• 作用：

  • 把 readyState 设置成2，并 打开一个 Web 服务器的网络连接

  • 接受部分响应后，send() 或 后台线程 把 readyState 设置为 3

  • 接受全部响应后，send() 或 后台线程 把 readyState 设置为 4

• 特殊情况：

  • 如果 readyState 不是1（也就是没调用 open( ) 方法），会抛出异常

  • 如果 open() 参数 async 为 false，send( ) 方法会阻塞 并不会返回，直到 readyState 为 4 并且服务器的响应被完全接收才返回

setRequestHeader() 设置请求头

• 语法： setRequestHeader(name, value)

  • name 头部的名称：这个参数不应该包括空白、冒号或换行

  • value 头部的值：这个参数不应该包括换行

• 约束：此方法设置请求头信息，必须在 调用 open( ) 之后 且 调用 send( ) 之前

• 请求头中包含：

  • Host
  • Connection
  • Keep-Alive
  • Accept-charset
  • Accept-Encoding
  • If-Modified-Since
  • If-None-Match
  • If-Range
  • Range

getResponseHeader() 获取指定请求头

• 语法： getResponseHeader(name)

getAllResponseHeaders(); 获取所有请求头

• 语法： getAllResponseHeaders( )

4. xhr对象 的事件

onreadystatechange readyState 改变时 会触发 此事件

三、封装一个原生的 Ajax

<script>
// 举例1：jquery 的 ajax 请求如下
$.ajax({
url: 'http://118.31.238.237:8080/metro/get',
//请求地址
type: 'GET',
//请求方式
data: {cityId:2},
//请求参数
dataType: 'json',
success: (response) => {
console.log(response)
}
});
// 举例2：封装的 原生ajax 请求如下
function ajaxMy(options) {
let {
url,
type,
data,
dataType,
success,
fail,
} = options;
// 处理参数
type = type.toUpperCase();
dataType = dataType ? dataType : 'json';
let xhr = null;
// 1. 创建 xhr 对象
if (window.XMLHttpRequest) {
xhr = new XMLHttpRequest();
} else { //IE6及其以下版本浏览器
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
// 2. 初始化 并 发送请求
if (type === 'GET') {
// 处理 get 方式的 请求参数
let requestParams = '?';
for (let [key, value] of Object.entries(data)) {
requestParams += `${key}=${value}&`;
}
requestParams = requestParams.slice(0, -1);
xhr.open('GET', url + requestParams);
xhr.send(null);
} else if (type === 'POST') {
// 将请求数据 放到 请求主体中，并没有发送
xhr.open("POST", options.url, true);
//设置表单提交时的内容类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 发送请求
xhr.send(data);
}
// 3. 监听
xhr.onreadystatechange = () => {
if (xhr.readyState ===4) {
if (xhr.status >= 200 && xhr.status < 300) {
success && success(JSON.parse(xhr.responseText));
} else {
fail && fail(xhr.status)
}
}
}
}
ajaxMy({
url: 'http://118.31.238.237:8080/metro/get',
type: 'GET',
data: {cityId:2},
dataType: 'json',
success: (response) => {
console.log(response)
}
});
</script>

最后

以上就是爱听歌香水为你收集整理的理解ajax技术，封装原生 ajax请求的全部内容，希望文章能够帮你解决理解ajax技术，封装原生 ajax请求所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。