Ajax用一句话来说就是无须刷新页面即可从服务器取得数据。注意,虽然Ajax翻译过来叫异步JavaScriptXML,但是获得的数据不一定是XML数据,现在服务器端返回的都是JSON格式的文件。

完整的Ajax请求过程

完整的Ajax请求过程

  1. 创建XMLHttpRequest实例
  2. 发出HTTP请求
  3. 接收服务器传回的数据
  4. 更新网页数据

下面先看一个红宝书上给出的发起Ajax请求的例子,API的用法在后面章节给出。


var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest实例 xhr.onreadystatechange = function(){
if (xhr.readyState == 4){ // 判断请求响应过程阶段,4 阶段代表已接收到数据
if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) { // 校验HTTP状态码
console.log(xhr.responseText); // 输出响应的文本
} else {
console.error(xhr.status, xhr.statusText); // 打印其他HTTP状态码
}
}
}; xhr.open('get', 'example.txt', true); // 初始化xhr实例,或者说启动请求
xhr.send(null); // 设置HTTP请求携带参数,null为不带参数

Ajax请求过程详解

1. 创建XMLHttpRequest实例

从上面的的代码可以看出,创建一个XHR实例方式为:


var xhr = new XMLHttpRequest();

2. 发出HTTP请求

实例创建好后,首先需要启动一个HTTP请求,使用XHRopen()方法,open方法接受三个参数


XMLHttpRequest.open(method, url, isAsync)
// 例如
xhr.open('get', 'http://www.baidu.com', true)

第一个参数为http请求使用方法,如('get','post'等),第二是参数是请求的url, 第三个参数代表是否异步发送请求(可选)。调用open()方法后会启动一个http请求,但它不会立即发送请求,处于待命状态。需要注意的是:请求的url必须要跟请求源域(origin)同域,也就是说协议、域名、端口号要一致,跨域请求要使用别的方法。接着调用send()方法就会发出这个http请求。


xhr.open('get', 'http://www.baidu.com', true)
xhr.send(null)

send()方法接受一个参数,为http请求发送的数据(通常用于'post'方法),如果为null,表示不发送数据。至此,一个异步的http请求就发送到了服务器。

3. 接收服务器传回的数据

3.1 发送同步请求

如果将open方法的第三个参数设为false,即为同步请求,当收到服务器的响应后,相应的数据会自动填充到XHR对象的属性中,主要包括以下四个:

  • responseText:作为响应主体被返回的文本。
  • responseXML: 响应返回的XML文档,能接收到的前提是,响应的Content-Type字段的值为
    text/xml或者application/xml
  • status: HTTP状态码。
  • statusText: HTTP状态码说明。

当客户端收到以上信息后,首先要判断HTTP状态码来确认响应是否成功,状态码在200-300之间表示请求成功,同时304代表请求资源未被修改,可使用浏览器本地缓存。如果成功就可以获取响应报文主体中的数据了。


xhr.open('get', 'http://www.baidu.com', false)
xhr.send(null) if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) { // 校验HTTP状态码
console.log(xhr.responseText); // 输出响应的文本
} else {
console.error(xhr.status, xhr.statusText); // 打印其他HTTP状态码
}

3.2 发送异步请求

如果将open方法的第三个参数设为true,即为异步请求。那么就需要一个事件来通知程序异步请求的结果是否返回。XHR对象中的readyState属性,表示请求/响应整个过程所处的阶段,它有五个值分为对应五个阶段:

  • 0:未初始化。未调用open()方法。
  • 1:启动。已经调用open()方法,但未调用send()方法。
  • 2:发送。已调用send()方法,但未收到响应。
  • 3: 接收。已经接收到部分响应数据。
  • 4:完成。已经接受到全部响应数据。

readyState的值每变化一次,都会触发一次readStatechange事件,我们定义一个事件处理函数onreadStatechange(),并监听readyState == 4状态,就可以得知响应数据已全部收到,并进行下一步操作。那么就是文章开头给出的代码:


var xhr = new XMLHttpRequest(); // 创建XMLHttpRequest实例 xhr.onreadystatechange = function(){
if (xhr.readyState == 4){ // 判断请求响应过程阶段,4 阶段代表已接收到数据
if (xhr.status >=200 && xhr.status < 300 || xhr.status == 304) { // 校验HTTP状态码
console.log(xhr.responseText); // 输出响应的文本
} else {
console.error(xhr.status, xhr.statusText); // 打印其他HTTP状态码
}
}
}; xhr.open('get', 'example.txt', true); // 初始化xhr实例,或者说启动请求
xhr.send(null); // 设置HTTP请求携带参数,null为不带参数

补充XHR中三个有用的事件

timeout事件

当超出了设置时间还未收到响应,就会触发timeout事件,进而调用ontimeout事件处理程序。同时timeout也是XHR的一个属性,用于设置这个时间阈值。下面是用法:


xhr.ontimeout = function() {
alert('timeout!')
} xhr.open('get', 'http://www.baidu.com', true)
xhr.timeout = 1000 // 时间阈值设为1秒
xhr.send(null)

load事件

load事件用于简化对readState值的判断,响应数据全部接收完毕后(也就是readState == 4)会触发load事件,使用onload事件处理函数进行后续操作,onload会接收一个event对象,它的target属性等于XHR对象,当然我们在定义这个事件处理函数时也可以不传入这个参数,来看下面的用法:


var xhr = new XMLHttpRequest()
xhr.onload = function () {
if(xhr.status >=200 && xhr.status < 300 || xhr.status == 304) {
console.log(xhr.responseText); // 输出响应的文本
} else {
console.error(xhr.status, xhr.statusText); // 打印其他HTTP状态码
}
}
xhr.open('get', 'http://www.baidu.com', true)
xhr.send(null)

这样就不用去关心readyState值的变化情况了。当然如果想在特定readyState值上做一些逻辑处理,还是要用之前的方法。

progress事件

这个是很有用的一个事件,progress事件会在浏览器接收数据期间周期触发,代表整个请求过程的进度,它的事件处理程序onprogress接收一个event对象,event.targetXHR对象,另外event还有三个属性:

  • lengthComputable:Boolean值,进度信息是否可用。
  • position:已经接收到的字节数。
  • totalSize:总共要接收的字节数,被定义在响应报文的Content-Length字段中。

如果响应报文中有Content-Length字段,那么我们就可以计算当前时刻响应数据的加载进度了,这也是之前看到的一个面试题。看下面的代码:



xhr.onprogress = function(event) {
if(event.lengthComputable) {
console.log(`Received: ${(event.position/event.totalSize).toFixed(4)*100}%`);
}
}

其他还有很多有用的API,如FormData表单序列化,overrideMimeType()重写XHR响应的MIME类型等等,后面慢慢更新。

Ajax总结篇

原文地址:https://segmentfault.com/a/1190000015668383

Ajax基础知识梳理的更多相关文章

  1. [SQL] SQL 基础知识梳理(一)- 数据库与 SQL

    SQL 基础知识梳理(一)- 数据库与 SQL [博主]反骨仔 [原文地址]http://www.cnblogs.com/liqingwen/p/5902856.html 目录 What's 数据库 ...

  2. [SQL] SQL 基础知识梳理(二) - 查询基础

    SQL 基础知识梳理(二) - 查询基础 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5904824.html 序 这是<SQL 基础知识梳理( ...

  3. [SQL] SQL 基础知识梳理(三) - 聚合和排序

    SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...

  4. [SQL] SQL 基础知识梳理(四) - 数据更新

    SQL 基础知识梳理(四) - 数据更新 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5929786.html 序 这是<SQL 基础知识梳理( ...

  5. [SQL] SQL 基础知识梳理(五) - 复杂查询

    SQL 基础知识梳理(五) - 复杂查询 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5939796.html 序 这是<SQL 基础知识梳理( ...

  6. Anliven - 基础知识梳理汇总 - 软件测试

    基础知识梳理 - 软件测试 - 概念 基础知识梳理 - 软件测试 - 分类 基础知识梳理 - 软件测试 - 流程 基础知识梳理 - 软件测试 - 用例 基础知识梳理 - 软件测试 - 方法 基础知识梳 ...

  7. Ajax基础知识《一》

    对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...

  8. [C# 基础知识梳理系列]专题六:泛型基础篇——为什么引入泛型

    引言: 前面专题主要介绍了C#1中的2个核心特性——委托和事件,然而在C# 2.0中又引入一个很重要的特性,它就是泛型,大家在平常的操作中肯定会经常碰到并使用它,如果你对于它的一些相关特性还不是很了解 ...

  9. java基础知识梳理

    java基础知识梳理 1 基本数据类型

随机推荐

  1. 转 怎样用grep命令去掉空格行和以#开头的行

    怎样用grep命令去掉空格行和以#开头的行 https://jingyan.baidu.com/article/359911f544c36b57fe030637.html

  2. list map set常用方法之list

    list 常用方法: 默认添加:list.add(e); 指定下标添加(添加后下标后的元素向后挪一位):list.add(index,e); 获得集合内元素个数:list.size(); 返回是否删除 ...

  3. CentOS6.5安装配置详解

    1. 环境要求 VMWare软件: CentOS6.5对应的iso镜像文件(位数对应个人计算机位数). 2. 安装步骤 打开VMWare,文件->新建虚拟机(以下几步默认跳过即可) 命名和选择安 ...

  4. JSP标签和JSTL标签注意点

    1.转发和重定向问题 当前项目:/Test 转发路径:"/"根目录表示当前项目"/Test","/login.jsp"就是"/Te ...

  5. Poj 1743——Musical Theme——————【后缀数组,求最长不重叠重复子串长度】

    Musical Theme Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 22499   Accepted: 7679 De ...

  6. Android 桌面悬浮窗效果实现,仿360手机卫士悬浮窗效果

    首先是一个小的悬浮窗显示的是当前使用了百分之多少的内存,点击一下小悬浮窗,就会弹出一个大的悬浮窗,可以一键加速.好,我们现在就来模拟实现一下类似的效果. 先谈一下基本的实现原理,这种桌面悬浮窗的效果很 ...

  7. 优化Linux的内核参数来提高服务器并发处理能力

    提高Linux系统下的负载能力,可以使用nginx等原生并发处理能力就很强的web服务器 使用Apache的可以启用其Worker模式,来提高其并发处理能力 修改Linux的内核相关TCP参数,来最大 ...

  8. centos6.2安装内核

    http://vault.centos.org/6.2/updates/Source/SPackages/ yum install rpm-build redhat-rpm-config unifde ...

  9. 洛谷 P1951 收费站_NOI导刊2009提高(2)

    题目描述 在某个遥远的国家里,有n个城市.编号为1,2,3,…,n. 这个国家的政府修建了m条双向的公路.每条公路连接着两个城市.沿着某条公路,开车从一个城市到另一个城市,需要花费一定的汽油. 开车每 ...

  10. “ipconfig不是内部命令或外部命令”解决方法

    第一:用鼠标右键单击“计算机”,在弹出的下拉菜单中选择“属性”. 第二:在系统属性中选择“高级系统设置”.在系统属性对话框中找到其上方的“高级”选项卡,里面有一个“环境变量”按钮,点击进入 第三:在下 ...