AJAX之XMLHTTPRequest对象
AJAX不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的 Web 应用程序的技术。
使用Javascript向服务器提出请求并处理响应而不阻塞用户!核心对象XMLHTTPRequest。通过这个对象,您的 JavaScript 可在不重载页面的情况与Web服务器交换数据。
在浏览器与 Web 服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面。
AJAX 可使因特网应用程序更小、更快,更友好。
是一种独立于 Web 服务器软件的浏览器技术。AJAX 应用程序独立于浏览器和平台。
XMLHTTPRequest对象
最通用的定义为:XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收 XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。(这个功能正是AJAX的一大特点之一))
创建一个XMLHTTPRequest 并初始化
var http_request = false; function makeRequest(url, content, handler)
{ http_request = false; if (window.XMLHttpRequest) {
//判断是否把XMLHTTPRequest实现为一个本地javascript对象
//其他浏览器、作为一个本地JavaScript对象而不是作为一个ActiveX对象实现
http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) { http_request.overrideMimeType('text/xml'); } } else if (window.ActiveXObject) {
// 判断是否支持ActiveX控件
//微软在其Internet Explorer(IE) 5中作为一个ActiveX对象形式引入了XMLHttpRequest对象
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) {} } } if (!http_request) { alert('Giving up :( Cannot create an XMLHTTP instance'); return false; } http_request.onreadystatechange = handler; http_request.open('POST', url, true); http_request.send(content); }
方法:open (XMLHTTPRequest对象的)
创建一个新的http请求,并指定此请求的方法、URL以及验证信息
语法:http_request.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
参数
bstrMethod
http方法,例如:POST、GET、PUT及PROPFIND。大小写不敏感。
bstrUrl
请求的URL地址,可以为绝对地址也可以为相对地址。
varAsync[可选]
布尔型,指定此请求是否为异步方式,默认为true。如果为真,当状态改变时会调用onreadystatechange属性指定的回调函数。
bstrUser[可选]
如果服务器需要验证,此处指定用户名,如果未指定,当服务器需要验证时,会弹出验证窗口。
bstrPassword[可选]
验证信息中的密码部分,如果用户名为空,则此值将被忽略。
备注:调用此方法后,可以调用send方法向服务器发送数据。
xmlhttp.Open("get", "http:localhost/example.htm", false);
属性:onreadystatechange
onreadystatechange:指定当readyState属性改变时的事件处理句柄
语法:http_request.onreadystatechange = funcMyHandler;
当XMLHTTPRequest对象的readyState属性改变时调用funcMyHandler函数,
当数据接收完毕后(readystate == 4)此页面上的一个按钮将被激活
备注:此属性只写,为W3C文档对象模型的扩展.
注意:onreadystatechange事件
无论readyState值何时发生改变,XMLHttpRequest对象都会激发一个readystatechange事件。其 中,onreadystatechange属性接收一个
EventListener值-向该方法指示无论readyState值何时发生改变,该对象都将 激活。
方法:send
发送请求到http服务器并接收回应
语法:http_request.send(varBody);
参数:varBody (欲通过此请求发送的数据。)
属性:readyState
返回XMLHTTP请求的当前状态
语法:lValue = http_request.readyState;
备注:变量,此属性只读,状态用长度为4的整型表示.定义如下:
0 (未初始化) 对象已建立,但是尚未初始化(尚未调用open方法)
1 (初始化) 对象已建立,尚未调用send方法
2 (发送数据) send方法已调用,但是当前的状态及http头未知
3 (数据传送中) 已接收部分数据,因为响应及http头不全,这时通过responseBody和responseText获取部分数据会出现错误,
4 (完成) 数据接收完毕,此时可以通过通过responseBody和responseText获取完整的回应数据
属性:responseText
将响应信息作为字符串返回
语法:strValue = http_request.responseText;
备注:变量,此属性只读,将响应信息作为字符串返回。XMLHTTP尝试将响应信息解码为Unicode字符串,
属性:status
返回当前请求的http状态码
语法:lValue = http_request.status;
返回值:长整形标准http状态码,定义如下:
Number:Description
100:Continue
101:Switching protocols
200:OK
201:Created
202:Accepted
203:Non-Authoritative Information
204:No Content
205:Reset Content
206:Partial Content
300:Multiple Choices
301:Moved Permanently
302:Found
303:See Other
304:Not Modified
305:Use Proxy
307:Temporary Redirect
400:Bad Request
401:Unauthorized
402:Payment Required
403:Forbidden
404:Not Found
405:Method Not Allowed
406:Not Acceptable
407:Proxy Authentication Required
408:Request Timeout
409:Conflict
410:Gone
411:Length Required
412:Precondition Failed
413:Request Entity Too Large
414:Request-URI Too Long
415:Unsupported Media Type
416:Requested Range Not Suitable
417:Expectation Failed
500:Internal Server Error
501:Not Implemented
502:Bad Gateway
503:Service Unavailable
504:Gateway Timeout
505:HTTP Version Not Supported
备注:长整形,此属性只读,返回当前请求的http状态码,此属性仅当数据发送并接收完毕后才可获取。
(局部刷新也可以直接使用JQ提供的API $.get方法,$.post方法,$.getJson方法,$.ajax 但要注意浏览器支持问题)