XMLHttpRequest的概述

一、前言

  XMLHttpRequest 最早是在IE5中以ActiveX组件的形式实现的。非 W3C 标准.

  创建XMLHttpRequest对象(由于非标准所以实现方法不统一)

  ①Internet Explorer把XMLHttpRequest实现为一个ActiveX对象
  ②其他浏览器(Firefox、Safari、Opera…)把它实现为一个本地的JavaScript对象。
  ③XMLHttpRequest在不同浏览器上的实现是兼容的,所以可以用同样的方式访问XMLHttpRequest实例的属性和方法,而不论这个实例创建的方法是什么。

  为了每次写Ajax的时候都节省一点时间,可以把对象检测的内容打包成一个可复用的函数:

  说明:对window.XMLHttpRequest的调用会返回一个对象或null,if语句会把调用返回的结果看作是true或false(如果返回对象则为true,返回null则为false)。如果XMLHttpRequest对象存在,则把 xhr 的值设为该对象的新实例。如果不存在,就去检测 ActiveObject 的实例是否存在,如果答案是肯定的,则把微软 XMLHTTP 的新实例赋给 xhr

二、XMLHttpRequest详解

  XMLHttpRequest的方法

  XMLHttpRequest的属性

  发送请求

  利用XMLHttpRequest 实例与服务器进行通信包含以下3个关键部分:

  ①onreadystatechange 事件处理函数
  ②open 方法
  ③send 方法

  • onreadystatechange:

  该事件处理函数由服务器触发,而不是用户

  在 Ajax 执行过程中,服务器会通知客户端当前的通信状态。这依靠更新 XMLHttpRequest 对象的 readyState 来实现。改变 readyState 属性是服务器对客户端连接操作的一种方式。每次 readyState 属性的改变都会触发 readystatechange 事件

  • open(method, url, asynch)

  XMLHttpRequest 对象的 open 方法允许程序员用一个Ajax调用向服务器发送请求。

  method:请求类型,类似 “GET”或”POST”的字符串。若只想从服务器检索一个文件,而不需要发送任何数据,使用GET(可以在GET请求里通过附加在URL上的查询字符串来发送数据,不过数据大小限制为2000个字符)。若需要向服务器发送数据,用POST。

  在某些情况下,有些浏览器会把多个XMLHttpRequest请求的结果缓存在同一个URL。如果对每个请求的响应不同,就会带来不好的结果。在此将时间戳追加到URL的最后,就能确保URL的唯一性,从而避免浏览器缓存结果。

  url:路径字符串,指向你所请求的服务器上的那个文件。可以是绝对路径或相对路径。

  asynch:表示请求是否要异步传输,默认值为true。指定true,在读取后面的脚本之前,不需要等待服务器的相应。指定false,当脚本处理过程经过这点时,会停下来,一直等到Ajax请求执行完毕再继续执行。

  • send(data):

  open 方法定义了 Ajax 请求的一些细节。send 方法可为已经待命的请求发送指令

  data:将要传递给服务器的字符串。

  若选用的是 GET 请求,则不会发送任何数据, 给 send 方法传递 null 即可:request.send(null);

  当向send()方法提供参数时,要确保open()中指定的方法是POST,如果没有数据作为请求体的一部分发送,则使用null.

  完整的 Ajax 的 GET 请求示例:

  • setRequestHeader(header,value)

  当浏览器向服务器请求页面时,它会伴随这个请求发送一组首部信息。这些首部信息是一系列描述请求的元数据(metadata)。首部信息用来声明一个请求是 GET 还是 POST。

  Ajax 请求中,发送首部信息的工作可以由 setRequestHeader该完成

  参数header: 首部的名字;  参数value:首部的值。

  如果用 POST 请求向服务器发送数据,需要将 “Content-type” 的首部设置为 “application/x-www-form-urlencoded”.它会告知服务器正在发送数据,并且数据已经符合URL编码了。

  该方法必须在open()之后才能调用

  完整的 Ajax 的 POST 请求示例:

  接收响应

  用 XMLHttpRequest 的方法可向服务器发送请求。在 Ajax 处理过程中,XMLHttpRequest 的如下属性可被服务器更改:readyState、status、responseText、responseXML

  • readyState

  readyState 属性表示Ajax请求的当前状态。它的值用数字代表。
  0 代表未初始化。 还没有调用 open 方法
  1 代表正在加载。 open 方法已被调用,但 send 方法还没有被调用
  2 代表已加载完毕。send 已被调用。请求已经开始
  3 代表交互中。服务器正在发送响应
  4 代表完成。响应发送完毕

  每次 readyState 值的改变,都会触发 readystatechange 事件。如果把 onreadystatechange 事件处理函数赋给一个函数,那么每次 readyState 值的改变都会引发该函数的执行。

  readyState 值的变化会因浏览器的不同而有所差异。但是,当请求结束的时候,每个浏览器都会把 readyState 的值统一设为 4

  • status

  服务器发送的每一个响应也都带有首部信息。三位数的状态码是服务器发送的响应中最重要的首部信息,并且属于超文本传输协议中的一部分。
  常用状态码及其含义:
  404 没找到页面(not found)
  403 禁止访问(forbidden)
  500 内部服务器出错(internal service error)
  200 一切正常(ok)
  304 没有被修改(not modified)

  在 XMLHttpRequest 对象中,服务器发送的状态码都保存在 status 属性里。通过把这个值和 200 或 304 比较,可以确保服务器是否已发送了一个成功的响应

  • responseText

  XMLHttpRequest 的 responseText 属性包含了从服务器发送的数据。它是一个HTML,XML或普通文本,这取决于服务器发送的内容。

  当 readyState 属性值变成 4 时, responseText 属性才可用,表明 Ajax 请求已经结束。

  • responseXML

  如果服务器返回的是 XML, 那么数据将储存在 responseXML 属性中。

  只用服务器发送了带有正确首部信息的数据时, responseXML 属性才是可用的。 MIME 类型必须为 text/xml

XMLHttpRequest的概述的更多相关文章

  1. 使用 XMLHttpRequest实现Ajax

    [XMLHttpRequest的概述] 1.XMLHttpRequest最早是在IE5中以ActiveX组件的形式实现的.非W3C标准 2.创建XMLHttpRequest对象(由于非标准所以实现方法 ...

  2. AjaxStudyNote

    AjaxStudyNoteBy:Silvers:(E:\Video_Tutorials\Java自学视频\尚硅谷JavaEE培训\6WEB基础-Ajax)15:02 2016/2/29什么是AjaxA ...

  3. java_web学习(16)Ajax

    Ajax       Ajax(Asynchronous JavaScript and XML的缩写),允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax.       Ajax:一种不用 ...

  4. ExtJs知识点概述

    1.前言 ExtJS的前身是YUI(Yahoo User Interface).经过不断的发展与改进,ExtJS现在已经成功发布到了ExtJS 6版本,是一套目前最完整和最成熟的javascript基 ...

  5. DHTML概述

    <!-- DHTML概述:动态的HTML.不是一门语言,是多项技术综合体的简称. 其中包含了HTML.CSS.DOM.JavaScript. 这四个技术在动态HTML页面效果定义时,都处于什么样 ...

  6. Ajax的概述与实现过程

    一.ajax概述 1.Ajax是Asynchronous([ə'sɪŋkrənəs) JavaScript XML的简写,不是一门新技术,而是对现有技术的综合利用.这一技术能够向服务器请求额外数据而无 ...

  7. AngularJS概念概述和第一个使用例子

    点击查看AngularJS系列目录 转载请注明出处:http://www.cnblogs.com/leosx/ 概念概述 本节使用一个简单的例子简要介绍了AngularJS的重要组成部分. 概念 描述 ...

  8. 十七、AJAX概述

    AJAX概述 1 什么是AJAX AJAX(Asynchronous Javascript And XML)翻译成中文就是“异步Javascript和XML”.即使用Javascript语言与服务器进 ...

  9. 用XMLHttpRequest制作一个简易ajax

    概述 jquery退出历史舞台之后,我们怎么来发送ajax请求呢?可以用相关的库,也可以自己制作一个简易的ajax. 需要说明的是,我们使用的是XMLHttpRequest 2,它几乎兼容所有主流浏览 ...

随机推荐

  1. 在windows中使用 nvm 实现node多版本管理

    所谓 NVM 就是 Node Version Manager 的缩写,即 node的版本管理工具,我们可以在电脑中安装多个不同版本的node,并借由 NVM 来实现自由切换,详情可点击查看 NVM 官 ...

  2. thinkphp项目阿里云ECS服务器部署

    [日记]thinkphp项目阿里云ECS服务器部署   项目本地开发告一段落.准备上传到服务器上测试 技术组成 thinkphp+mysql+阿里ECS  代码管理方式git 一.阿里ECS服务器配置 ...

  3. linux初学者-磁盘配额篇

    linux初学者-磁盘配额篇 在使用磁盘时,只要有权限,不管什么用户都可以在其中写入数据,但是如果是多人在一个磁盘中写入数据,就会出现争议,如果一个用户将磁盘空间用完,那么其他人无法再使用.如下图所示 ...

  4. java 第三章

       if  选择结构:        语法:if(条件){ //代码块1 } if——else选择结构 语法:if(条件){ //代码块1 }else{ //代码块2 } 多重if选择结构 语法:i ...

  5. TCP三次握手和断开四次挥手

    TCP三次握手 1主机A发送消息请求与主机B连接 2主机B回复消息同意与主机A连接 3主机A确认主机B的同意连接,并建立连接 TCP的四次挥手 1客户端发送FIN到服务器,请求关闭与服务器的连接(意思 ...

  6. Android Studio 'AIDL is missing' 且 不识别R文件

    最近刚开始用Android Studio,出的问题还真不少.昨天不知为何不能新建项目了,这两天重装了几次才搞定. 可又出了这个问题: 原因:Compile Sdk Version和Build Tool ...

  7. Python实现批量处理扫描特定目录

    ## 简述在渗透测试中遇到相同CMS站点时,搞定一个站点,相当于拿了一个站群的通用漏洞,所以我们首先需要标注站点的CMS类型,根据要求编写如下脚本 ## 要求1.访问特定目录,如:站点特定 /cmsa ...

  8. html的一些基本语法学习与实战

    其实在学校前端开始之前,问过自己为什么要学,因为自己学的比较杂,直到现在刚刚毕业出来工作了,才明确了方向了,要往嵌入式方向走,但是随着时代的发展,在编程和智能硬件结合的越来越紧密,特别是物联网这一块, ...

  9. Java匹马行天下之J2EE框架开发——Spring—>Spring框架知多少

    ————也许我注定成不了一个伟大的人,但是至少我可以做一个很棒的自己.我想我现在应该做的不是瞻前顾后,而是活在当下,正确认知自己,做好自己现在的工作,努力提升自己的能力,踏踏实实地做一个程序员 一.思 ...

  10. C语言tips_1 关于&& || ! 的优先级

    关于&& || ! 三种操作的优先级 测试如下 简要分析 假设&&>|| 则结果为1 假设||>&& 则结果为0 结果为1 得证 & ...