Ajax基础知识梳理 1
Ajax
用一句话来说就是无须刷新页面即可从服务器取得数据。注意,虽然Ajax
翻译过来叫异步JavaScript
与XML
,但是获得的数据不一定是XML
数据,现在服务器端返回的都是JSON
格式的文件。
完整的Ajax
请求过程
完整的Ajax
请求过程
- 创建
XMLHttpRequest
实例- 发出
HTTP
请求- 接收服务器传回的数据
- 更新网页数据
下面先看一个红宝书上给出的发起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
请求,使用XHR
的open()
方法,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.target
是XHR
对象,另外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
转载于:https://www.cnblogs.com/lalalagq/p/9768181.html
Ajax基础知识梳理 1相关推荐
- Ajax基础知识梳理
Ajax用一句话来说就是无须刷新页面即可从服务器取得数据.注意,虽然Ajax翻译过来叫异步JavaScript与XML,但是获得的数据不一定是XML数据,现在服务器端返回的都是JSON格式的文件. 完 ...
- 网红快餐店_在一家快餐店工作解释了AJAX基础知识
网红快餐店 by Kevin Kononenko 凯文·科诺年科(Kevin Kononenko) 在一家快餐店工作解释了AJAX基础知识 (AJAX Basics Explained By Work ...
- Python基础知识梳理(一)
Python基础知识梳理: 转载于:https://blog.51cto.com/10412806/2095116
- C#基础知识梳理系列十:异常处理 System.Exception
C#基础知识梳理系列十:异常处理 System.Exception 参考文章: (1)C#基础知识梳理系列十:异常处理 System.Exception (2)https://www.cnblogs. ...
- python语法基础知识总结-Python基础知识梳理 - 第01部分
在开始Python基础知识梳理前, 先安装下环境. 以下过程是在Linux操作系统, root用户下进行的, 主要安装了2.7版本的python, 和pip, ipython, virtualenv等 ...
- [SQL] SQL 基础知识梳理(三) - 聚合和排序
SQL 基础知识梳理(三) - 聚合和排序 [博主]反骨仔 [原文]http://www.cnblogs.com/liqingwen/p/5926689.html 序 这是<SQL 基础知识梳理 ...
- python入门题目及答案_Python基础自测题答案和基础知识梳理
Python基础自测题答案和基础知识梳理 1.关于Python中的lambda表达式的函数体自能是单独一条语句,所以答案选择C. 例如:>>>g = lambda x: 2*x+1 ...
- mysql 算子 谓词_[SQL] SQL 基础知识梳理(六)- 函数、谓词、CASE 表达式
SQL 基础知识梳理(六)- 函数.谓词.CASE 表达式 目录 函数 谓词 CASE 表达式 一.函数 1.函数:输入某一值得到相应输出结果的功能,输入值称为"参数",输出值称 ...
- Js基础知识梳理系列
小序:总是感觉自己的技术一直在原地踏步,想学习一些新的技术,但学起来很吃力,而且总是没有什么实际的收获,似乎进入了所谓的"瓶颈期".问了一些前辈是否也遇到过同样的问题,他们给我的解 ...
最新文章
- ProtoBuf格式详解
- Android TV 悬浮球模拟物理按键
- 网络通信-1(InetAddress、UDP、TCP、DatagramPacket、DatagramSocket、UDP通信示例)
- boost::container_hash模块实现哈希序列
- android Lint优化代码
- Eclipse快捷键(自用)
- python爬取景点信息_python 爬取马蜂窝景点翻页文字评论的实现
- wordpress index.php 跳转,wordpress点击内容页跳转到其他url的解决方法
- CentOS7 安装ownCloud
- 【直播回顾】阿里高级开发工程师紫思:闲鱼多业务隔离框架SWAK...
- 马克龙宣布15亿欧元投资AI,DeepMind拥吻巴黎
- python如何连接sql server数据库_Python连接SQLServer数据库
- Mysql触发器与动态完整性
- vector和list的排序
- excel文件修复工具_用EXCEL自己制作批量修改文件名的实用工具
- ch2_8_2求解幸运数问题
- css背景图做水印,css给图片添加水印的方法
- 字符串匹配 (KMP)
- 2008 R2 Remote Desktop Server driver RDPDR.sys cannot be started, error 577
- 为什么美国程序员不用加班,而中国程序员就只能996?
热门文章
- 将现有MFC应用程序迁移到BCGControlBar VC界面库中
- kafka Failed to send producer
- 2_C语言中的数据类型 (六)浮点数
- [实战]Router configuration for TP ROOM
- 多个DataTable的合并成一个新表
- 如何在Eclipse 3.3上安装jadclipse[java的反编译工具] 收藏
- 小括号教学设计导入_人教版一年级数学下教案 《小括号》教案
- 用python画派大星_派大星的烦恼MISC
- minist _On_[GoogleNet]
- bar()函数——python绘制柱状图