深入了解 HTTP 就绪状态
状态最常见有这几种:
-
0
:请求未初始化(还没有调用
open()
)。
-
1
:请求已经建立,但是还没有发送(还没有调用
send()
)。
-
2
:请求已发送,正在处理中(通常现在可以从响应中获取内容头)。
-
3
:请求在处理中;通常响应中已有部分数据可用了,但是服务器还没有完成响应的生成。
-
4
:响应已完成;您可以获取并使用服务器的响应了
。
注意在各个浏览器处理这些就绪状态并不一致。你可以通过
request.readyState 得到不同的就绪状态。
同时也可以在不同的状态中返回的数据是不同的,在状态3中的数据是不完整的。
深入了解 HTTP 状态代码
Web 浏览器中您可能已经看到过几个状态代码:
-
401
:未经授权
-
403
:禁止
-
404
:没找到
在我们写ajax代码中经常会写这句话
request.status==200
重定向和重新路由
在使用 Ajax 时 并不需要
关心的问题 —— 重定向。在 HTTP 状态代码中,这是 300 系列的状态代码,包括:
-
301
:永久移动
-
302
:找到(请求被重新定向到另外一个 URL/URI 上)
-
305
:使用代理(请求必须使用一个代理来访问所请求的资源)
Ajax 程序员可能并不太关心有关重定向的问题,这是由于两方面的原因:
-
首先,Ajax 应用程序通常都是为一个特定的服务器端脚本、servlet
或应用程序而编写的。对于那些您看不到就消失了的组件来说,Ajax
程序员就不太清楚了。因此有时您会知道资源已经移动了(因为您移动了它,或者通过某种手段移动了它),接下来要修改请求中的
URL,并且不会再碰到这种结果了。
-
更为重要的一个原因是:Ajax 应用程序和请求都是封装在沙盒中的。这就意味着提供生成 Ajax 请求的 Web
页面的域必须是对这些请求进行响应的域。因此 ebay.com 所提供的 Web 页面就不能对一个在 amazon.com 上运行的脚本生成一个
Ajax 风格的请求;在 ibm.com 上的 Ajax 应用程序也无法对在 netbeans.org 上运行的 servlets 发出请求。
生成HEAD请求
实际上生成 HEAD 请求非常简单;您可以使用 "HEAD"(而不是 "GET" 或 "POST")作为第一个参数来调用 open()
方法
function getSalesData() {
createRequest();
var url = '${url}';
request.open("HEAD"
, url, true);
request.onreadystatechange = rollback;
request.send(null);
}
当您这样生成一个 HEAD 请求时,服务器并不会像对 GET 或 POST 请求一样返回一个真正的响应。相反,服务器只会返回资源的 头(header)
,这包括响应中内容最后修改的时间、请求资源是否存在和很多其他有用信息。您可以在服务器处理并返回资源之前使用这些信息来了解有关资源的信息。
function rollback() {
if (request.readyState == 4) {
alert(request.getAllResponseHeaders());
}
}
有用的 HEAD 请求
您会发现 HEAD
请求非常有用的一个领域是用来查看内容的长度或内容的类型。这样可以确定是否需要发回大量数据来处理请求,和服务器是否试图返回二进制数据,而不是
HTML、文本或 XML(在 JavaScript 中,这 3 种类型的数据都比二进制数据更容易处理)。
在这些情况中,您只使用了适当的头名,并将其传递给 XMLHttpRequest
对象的 getResponseHeader()
方法。因此要获取响应的长度,只需要调用 request.getResponseHeader("Content-Length");
。要获取内容类型,请使用 request.getResponseHeader("Content-Type");
。
分享到:
相关推荐
Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的...通过这个Ajax入门例子项目,新手可以动手实践,逐步理解Ajax的工作原理,并掌握如何在实际项目中应用Ajax技术,提升网页的交互性和用户体验。
在信息技术快速发展的今天,Web开发人员正面临着如何提高网站性能和用户体验的挑战。...通过本书,希望能够帮助更多的Web开发人员从Ajax入门到精通,从而在快速变化的Web技术领域中始终保持竞争力。
在“ajax_入门实例_”这个主题中,可能涉及的实例包括创建一个简单的Ajax请求,向服务器获取数据并更新页面内容。例如,我们可以创建一个按钮,点击后发送Ajax请求获取JSON数据,并将数据展示在一个列表中。 ```...
**三、Ajax请求类型** - **GET**:默认请求类型,用于获取资源。请求参数附加在URL后面,有长度限制。 - **POST**:用于向服务器提交数据,数据放在请求体中,无长度限制,适用于大量或复杂数据的传输。 **四、Ajax...
**Ajax经典入门详解** Ajax(Asynchronous JavaScript and XML)是一种创建动态网页的技术,它使得网页可以在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。Ajax的核心是利用JavaScript和...
- 由于同源策略限制,Ajax请求通常只能访问同源的资源。但可以通过JSONP、CORS(跨源资源共享)等方式实现跨域请求。 6. **安全性与性能优化** - **安全**:防止XSS(跨站脚本攻击)和CSRF(跨站请求伪造)等攻击...
### AJAX入门知识点详解 #### 一、引言 AJAX(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的...在未来的学习和开发过程中,我们可以进一步探索AJAX的高级应用,比如错误处理、安全性考虑等方面。
3. JavaScript:JavaScript是实现Ajax的核心,它负责创建和控制Ajax请求,处理服务器返回的数据,并更新网页内容。例如,`document.getElementById()`方法用于获取HTML元素,`window.id.value`用于获取或设置元素的...
4. **错误处理**:了解如何捕获和处理Ajax请求中的错误,提供良好的用户体验。 5. **最佳实践**:包括性能优化,如减少HTTP请求,缓存策略,以及如何避免阻塞用户界面。 在提供的文件`ajax.chm`中,很可能包含了...
**三、高级请求和响应** 在“掌握Ajax,第3部分 - Ajax中的高级请求和响应.mht”中,你将学习到更复杂的Ajax应用技巧。这包括POST请求、处理错误、使用跨域请求(CORS)以及与不同类型的服务器端接口(如RESTful API...
**Ajax(Asynchronous JavaScript and XML)**是一种在无需重新加载整个...通过阅读这份"ajax入门教程PDF",初学者将能够快速理解Ajax的工作方式,掌握基本的Ajax编程技能,从而在实际项目中提升网页的交互性和动态性。
4. **XMLHttpRequest对象**:这是Ajax的核心,用于异步地向服务器发送请求和接收响应。 5. **JavaScript**:将所有这些元素绑定在一起,处理和解析接收到的数据,以及控制用户界面的更新。 **Ajax的工作原理** 在...
总的来说,这个"AJAX入门实例"旨在帮助初学者理解AJAX的基本概念和工作流程,以及如何在ASP.NET环境中实现它。通过学习这个实例,你可以掌握创建异步Web应用的基本技巧,提高用户体验,并为后续更复杂的AJAX应用场景...
**Ajax技术概述** Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。...《Ajax入门教程》中的经典小例子,无疑是学习和实践Ajax技术的良好起点。
因为Ajax请求不会导致整个页面刷新,所以传统的前进/后退按钮可能无法正常工作。开发者需要通过编程方式管理浏览器的历史状态,例如使用`history.pushState()`或`history.replaceState()`方法。 2. **相关技术点** ...
**Ajax经典入门案例详解** Ajax,全称异步JavaScript和XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了用户体验。在Web...
**Ajax入门:无刷新技术与JavaScript中的Ajax** Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器交换数据并局部更新页面,使得用户...
Ajax请求的生命周期 1. 创建XMLHttpRequest对象。 2. 使用`open()`方法初始化请求。 3. 设置`onreadystatechange`事件处理函数,当请求状态变化时执行。 4. 使用`send()`方法发送请求。 5. 检查`readyState`属性,...