1、当在浏览器地址栏中输入网页地址,或者提交表单时,便通过浏览器向Web服务器发送了HTTP请求,HTTP协议规定了Web浏览器如果向Web服务器请求文档,浏览器如何提交表单,Web服务器如何响应客户端请求,以及客户端如何接受及处理服务器响应。
详见《HTTP协议讲解》
通常情况下,向服务器发送请求,以及接收处理服务器端响应的工作是又浏览器完成。并不是通过JavaScript等客户端脚本完成的。当单击某个超链接时,或者单击提交按钮,或者点击某个定义的超链接时,浏览器便向服务器端发送请求。
而目前的大部分浏览器均支持脚本发送HTTP请求,并能够通过脚本处理服务器的响应结果,也就是说,可以通过脚本向Web服务器发送GET或POST请求,并通过脚本操作服务器端返回的响应内容。这种能力使客户端能够隐式的向服务器发送请求,并处理请求结果,但却并不影响客户端用户界面,
2、XMLHttpRequest对象
通过脚本处理HTTP请求的能力是基于浏览器提供的XMLHttpRequest对象,该对象提供对HTTP协议的完全访问,通过该对象提供的方法,能够向服务器发送POST或GET请求,并且,能够很容易的获取服务器返回的请求结果。Web服务器的请求结果可以以同步或者异步方式返回。可以是文本的形式或者DOM文档的形式。
XMLHttpRequest对象并未标准化,在IE较早的版本中,该对象在IE与其他浏览器中的名称、创建方式并不同。但他们提供相同的功能,所以一般将他们统一称为XMLHttpRequest对象,由W3C起草的标准草案中也采用的是XMLHttpRequest,XMLHttpRequest对象源自微软的创建XMLHTTP请求对象,该对象在处理普通HTTP请求的功能上添加了发送和接收XML代码的功能,但是该对象并不仅限于发送和接收XML代码,它可以接收任何形式的内容。
IE中的XMLHttpRequest对象是一个ActiveX控件对象,需要通过ActiveXObject()构造函数创建,例如:
var xml_request=new ActiveXObject("MSXML2.XMLHTTP");
在IE不同的版本中,所支持XML HTTP库的版本不同,在较新的版本中支持“MSXML2.XMLHTTP”,在较早的IE版本中支持“Microsoft.XMLHTTP”,因此,创建XMLHttpRequest对象时,需要根据用户浏览器中支持的XML HTTP库德版本想ActiveXObject()构造函数传递不同的参数。
下面的代码根据IE支持的XML HTTP库的版本创建相应的XMLHttpRequest对象。
var xml_http_arr=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
var xml_request;
for(var i=0;i<xml_http_arr.length;i++){
if(xml_request = new ActiveXObject(xml_http_arr.length[i]))
break;
}
由于XML HTTP对象的强大功能,Mozilla在浏览器中复制看该对象,实现了名为XMLHttpRequest的对象,该对象与IE浏览器中处理XML HTTP的对象完成完全相同的功能,具有相同的属性和方法,其他浏览器也同样实现了自己的XMLHttpRequest对象,在这些浏览器中直接通过XMLHttpRequest()构造函数创建XMLHttpRequest对象,例如:
var xml_http_request=new XMLHttpRequest();
IE7中同样提供XMLHttpRequest()构造函数来创建XMLHttpRequest对象,但在IE7之前的版本中,需要通过ActiveXObject()构造函数创建,可以通过下面的脚步实现兼容各种浏览器版本的创建方法。
if(typeof(XMLHttpRequest)=='undefined' && window.ActiveXObject){
funciton XMLHttpRequest(){
var xml_http_arr=["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
var xml_request;
for(var i=0;i<xml_http_arr.length;i++){
if(xml_request = new ActiveXObject(xml_http_arr.length[i]))
break;
}
return xml_request;
}
}
var xml_http_request=new XMLHttpRequest();
由于不支持XMLHttpRequest()构造方法的浏览器(即IE7之前的版本),通过自定义一个XMLHttpRequest()函数创建XMLHttpRequest对象,在该函数中通过ActiveXObject方法创建该对象。
3、 无论是IE早期版本,还是最新的IE7,以及Mozilla和Safari等浏览器,XMLHttpRequest对象的功能特性是相同的。均定义一下的属性和请求。
(1)、readyState属性
该属性是一个只读属性,表示当前HTTP请求状态,该属性值是一个0-4的整数,分别表示HTTP请求发送和接收的不同状态,该值在操作HTTP请求的过程中自动更新,各值含义如下:
- 当创建一个XMLHttpRequest对象时,属性值为0.
- 当已经调用open()方法对HTTP进行初始化,但是还未调用send()方法请求时,属性值为1,表示HTTP请求已打开。
- 当已经调用了send()方法发送了请求,但还未接到服务器响应时,属性值为2,表示HTTP请求已发送。
- 当以及那个接收到响应头,但响应内容还没有接收完时,属性值为3,表示正在接收响应内容。
- 当所有的响应内容已被全部接收完毕时,属性值为4.
(2)、responseTest属性
该属性为只读字符串型属性,表示当前已经从服务器接收到的响应内容。
该属性内容不包括响应头,只包括响应体,因此,当readyState属性小于3时,该属性为空字符串,当readState属性为4时,该属性包含了服务器响应的完整内容。
(3)、responseXML属性
只读属性,该属性将响应内容解析为XML格式,并以document对象方式返回。返回的document对象可以通过DOM API进行处理。
只有在下列3个条件均成立时,该属性才不为空。
- readyState属性为4.
- 响应头包括"text/xml","application/xml"等以"/xml"结尾的content-type,表示响应内容的类型为XML。
- 响应的内容是由正确的XML标记组成。
(4)、status属性
只读整数属性,表示由服务器返回的HTTP状态代码。属性值为3位的整数,0xx表示请求未初始化,1xx表示服务器接收到请求,需要进一步处理,2xx表示接收到请求,正在进行分析处理,3xx表示正在进一步处理,4xx表示请求包含错误,5xx表示执行有效请求出错,一些常用状态含义如下:100表示客户端必须继续发送请求,200表示请求成功,201表示已创建,202表示请求已接收,但处理未完成。204表示响应内容为空,205表示服务器完成了请求,必须重置当前已经浏览过的文件,304表示客户端已经执行了GET,但文件未变化,404表示not found错误,401表示请求授权失败,403表示请求不允许,413表示请求资源大于服务器允许的大小。
(5)、statusText属性
该属性是status属性的字符串形式,以字符串的形式返回HTTP的状态。
(6)、abort()方法
取消HTTP请求,将readState属性设置为0,并取消所有未完成的动作。
(7)、getAllResponseHeaders()方法。
以字符串形式返回未解析的HTTP响应头的全部内容。如果readyState属性小于3,饿该方法返回null,所有头部内容做为一个字符串返回,在该字符串中,一行对应于一个HTTP头的内容,每个头尾部用"\r\n"换行。
例如:
下面时getAllResponseHeaders()返回的某个请求的HTTP头内容。
HTTP/1.1 200 OK
Date: Mon, 12 Mar 2004 19:12:16 GMT
Server: Apache/1.3.31 (Unix) mod_throttle/3.1.2
Last-Modified: Fri, 22 Sep 2004 14:16:18
ETag: "dd7b6e-d29-39cb69b2"
Accept-Ranges: bytes
Content-Length: 3369
Connection: close
Content-Type: text/html;charset=gb3212
(8)、getResponseHeader(header_name)方法
以字符串形式返回指定HTTP头的内容,参数header_name为要返回的HTTP头的名称。
例如:
返回"Content_Type"的内容
var con_type=xml_http_request.getResponseHeader("Content_Type");
(9)、open(method,url,asynchronous,usename,pwd)方法
该方法初始化HTTP请求,设置send方法需要的HTTP请求参数,并重置XMLHttpRequest对象。
[list]
参数method表示请求的方式,可以使"GET","POST","HEAD";
参数url表示请求的页面URL地址,一般情况下,脚本采用同源安全策略,允许脚本访问的URL地址必须是与当前页面具有相同的主机名和端口。对URL地址的解析。以当前脚本所在文章的URL地址做为参照。例如:地址
“./http_test.php”
表示与当前文档位于同一路径下的http_test.php文件,符号“/”表示服务器文件跟目录,如果脚本所在页面为“http:www.cctv.com/news/index.html”,其域名为"www.cctv.com",则url地址为:
“/finance/news_list.php”
表示文件“http://www.cctv.com/finance/news_list.php”.
参数asynchronous为布尔值,表示是否采用异步执行,当设置为false时,请求时同步的。资源是独立的。在同步情况下,当通过send()发出请求后,send()方法将等待服务器的响应直到所有响应为完全接收时才返回,总之用户等待时间漫长。而且用户不能进行其他操作,如果设置为true,请求异步,在异步情况下,当send()方法发送请求后立即返回,服务器在后台处理请求时,客户端仍然可以进行其他操作。这种情况下,客户端需要等待的时间只是send()方法执行的时间,而且这时间可以忽略不计。默认参数为true
username和pwd是可选的参数,表示访问目标URL的授权用户名和密码。
当open()方法调用后,将属性readyState属性设置为3.
open()方法使用如下:
xml_http_request.open("GET","/http_test.php","true");
[/list]
(10)、send(body)方法
该方法发送HTTP请求,open()方法设置请求的参数,但不向服务器发送请求,需要通过send()方法向服务器发送请求。
参数body表示请求体,是一个字符串或者document对象。如果不需要请求体,则该参数为null,对于post对象,该参数是要传送的数据。对于GET方法,该参数为NULL,大部分浏览器不允许省略该参数。
在调用send()方法之前,必须调用open()方法设置请求参数,如果之前未调用open方法,将产生异常。
send()方法发送请求的方式取决于open()方法中的asynchronous参数。当该参数设置为false时,send()方法发送请求后将等待服务器响应,直到所有响应内容被收到,readyState属性状态为4,send()方法才返回。在这个过程中,客户端无法进行其他操作。当open()方法设置异步方式时,send()方法发送请求后立即返回,服务器的响应将在后台中进行处理,在异步请求时,在服务器处理请求的过程中,并不影响客户端的其他操作。
(11)、setRequestHeader(name,value)方法
为请求设置指定头的内容。参数name为HTTP头的内容,名称中不包括空白、冒号、换行符;value为头的内容,不包括换行。
该方法只能在readyState为1时,即在open()方法之后,send()方法之前进行调用。对于一些HTTP头,XMLRequest对象设置一个默认值,通过setRequestHeader()设置的值将添加咋默认值后面,以逗号隔开。
下面的头由XMLHttpRequest自动设置,并不通过该方法设置:
Host、Connection、Keep-Alive、Accept-Charset、Accept-Encoding、if-Modified-Since、if-Range 和Range、if-None-Match。
分享到:
相关推荐
"AJAX原理与技术的深入分析" AJAX(Asynchronous JavaScript and XML)是一种异步通信技术,允许Web应用程序异步地从服务器请求数据,而不需要重新加载整个网页。下面我们将深入分析AJAX的原理、技术、意义和发展...
总结来说,通过jQuery的AJAX处理跨域请求,主要依赖于CORS和JSONP两种方式。CORS更强大,支持更多类型的请求,但需要服务器配合设置相应头部;JSONP则简单易用,适用于只需GET请求的情况。在实际项目中,开发者应...
**AJAX异步处理原理分析** AJAX,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种在不刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现局部...
你可以从“Ajax与Serverlet原理及应用”这个文件开始,逐步学习这两个技术的细节,包括它们如何协同工作以创建高效的Web应用程序。 总的来说,Ajax和Servlet的结合使用能够提供高性能、高度交互的Web界面,极大地...
传统的Web应用模型基于请求-响应模式,即用户每发起一次操作都需要浏览器发送HTTP请求至服务器,并等待服务器处理后返回全新的网页。这种模式不仅效率低下,还导致用户体验不佳,尤其是在高并发场景下服务器压力巨大...
### AJAX原理及用法 #### 一、什么是Ajax技术? Ajax(Asynchronous JavaScript and XML,异步JavaScript与XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。通过在后台与服务器进行少量数据...
4. **AJAX原理**:Ajax的核心是XMLHttpRequest对象,它允许在后台与服务器进行通信。了解如何创建XMLHttpRequest对象,发送HTTP请求,处理响应,以及异步回调函数的使用,是掌握Ajax的关键。 5. **JSON与数据传输**...
Ajax Hook允许我们捕获并修改发送到服务器的Ajax请求以及接收到的响应,从而增强我们的应用功能。 首先,我们需要理解Ajax请求的基本原理。Ajax,即异步JavaScript和XML,是一种创建动态网页的技术。它允许我们在不...
传统的Web应用通常采用浏览器发送请求、服务器处理并返回完整页面的方式,这种方式存在明显的缺点:每次与服务器交互都需要完全刷新页面,不仅耗时较长,而且用户体验较差。为了解决这些问题,Ajax技术应运而生。 #...
**Ajax原理的理解** Ajax,全称为Asynchronous JavaScript and XML,是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它的出现极大地提升了Web应用程序的用户体验,因为它允许数据在后台与服务器...
### Ajax原理与应用知识点详解 #### 一、Ajax技术背景 - **背景介绍**:Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这项技术最早出现在2005年左右,...
在现代Web开发中,...通过分析和运行这些示例,可以更好地理解Ajax请求的工作原理,以及如何在遇到问题时进行有效的调试。记住,良好的调试技巧是每个开发者的必备技能,这不仅能帮助解决问题,还能提高开发效率。
清单2展示了如何捕获readyState为0的特殊情况,虽然这种情况在实际应用中较少见,但了解其工作原理有助于增强对整个请求过程的理解。 总之,掌握Ajax的高级请求和响应意味着要深入了解HTTP通信的细节,包括状态代码...
实现Ajax通常涉及编写JavaScript代码来处理事件、创建XMLHttpRequest对象、设置请求参数、监听状态变化并执行回调函数来更新页面内容。回调函数通常会检查请求的状态和响应数据,然后根据需要执行相应操作。 总的...
在Ajax请求中,可以通过JSON.stringify()将JavaScript对象转换为JSON字符串发送给服务器,服务器处理后返回JSON数据,再通过JSON.parse()解析成JavaScript对象。 **4. jQuery与Ajax** jQuery库简化了Ajax操作,...
总结来说,AJAX技术在用户登录模块的应用,通过异步通信提升了交互体验,简化了服务器处理,实现了更高效的网页操作。在实际开发中,开发者还可以结合其他前端框架和库(如jQuery,Vue.js,React等)进一步优化这一...
在本文中,我们将深入探讨如何在Spring MVC框架中处理AJAX请求。AJAX(Asynchronous JavaScript and XML)是一种创建动态网页的技术,允许在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。Spring ...
**Ajax原理详解** Ajax,全称为"Asynchronous JavaScript and XML",是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。Ajax的核心是JavaScript对象XMLHttpRequest,它允许在后台与服务器交换数据并...
**二、Ajax分页原理** 在分页场景下,Ajax的主要任务是向服务器发送请求,获取指定页码的数据,然后将这些数据插入到页面的适当位置。通常,这个过程包括以下步骤: 1. 用户点击分页链接或按钮。 2. JavaScript捕获...