XMLHttpRequest 对象是 Ajax 的关键。它从 2000 年 7 月发布的 IE 5.5 开始可用，但是直到 2005 年 Ajax 和 Web 2.0 变得流行起来它都没有完全被发觉。（需要浏览器提供支持，存在跨域问题）

XMLHttpRequest (XHR) 是一个可以用 JavaScript，JScript，VBScript 和其他 Web 浏览器脚本语言传输和操作 XML 数据，以及使用 HTTP 从 Web 服务器上在网页客户端和服务端之间建立一个独立连接通道的 API。

调用 XMLHttpRequest 返回的数据通常都由后端数据库提供。除了 XML 之外，XMLHttpRequest 还可以用来获取其他格式的数据，例如 JSON 或者是纯文本。

我们已经见过好几个讲述如何创建 XMLHttpRequest 对象的例子了。

下面列出的是一些我们必须熟悉的方法和属性。

XMLHttpRequest 方法

1、abort()
取消当前请求。

2、getAllResponseHeaders()
返回整套 HTTP 头字符串。

3、getResponseHeader( headerName )
返回指定 HTTP 头的值。

4、
open( method, URL )
open( method, URL, async )
open( method, URL, async, userName )
open( method, URL, async, userName, password )

指定请求的方法，URL 以及其他可选属性。

方法参数可以是 "GET"，"POST" 或者 "HEAD" 中的一个值。也可以是其他 HTTP 方法，比如 "PUT" 和 "DELETE"（主要用于 REST 应用程序中）。

"async" 参数指定该请求是否应该异步处理。"true" 意味着脚本处理发生在 send() 方法之后而不必等待响应，而 "false" 意味着继续脚本处理之前脚本要等待响应。

5、send( content )
发送请求。

6、setRequestHeader( label, value )
给 HTTP 头添加一个标签/值对进行发送。

XMLHttpRequest 属性

1、onreadystatechange
一个用于事件的事件处理程序，每个状态变化时都会触发。

2、readyState
readyState 属性定义了 XMLHttpRequest 对象的当前状态。

下面的表格提供了一个 readyState 属性可能值的列表：

状态 描述
0 请求还未初始化。
1 请求已经建立。
2 请求已经发送。
3 请求正在处理。
4 请求已经完成。

readyState = 0
在 XMLHttpRequest 对象创建之后，但是在我们调用 open() 方法之前。

readyState = 1
在调用 open() 方法之后，但是在调用 send() 之前。

readyState = 2
在我们调用 send() 之后。

readyState = 3
在浏览器建立与服务器的通信之后，但是在服务器完成响应之前。

readyState = 4
在请求完成以及响应数据已经完全从服务器接受之后。

3、responseText 返回响应字符串。

4、responseXML
返回响应的 XML 数据。这个属性返回一个 XML 文档对象，我们可以使用 W3C DOM 节点树方法和属性检查并解析它。

5、status
返回状态数字（比如 404 表示 "Not Found" 或者 200 表示 "OK"）。

6、statusText
返回状态字符串（比如 "Not Found" 或者 "OK"）。

XHR 创建对象

AJAX - 创建 XMLHttpRequest 对象

　XMLHttpRequest 是 AJAX 的基础。

　XMLHttpRequest 术语缩写为XHR，中文可以解释为可扩展超文本传输请求。

　XMLHttpRequest 对象可以在不向服务器提交整个页面的情况下，实现局部更新网页。

　XMLHttpRequest的对象用于客户端和服务器之间的异步通信。

　它执行以下操作：

  1. 在后台从客户端发送数据
  2. 从服务器接收数据
  3. 更新网页而不重新加载。

XMLHttpRequest 对象

　所有现代浏览器均支持 XMLHttpRequest 对象（IE5 和 IE6 使用 ActiveXObject）。

　XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象

　所有现代浏览器（IE7+、Firefox、Chrome、Safari 以及 Opera）均内建 XMLHttpRequest 对象。

　创建 XMLHttpRequest 对象的语法：

variable=new XMLHttpRequest();

　老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

　为了应对所有的现代浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：:

实例

var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safarixmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}

　现在，你已经学会如何创建 XMLHttpRequest 对象了（这是学习AJAX的基础），接下来，在下一章中，您将学习发送服务器请求的知识。

XMLHttpRequest对象的属性

XMLHttpRequest对象的常见属性如下：

属性 描述
onreadystatechange 存储函数（或函数名），每当readyState的属性改变时，就会调用该函数。
readyState 存有的XMLHttpRequest的状态从0到4发生变化。
0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪
responseText 以文本形式返回响应。
responseXML 以XML格式返回响应
status 将状态返回为数字（例如，“Not Found”为404，“OK”为200）
statusText 以字符串形式返回状态（例如，“Not Found”或“OK”）

XMLHttpRequest对象的方法

XMLHttpRequest对象的重要方法如下：

方法 描述
abort() 取消当前请求。
getAllResponseHeaders() 以字符串形式返回完整的HTTP标头集。
getResponseHeader( headerName ) 返回指定HTTP标头的值。
void open（method，URL） 打开指定获取或交的方法和URL的请求。
void open（method，URL，async） 与上面相同，但指定异步或不。
void open（method，URL，async，userName，password） 与上面相同，但指定用户名和密码。
void send（content） 发送获取请求。
setRequestHeader（ label，value） 将标签/值对添加到要发送的HTTP标头。

XHR 请求

AJAX如何工作？

　AJAX 使用的 XMLHttpRequest 的对象与服务器通信。让我们尝试通过下面显示的图像了解 AJAX 的流程或 AJAX 的工作原理。

　正如您在上面的示例中所看到的，XMLHttpRequest对象起着重要作用。

  1. 用户从 UI 发送请求，JavaScript 中调用 XMLHttpRequest 对象。
  2. HTTP 请求由 XMLHttpRequest 对象发送到服务器。
  3. 服务器使用 JSP，PHP，Servlet，ASP.net 等与数据库交互。
  4. 检索数据。
  5. 服务器将 XML 数据或 JSON 数据发送到 XMLHttpRequest 回调函数。
  6. HTML 和 CSS 数据显示在浏览器上。

向服务器发送请求

　XMLHttpRequest 对象用于和服务器交换数据。

　当你的页面全部加载完毕后，客户端会通过 XMLHttpRequest 对象向服务器请求数据，服务器端接受数据并处理后，向客户端反馈数据。

　如需将请求发送到服务器，我们使用 XMLHttpRequest 对象的open()和send()方法：

xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
方法 描述
open(method,url,async)

规定请求的类型、URL 以及是否异步处理请求。

  • method：请求的类型；GET 或 POST

  • url：文件在服务器上的位置

  • async：true（异步）或 false（同步）
send(string)

将请求发送到服务器。

  • string：仅用于 POST 请求

GET 还是 POST？

　与POST相比，GET 更简单也更快，并且在大部分情况下都能用。

　然而，在以下情况中，请使用POST请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）

  • 向服务器发送大量数据（POST没有数据量限制）

  • 发送包含未知字符的用户输入时，POST比GET更稳定也更可靠

GET 请求

　一个简单的GET请求：

实例

xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();

　在上面的例子中，您可能得到的是缓存的结果。

　为了避免这种情况，请向 URL 添加一个唯一的 ID：

实例

xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();

　如果您希望通过GET方法发送信息，请向 URL 添加信息：

实例

xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();

?fname=Henry&lname=Ford为请求时传递的参数，指浏览器向服务器传递两个参数，一个为fname，值为Henry，一个为lname，值为Ford。在本实例中服务器只用到fname的参数，没有用到lname的参数。

提示：GET请求具有以下的几个特点：

  • GET请求可被缓存
  • GET请求保留在浏览器历史记录中
  • GET请求可被收藏为书签
  • GET请求不应在处理敏感数据时使用
  • GET请求有长度限制
  • GET请求只应当用于取回数据

POST 请求

　一个简单POST请求：

实例

xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();

　如果需要像 HTML 表单那样 POST 数据，请使用setRequestHeader()来添加 HTTP 头。然后在send()方法中规定您希望发送的数据：

实例

xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
方法 描述
setRequestHeader(header,value)

向请求添加 HTTP 头。

  • header: 规定头的名称

  • value: 规定头的值

　提示：POST请求的特点如下：

  • POST请求不会被缓存
  • POST请求不会保留在浏览器历史记录中
  • POST请求不能被收藏为书签
  • POST请求对数据长度没有要求

url - 服务器上的文件

open()方法的url参数是服务器上文件的地址：

xmlhttp.open("GET","ajax_test.html",true);

　该文件可以是任何类型的文件，比如.txt和.xml，或者服务器脚本文件，比如.asp和.php（在传回响应之前，能够在服务器上执行任务）。

异步 - True 或 False？

　AJAX 指的是异步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

　XMLHttpRequest 对象如果要用于 AJAX 的话，其open()方法的sync(async)参数必须设置为 true：

xmlhttp.open("GET","ajax_test.html",true);

　对于 web 开发人员来说，发送异步请求是一个巨大的进步。很多在服务器执行的任务都相当费时。AJAX 出现之前，这可能会引起应用程序挂起或停止。

　通过 AJAX，JavaScript 无需等待服务器的响应，而是：

  • 在等待服务器响应时执行其他脚本

  • 当响应就绪后对响应进行处理

Async=true

　当使用 async=true 时，请规定在响应处于 onreadystatechange 事件中的就绪状态时执行的函数：

实例

xmlhttp.onreadystatechange=function()
{if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();

　您将在稍后的章节学习更多有关 onreadystatechange 的内容。

Async = false

　如需使用 async=false，请将open()方法中的第三个参数改为 false：

xmlhttp.open("GET","test1.txt",false);

　我们不推荐使用 async=false，但是对于一些小型的请求，也是可以的。

　请记住，JavaScript 会等到服务器响应就绪才继续执行。如果服务器繁忙或缓慢，应用程序会挂起或停止。

　注意：当您使用 async=false 时，请不要编写 onreadystatechange 函数 - 把代码放到send()语句后面即可：

实例

xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

XHR 响应

AJAX - 服务器响应

　由于 HTTP 响应是由服务端发出的，并且服务器做出响应需要时间（比如网速慢等原因），所以我们需要监听服务器响应的状态，然后才能进行处理。

  • 状态行
    xhr.status状态码，如200，304，404等；
  • 响应主体
    xhr.responseText与xhr.responseXML都表示响应主体。

　如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的responseText或responseXML属性。

属性 描述
responseText 获得字符串形式的响应数据。
responseXML 获得 XML 形式的响应数据。

responseText 属性

　如果来自服务器的响应并非 XML，请使用responseText属性。

　responseText属性返回字符串形式的响应，因此您可以这样使用：

实例

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

　提示：对于responseText属性，只有当 readyState属性值变为4时，responseText属性才可用，因为这表明AJAX请求已经结束！

responseXML 属性

　如果来自服务器的响应是 XML，而且需要作为 XML 对象进行解析，请使用responseXML属性：

实例

请求 cd_catalog.xml 文件，并解析响应：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
{txt=txt + x[i].childNodes[0].nodeValue + "<br>";
}
document.getElementById("myDiv").innerHTML=txt;

XHR readyState

AJAX - onreadystatechange 事件

　当发送一个请求后，客户端需要确定这个请求什么时候会完成，因此，XMLHttpRequest对象提供了onreadystatechange事件机制来捕获请求的状态，继而实现响应。

　当请求被发送到服务器时，我们需要执行一些基于响应的任务。

　每当readyState改变时，就会触发onreadystatechange事件。

　readyState属性存有 XMLHttpRequest 的状态信息。

　下面是 XMLHttpRequest 对象的三个重要的属性：

属性 描述
onreadystatechange 存储函数（或函数名），每当readyState属性改变时，就会调用该函数。
readyState

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

  • 0: 请求未初始化

  • 1: 服务器连接已建立

  • 2: 请求已接收

  • 3: 请求处理中

  • 4: 请求已完成，且响应已就绪
status 200: "OK"
404: 未找到页面

readyState状态说明

　0：请求未初始化

　此阶段确认XMLHttpRequest对象是否创建，并为调用open()方法进行未初始化作好准备，值为0表示对象已经存在，否则浏览器会报错：对象不存在。

　1：服务器连接已建立

　此阶段对XMLHttpRequest对象进行初始化，即调用open()方法，根据参数（method,url,true）完成对象状态的设置。并调用send()方法开始向服务端发送请求。

　值为1表示正在向服务端发送请求。

　2：请求已接收

　此阶段接收服务器端的响应数据。但获得的还只是服务端响应的原始数据，并不能直接在客户端使用。

　值为2表示已经接收完全部响应数据，并为下一阶段对数据解析作好准备。

　3：请求处理中

　此阶段解析接收到的服务器端响应数据即根据服务器端响应头部返回的MIME类型把数据转换成能通过responseBody，responseText或responseXML的属性存取的格式，为在客户端调用作好准备。

　状态3表示正在解析数据。

　4：请求已完成，且响应已就绪

　此阶段确认全部数据都已经解析为客户端可用的格式，解析已经完成。值为4表示数据解析完毕，可以通过的XMLHttpRequest对象的属性取得数据。

　概而括之，整个XMLHttpRequest对象的生命周期应该包含如下阶段：

  1. 创建
  2. 初始化请求
  3. 发送请求
  4. 接收数据
  5. 解析数据
  6. 完成

　在onreadystatechange事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

　当readyState等于 4 且状态为 200 时，表示响应已就绪：

实例

xmlhttp.onreadystatechange=function()
{if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}
}

　注意：onreadystatechange事件被触发 5 次（0 - 4），对应着readyState的每个变化。

　提示：XHR.readyState状态的变化如下：

  • 0：请求未初始化，还没有调用 open()。
  • 1：请求已经建立，但是还没有发送，还没有调用 send()。
  • 2：请求已发送，正在处理中（通常现在可以从响应中获取内容头）。
  • 3：请求在处理中；通常响应中已有部分数据可用了，没有全部完成。
  • 4：响应已完成；您可以获取并使用服务器的响应了。

使用回调函数

　回调函数是一种以参数形式传递给另一个函数的函数。

　如果您的网站上存在多个 AJAX 任务，那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数，并为每个 AJAX 任务调用该函数。

　该函数调用应该包含 URL 以及发生onreadystatechange事件时执行的任务（每次调用可能不尽相同）：

实例

function myFunction()
{loadXMLDoc("ajax_info.txt",function(){if (xmlhttp.readyState==4 && xmlhttp.status==200){document.getElementById("myDiv").innerHTML=xmlhttp.responseText;}});
}

XHR-XMLHttpRequest相关推荐

  1. xhr XMLHttpRequest 简介

    XHR全称XMLHttpRequest XMLHTTP是一组API函数集,可被JavaScript.JScript.VBScript以及其它web浏览器内嵌的脚本语言调用,通过HTTP在浏览器和web ...

  2. XHR(XMLHttpRequest)与Linux下的CGI交互

    在Web编程时,为了能与硬件交互,中间需要CGI来响应.一般的我们会采用Form的Action来与CGI交互,但是使用Form来交互,就必须要提交数据,要提交数据就会产生页面的刷新,如果是少量的,还可 ...

  3. javascript --- XHR(XMLHttpRequet)对象

    XHR: // XHR(XMLHttpRequest):为向服务器发送请求和解析服务器响应提供了流畅的接口 // 能够以异步方式从服务器取得更多信息,意味着用户点击后,可以不必刷新页面也能取得新数据 ...

  4. js xmlhttp ajax 超时时间,如何为XMLHttpRequest设置超时和ontimeout？

    覆盖XMLHttpRequest用自己的版本. 我不建议这样做,但有时如果您需要直接与使用XMLHttpRequest的代码集成,您可能会觉得您需要这样做.例如: (function() { var ...

  5. JavaScript XHR使用 JSONPlaceholder API 并本地搭建JSON server REST API

    有时,了解地面上的事情是如何发生的非常重要.本文将讨论如何借助最喜爱的 REST API 在 vanilla JavaScript 中使用 XHR - XMLHttpRequest:JSON占位符. ...

  6. JS原生：XMLHttpRequest发送GETPOST请求

    目录 1.XMLHttpRequest   (xhr) 2.使用xhr发起GET无参请求 3.使用xhr发起GET有参请求 4.使用xhr发起POST请求 学到了xhr发起GET和POST请求,在此记 ...

  7. xhr返回值_XHR对象

    一.XMLHttpRequest对象 var xhr = newXMLHttpRequest(), i= 0;for(var key inxhr){if(xhr.hasOwnProperty(key) ...

  8. YSLOW法则中，为什么yahoo推荐用GET代替POST？

    原文:http://www.cnxct.com/use-get-for-ajax-requests-why/ 背景: 上上周五,公司前端工程师培训,提到前端优化的一些技巧,当然不能少了yahoo ys ...

  9. 探究chrome下的开发工具的各功能

    F12 一.网页寻找js事件的位置,或者某一个次究竟在哪个相关的文件中可以全局搜索: ①控制台右上角的:(Customize and control DevTools)三个点点开,---->Se ...

  10. 最近用到的几种前后端交互方式

    后端用的是Mybatis框架,前端的话由于是基于Ionic框架开发,所以大多都是通过Ionic的组件进行前后端交互 ,另外还涉及到一些地图功能用到ArcGIS JS API ,必然就会用到dojo的一 ...

最新文章

  1. Jupyter Notebook教程
  2. 使用Zuul和Spring Boot创建API网关
  3. 错误检测dP-bitstream-ei_flag runRestrictRef
  4. tplink连接服务器失败_管家婆财贸双全连接失败，服务器端没有找到加密狗
  5. python pip install syntaxerror_解决pip install xxx报错SyntaxError: invalid syntax的问题
  6. 《天天数学》连载08：一月八日
  7. 为什么农村出来的大学生大多混得比较差？
  8. python基础之-数据类型
  9. 对HGE游戏引擎的一次封装
  10. 获取指定年份至今年分列表
  11. dede图片轮播php代码,织梦图片集利用JS输出图片轮播
  12. python中__call__方法_Python中__call__用法实例
  13. 高中计算机整人代码完整,整人代码 VBS整人代码大全
  14. 微信公众号推送的模板消息无法跳转到小程序指定页面？
  15. google 图片搜索API
  16. JDK19都出来了~是时候梳理清楚JDK的各个版本的特性了【JDK17特性讲解】
  17. 分享：实时语音通讯，可广域网实时通讯，音质清晰流畅！
  18. 数组中相同id的其他属性进行拼接的方法
  19. jq bind命名空间
  20. LeetCode报错：Line 1034：Char9

热门文章

  1. Python非常适合副业，以私单的形式接一些小型项目
  2. Android 如何获取传感器的数据
  3. pychar调试报错：Cython extension speeds up Python debugging
  4. CANopen通讯基础
  5. 记录一次生产CPU使用率100%问题排查
  6. nz-tree的右键菜单的实现， 以及选中状态的实现
  7. compareAndSet
  8. 设计模式17-门面模式
  9. T23,雄关漫道真如铁，而今迈步还需从头越
  10. 白鹭引擎开发微信小游戏进阶教程文档