XMLHttpRequest用法介绍
前言:
传统的Web应用请求服务器返回的一般是是完整的HTML页面,这样往往就需要页面进行刷新操作,不仅耗时而且用户体验度也不好。最典型的代表就是form表单登录操作了。如果登录失败往往是跳转到原网页重新登陆,如果是这种情况话就会造成资源的浪费,因为返回的HTMl网页中大多数元素都是重复的。
正因为这些原因后来才出现了ajax,它是一种交互式的网页开发技术,而XMLHttpRequest是它的核心的内容,它能够为页面中的javascript脚本提供特定的通信方式,从而使页面的javascript脚本和服务器之间形成动态交互的效果,XMLHTTPRequest的最大的优点是页面内的javascript脚本可以不用刷新页面,而直接和服务器发生交互,从而实现页面无刷新的效果。[1]
什么是 XMLHttpRequest 对象?[b]
XMLHttpRequest 对象用于在后台与服务器交换数据。
XMLHttpRequest 对象是开发者的梦想,因为您能够:
- 在不重新加载页面的情况下更新网页
- 在页面已加载后从服务器请求数据
- 在页面已加载后从服务器接收数据
- 在后台向服务器发送数据
所有现代的浏览器都支持 XMLHttpRequest 对象。
Ajax
和XMLHttpRequest
[c]
[c]
我们通常将Ajax
等同于XMLHttpRequest
,但细究起来它们两个是属于不同维度的2个概念。
以下是我认为对
Ajax
较为准确的解释:(摘自what
is Ajax)
AJAX stands for Asynchronous JavaScript and XML. AJAX is a new technique for creating better, faster, and more interactive web applications with the help of XML, HTML, CSS, and Java Script.AJAX is based on the following open standards:
Browser-based presentation using HTML and Cascading Style Sheets (CSS).(基于浏览器的演示,使用HTML和层叠样式表(CSS))
Data is stored in XML format and fetched from the server.(数据以XML格式存储,并从服务器获取)
Behind-the-scenes data fetches using XMLHttpRequest objects in the browser.(后台数据在浏览器中使用XMLHttpRequest对象获取)
JavaScript to make everything happen.(所有事情都发生的JavaScript)
从上面的解释中可以知道:ajax
是一种技术方案,但并不是一种新技术。它依赖的是现有的CSS
/HTML
/Javascript
,而其中最核心的依赖是浏览器提供的XMLHttpRequest
对象,是这个对象使得浏览器可以发出HTTP
请求与接收HTTP
响应。
所以我用一句话来总结两者的关系:我们使用XMLHttpRequest
对象来发送一个Ajax
请求。
XMLHttpRequest
的发展历程
XMLHttpRequest
一开始只是微软浏览器提供的一个接口,后来各大浏览器纷纷效仿也提供了这个接口,再后来W3C对它进行了标准化,提出了XMLHttpRequest
标准。XMLHttpRequest
标准又分为Level
和
1Level 2
。XMLHttpRequest Level 1
主要存在以下缺点:
受同源策略的限制,不能发送跨域请求;
不能发送二进制文件(如图片、视频、音频等),只能发送纯文本数据;
在发送和获取数据的过程中,无法实时获取进度信息,只能判断是否完成;
那么Level 2
对Level
进行了改进,
1XMLHttpRequest Level 2
中新增了以下功能:
可以发送跨域请求,在服务端允许的情况下;
支持发送和接收二进制数据;
新增formData对象,支持发送表单数据;
发送和获取数据时,可以获取进度信息;
可以设置请求的超时时间;
1.下面首先来介绍一下XMLHttpRequest的详细属性和方法:
方法和属性 |
描述 |
Open(String method,String url,Boolean ansynch,String username,String password) |
指定和服务器端交互的HTTP方法,URL地址及其他请求信息。 |
其中method表示HTTP请求方法。支持所有HTTP的方法,一般使用“GET”,“POST”url表示请求的服务器的地址 Asynch表示是否采取异步方式,true表示异步,false表示同步 后两个参数可以不指定,usrename和password分别表示用户名和密码,提供http认证机制需要的用户名和密码 |
|
Send(content) |
向服务器发出请求,如果采用异步方式,该方法会立即返回 |
Content可以不指定或者指定为null表示不发送数据 其内容可以使DOM对象,输入流或是字符串 |
setRequestHeader(String header,String value) |
设置HTTP请求中的指定头部header的值为value。 |
getAllReponseHeader() |
返回包含HTTP的所有响应头包括Content-Length,Date,URI等内容 |
返回值是一个字符串,包含所有头信息,其中每一个键名和键值用冒号分开,每一组键之间用CR和LF(回车加换行符)来分隔 |
|
GetResponseHeader(String header) |
返回HTTP响应头中指定的键名header对应的值 |
Abort() |
停止当前http请求,对应的XMLHttpRequest对象会复位到未初始化的状态 |
responseText |
服务器响应的文本内容 |
ResponseXML |
服务器响应的XML内容对应的DOM对象 |
Status |
服务器返回的http状态码 200表示“成功”,404表示“未找到”。500表示“服务器内容部错误” |
statusText |
服务器返回状态码的文本信息 |
readyState |
表示XMLHttpRequest对象的状态 0=未初始化。对象已创建,未调用open 1=open方法成功调用以后。Send方法未调用 2=send方法已经调用,尚未开始接受数据 3=正在接受数据。Http响应头信息已经接受,响应数据尚未接受完成。 4=完成。响应数据接受完成。 |
Onreadystatechage |
请求状态改变的时间触发器(readyState变化时会调用这个属性上注册的javascript函数) |
2.然后介绍一下XMLHttpRequest的使用步骤:
一、初始化XMLHttpRequest对象
在使用XMLHttpRequest对象之前需要将XMLHttpRequest对象实例化,因为各个浏览器对这个实例化过程的实现不同,所以针对不同的浏览器实例化XMLHttpRequest对象的方式也不尽相同。
针对微软IE浏览器:
- var xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
针对其他的浏览器:
- var xmlHttp = new XMLHttpRequest();
所以,综合了这两种实例化XMLHttpRequest的形式,就可以提取出一个实例化的公共方法,代码如下:
- //实例化XMLHttpRequest对象
- function createXMLHttpRequest(){
- if(window.XMLHttpRequest){
- xmlHttp = new XMLHttpRequest();
- }else if(window.ActiveXObject){
- xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
- }
- }
二、指定响应处理函数
接下来就要指定当服务器返回信息时客户端的处理方式。只需将相应的处理函数名称赋给XMLHttpRequest对象的onreadystatechange属性即可,比如:
- xmlHttp.onreadystatechange = callBack;
需要说明的是,这个函数名称不加括号,不带参数;也可以使用JavaScript即时定义函数的方式定义响应函数,比如:
- xmlHttp.onreadystatechange = function(){
- // Do something...
- }
三、发送HTTP请求
指定响应处理函数后,就可以向服务器发出HTTP请求了。这需要调用XMLHttpRequest对象的open()和send()方法。
- xmlHttp.open("get/Post","URL",true/false);
- xmlHttp.send(null);
3.1 open()方法详解
- //XMLHttpRequest对象的open()方法原型
- void open(string method, string URL , boolean asynch, string username, string password);
open()方法表示会建立对服务器的调用,这是初始化一个请求的纯脚本方法。
它有2个必要的参数,还有3个可选的参数。method表示向服务器发送信息的方式,可以为Get或Post;URL表示所调用的服务器资源的URL;asynch是一个布尔值,指示这个调用时异步还是同步,默认为true;username和password允许我们指定一个特定的用户名和口令。 一般使用时只取前三个参数即可。
3.2 send()方法详解
- //XMLHttpRequest对象的send()方法原型
- void send(content);
send()方法具体向服务器发送请求。如果请求声明为异步的,这个方法就会立即返回,否则它会等待,知道接收到响应为止。参数content是可选的,可以是一个DOM对象的实例、一个输入流或一个串。传入的内容会作为请求体的一部分发送。
四、处理服务器返回的信息
在第二部中我们为XMLHttpRequest指定了响应处理函数,响应处理函数检查XMLHttpRequest对象的readyState属性值的变化,如果readyState值为4时,代表服务器已经传回所有信息,可以开始处理信息并更新页面内容了。
- function callBack(){
- if(xmlHttp.readyState==4){
- if(xmlHttp.status==200){
- //do something with xmlHttp.responseText;
- xmlHttp.responseText;
- }
- }
- }
4.1 readyState属性详解
readyState属性用来表示请求的状态,有5个可取值,分别是:
“0”:表示未初始化,即对象已经建立,但是尚未初始化(尚未调用open()方法);
“1”:表示正在加载,此时对象已建立,尚未调用send()方法;
“2”:表示请求已发送,即send()方法已调用;
“3”:表示请求处理中;
“4”:表示请求已完成,即数据接收完毕。
4.2 status、statusText属性详解
status:返回当前请求的HTTP状态码(只读);
statusText:返回当前请求的响应行状态(只读)。
4.3 responseText、responseXML属性详解
responseText属性表示服务器的文本响应,其处理结果以字符串形式返回。
responseXML属性表示服务器响应,其结果将格式化为XML Document对象。
上述四个步骤,就是XMLHttpRequest对象在Ajax程序中的运行周期,即初始化、指定响应函数、发送请求、处理响应。
下面是本示例的完整代码:
- var xmlHttp;
- function AjaxFunction(){
- createXMLHttpRequest();
- if(xmlHttp!=null){
- xmlHttp.onreadystatechange = callBack;
- xmlHttp.open("get/Post","URL",true/false);
- xmlHttp.send(null);
- }
- }
- //实例化XMLHttpRequest对象
- function createXMLHttpRequest(){
- if(window.XMLHttpRequest){
- xmlHttp = new XMLHttpRequest();
- }else if(window.ActiveXObject){
- xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
- }
- }
- //指定响应函数
- function callBack(){
- if(xmlHttp.readyState==4){
- if(xmlHttp.status==200){
- //do something with xmlHttp.responseText;
- xmlHttp.responseText;
- }
- }
- }
有些人可能会有疑问,为什么不用JQuery中的ajaxt方法呢?
这是因为JQuery中的ajax方法需要Jquery文件的依赖,如果是想要依靠原生的js不想导入JQuery文件的情况下是不能使用的,针对于这些场景所以XMLHttpRequest还是相当受欢迎的。
原文出处:
[a] 帅气的林老师, XMLHttpRequest用法介绍, http://blog.csdn.net/linzhiqiang0316/article/details/52326773
[b] wc3school在线教程, http://www.w3school.com.cn/xml/xml_http.asp
[c] ruoyiqing,你真的会使用XMLHttpRequest吗?https://segmentfault.com/a/1190000004322487
Reference:
[1] xusweeter, XMLHttpRequest简易使用教程, http://xusweeter.iteye.com/blog/747099
[2] 兰儿, 拿下AJAX(二)——XMLHttpRequest对象五步使用法, http://blog.csdn.net/laner0515/article/details/7784075
XMLHttpRequest用法介绍的更多相关文章
- 好压(HaoZip)的命令行模式用法介绍
好压压缩软件,又叫“2345好压”,是一款国产的优秀压缩软件,目前是免费的,据官网介绍,该软件永久免费.官网地址:http://haozip.2345.com/ 本文主要对该软件的命令行模式用法进行介 ...
- sql事务(Transaction)用法介绍及回滚实例
sql事务(Transaction)用法介绍及回滚实例 事务(Transaction)是并发控制的单位,是用户定义的一个操作序列.这些操作要么都做,要么都不做,是一个不可分割的工作单位.通过事务, S ...
- STL vector用法介绍
STL vector用法介绍 介绍 这篇文章的目的是为了介绍std::vector,如何恰当地使用它们的成员函数等操作.本文中还讨论了条件函数和函数指针在迭代算法中使用,如在remove_if()和f ...
- 怎么通过activity里面的一个按钮跳转到另一个fragment(android FragmentTransaction.replace的用法介绍)
即:android FragmentTransaction.replace的用法介绍 Fragment的生命周期和它的宿主Activity密切相关,几乎和宿主Activity的生命周期一致,他们之间最 ...
- Oracle CASE WHEN 用法介绍[Z]
Oracle CASE WHEN 用法介绍 1. CASE WHEN 表达式有两种形式 --简单Case函数 CASE sex WHEN '1' THEN '男' WHEN '2' THEN '女' ...
- LinqToXml高级用法介绍
LinqToXml高级用法介绍 一.函数构造 什么是函数构造?其是指通过单个语句构建XML树的能力. 那么它有什么作用呢? 作用1.用单个表达式快速创建复杂的XML树 见实例代码CreateXml( ...
- Oracle学习笔记_06_CASE WHEN 用法介绍
1. CASE WHEN 表达式有两种形式 --简单Case函数 CASE sex ' THEN '男' ' THEN '女' ELSE '其他' END --Case搜索函数 CASE ' THEN ...
- mysql进阶(六)模糊查询的四种用法介绍
mysql中模糊查询的四种用法介绍 这篇文章主要介绍了mysql中模糊查询的四种用法,需要的朋友可以参考下. 下面介绍mysql中模糊查询的四种用法: 1 %: 表示任意0个或多个字符.可匹配任意类型 ...
- object-fit 属性的用法介绍
这个要在宽,高都是100%的情况下才能提现 object-fit 属性的用法介绍 fill(不保持纵横比缩放图片,使图片完全适应) contain(保持纵横比缩放图片,使图片的长边能完全显示出来) c ...
随机推荐
- Java自学-面向对象 类和对象
Java中的类和对象 引入面向对象的基本概念 假设,我们要设计一个LOL这样的游戏,使用面向对象的思想来设计,应该怎么做? 步骤 1 : 设计英雄这个类 LOL有很多英雄,比如盲僧,团战可以输,提莫必 ...
- VIM编辑器使用的小技巧
在命令中输入 vi –t 类型名.结构体名或者函数名 系统就会寻找相应的对象,默认是在当前目录的 tags 中搜索,例如我们想寻找 stat 结构体, 则输入 vi –t stat 然后按 q 退出 ...
- node.js中使用路由方法
1.数组的find方法还是不会用,改为filter 2.正规表达式还是理解的不好 //var myrouter = require("./myrouter"); //myroute ...
- 鼠标按下改变RelativeLayout背景颜色,松开变回
在drawable下创建bg.xml文件 <?xml version="1.0" encoding="utf-8"?> <selector x ...
- 线下AWD平台搭建以及一些相关问题解决
线下AWD平台搭建以及一些相关问题解决 一.前言 文章首发于tools,因为发现了一些新问题但是没法改,所以在博客进行补充. 因为很多人可能没有机会参加线下的AWD比赛,导致缺乏这方面经验,比如我参加 ...
- springboot使用Fiber纤程踩过的坑
@RequestAttribute为null 在springboot中使用@FiberSpringBootApplication注解标注在SpringBootApplication上时,发现在拦截器( ...
- Linux装B命令
原文:https://mp.weixin.qq.com/s/CNmMRjl0iZ8EBPq5VgJHsA 1.空心字体 yum install -y figlet figlet happy 1.0 2 ...
- Maven项目中jstl表达式失效
从网上看到的可能原因: 1.包没导入 2.web.xml版本太低,不支持 最后,我一直忽略了的解决办法: 关于jstl和el表达式失效的解决办法 - - ITeye博客 https://aazham. ...
- Nginx核心模块内置变量
本文根据Nginx官网整理了Nginx的ngx_http_core_module模块的内置变量,可与Apache做对比参考.随后做了一次测试观察各变量的值,并附上测试结果. 1.变量列表 $arg_n ...
- Odoo中的模型详解
转载请注明原文地址:https://www.cnblogs.com/ygj0930/p/10826118.html [Odoo中,一切皆模型,连视图都是模型.Odoo将各种数据,如:权限数据.类 ...