文档章节

初探原生AJAX

SeanWangx
 SeanWangx
发布于 2017/08/18 16:13
字数 1169
阅读 6
收藏 1

前言

工具用的多了,就不想亲手实际操作了,封装完备如jquery的$.ajax(),或者现在前端框架中常用的axios库,使用起来确实很方便,但是今天我还是想要就原生Ajax的实现花一点时间来写一下。

工作过程

使用Ajax主要遵循下列几个步骤:

  1. 创建XMLHttpRequest对象
  2. 定义响应函数
  3. 发起请求
  4. 状态响应触发目标函数

接下来针对各步骤一一进行说明。

创建XMLHttpRequest对象

XHR对象是Ajax的基础,除了IE部分版本外,目前所有现代浏览器均已支持XMLHttpRequest对象。

比较常规的创建XHR对象的语法:

var xhr = new XMLHttpRequest()

而对于老版本IE(IE5和IE6),我们可以这样创建:

var xhr =new ActiveXObject('Msxml2.XMLHTTP.3.0')

这部分有兴趣的可以查看About Native XMLHTTP

所以,考虑兼容性地创建XHR对象的写法可以是这样的:

function createXHR () {
  if (typeof XMLHttpRequest != 'undefined') {
    return new XMLHttpRequest()
  } else if (typeof ActiveXObject != 'undefined') {
    try { return new ActiveXObject('Msxml2.XMLHTTP.6.0') } catch (e) {}
    try { return new ActiveXObject('Msxml2.XMLHTTP.3.0') } catch (e) {}
    try { return new ActiveXObject('Msxml2.XMLHTTP') } catch (e) {}
    return null
  } else {
    return null
  }
}

现在通过函数createXHR我们可以获得一个XHR对象或者为null。

响应函数

在发送请求之后我们会期望执行我们自定义的响应函数,所以这部分内容可以在发送前进行定义。

let xhr = createXHR()
if (xhr) {
  xhr.onreadystatechange = function() {
    if (this.readyState === 4 && this.status === 200) {
      // code here with response
      document.getElementById("demo").innerHTML = this.responseText
    }
  }
}

值得注意的是我们的响应处理一般是会在readState为4且status为200的条件下,所以这里有几个点需要另外说明一下。

readyState

readyState中存有XMLHttpRequest的状态,从0到4发生变化。

  • 0(未初始化):请求未初始化,指还未调用如send方法
  • 1(载入):服务器连接已建立,指已调用send方法正在发送请求
  • 2(载入完成):请求已接收,且已接收全部响应内容
  • 3(交互):正在解析响应内容
  • 4(完成):响应内容解析完成,响应内容已就绪等待客户端调用

status

这里的status可以理解为http状态码,较为常见的如200、404都会在这里显示。附带说一下http状态码的大体分类:

  • 2XX:请求成功
  • 3XX:重定向
  • 4XX:客户端错误
  • 5XX:服务器错误

其实常用的无非那么几个,这里提供的只是一个大致分类帮助记忆。

发送请求

使用XHR对象发送请求的时候调用的是open和send方法。

open

open方法会接受几个参数用于保证请求的顺利。

xhr.open(method, url, async, user, password)

调用格式如上,这里我来说明一下各个参数的意义:

  • method:请求所使用的HTTP方法,例如GET、POST、PUT、DELETE等,如果下一个参数是非HTTP(S)的URL,则忽略该参数
  • url:请求所要访问的URL
  • async:首先这是一个可选的布尔值,默认为true,该参数表示是否执行异步操作。
  • user:用户名
  • password:密码

setRequestHeader

有的时候,请求的顺利发送需要设置一些需要的heaer,这时候可以调用setRequestHeader,就像比较常用的这样:

xhr.setRequest('Content-Type', 'application/x-www-form-urlencoded')

send

send方法通常会配合open方法,比如open中async设置为true,则send()会立即返回;如果async为false,则send()方法不会返回任何东西,知道接收到了服务器的返回数据。send()方法也能传入一些参数作为请求需要的参数,具体可参考这里。需要特别注意的是,所有的配置项需要在send()调用之前全部设置好,否则不会生效。

响应

服务器端的响应数据一般以responseText和responseXML来存取,所代表的从字面也能看出来——字符串形式的响应数据和XML形式的响应数据。至于响应后会发生什么,就看在onreadystatechange中是如何设置的了。

总结

想在实际开发中使用原生Ajax实现通信会很困难,原因有很多方面,我总结下来有以下三点:

  1. 兼容性问题,主要针对于万恶的IE
  2. 配置繁琐,比如setRequestHeader的使用
  3. 响应处理不够一般化

其实,说白了就是使用原生Ajax就毫无API可言,什么都需要自己去配置,不过知道基本的原理对于学习如axios之类的库还是会有帮助的。

原文地址初探原生AJAX

© 著作权归作者所有

SeanWangx
粉丝 2
博文 2
码字总数 2317
作品 0
私信 提问
JSON对象 javscript对象 解析JSON 序列化JSON

在ajax交互的时候我们只需要拿到数据(主要是JSON)去渲染处理逻辑就可以,不需要对JSON有详细的了解,但是有时候后台接口开发没有完成,需要写伪代码的时候我们可以自己手动造一些假数据,这样...

张超群的web之路
2016/10/30
28
0
构建 Web 应用之 Service Worker 初探

这次体验一种新的博客风格,我们长话短说,针针见“血”。 备马 在深入 Service Worker 之前,我们需要快速回顾如下基础。 诞生之初,JavaScript 是单线程的。 进程有私有的虚拟地址空间、代...

韩亦乐
2017/09/26
0
0
Python3基础之学习笔记(十五)-Ajax-文件上传-图片验证码

1. Django 1.1 Ajax 1.1.1 Ajax简介 AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,...

GoldenKitten
01/17
0
0
jquerymobile移动门户开发初探

地址:http://jquerymobile.com/ 使用后体会:常用的移动前端框架,学习成本较低,基本满足移动开发的需求,但若需要细粒度的前端开发需要另设计改造。框架可能比较大,在2G网络难以有较好的...

dsmsnow
2013/03/13
288
0
AJAX和from-上传文件示例【django项目】

项目简述 本Django项目为测试实例项目,用于学习测试。 分别用三种Django文件上传方式(form方式、jQuery+jQuery.ajax方式、原生JS+原生ajax方式)做上传功能示例 文件 文件释义 form_upload....

ZHAO_JH
2018/12/05
74
0

没有更多内容

加载失败,请刷新页面

加载更多

计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
6
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
7
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
6
0
【技术分享】TestFlight测试的流程文档

上架基本需求资料 1、苹果开发者账号(如还没账号先申请-苹果开发者账号申请教程) 2、开发好的APP 通过本篇教程,可以学习到ios证书申请和打包ipa上传到appstoreconnect.apple.com进行TestF...

qtb999
昨天
10
0
再见 Spring Boot 1.X,Spring Boot 2.X 走向舞台中心

2019年8月6日,Spring 官方在其博客宣布,Spring Boot 1.x 停止维护,Spring Boot 1.x 生命周期正式结束。 其实早在2018年7月30号,Spring 官方就已经在博客进行过预告,Spring Boot 1.X 将维...

Java技术剑
昨天
18
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部