[js点击]JavaScript之Ajax技术01
2016-11-19 23:50
645 查看
AJAX
浏览器与服务器之间,采用HTTP协议通信。用户在浏览器地址栏键入一个网址,或者通过网页表单向服务器提交内容,这时浏览器就会向服务器发出HTTP请求。1999年,微软公司发布IE浏览器5.0版,第一次引入新功能:允许JavaScript脚本向服务器发起HTTP请求。这个功能当时并没有引起注意,直到2004年Gmail发布和2005年Google Map发布,才引起广泛重视。2005年2月,AJAX这个词第一次正式提出,指围绕这个功能进行开发的一整套做法。从此,AJAX成为脚本发起HTTP通信的代名词,W3C也在2006年发布了它的国际标准。
具体来说,AJAX包括以下几个步骤。
创建AJAX对象
发出HTTP请求
接收服务器传回的数据
更新网页数据
概括起来,就是一句话,AJAX通过原生的
XMLHttpRequest对象发出HTTP请求,得到服务器返回的数据后,再进行处理。
AJAX可以是同步请求,也可以是异步请求。但是,大多数情况下,特指异步请求。因为同步的Ajax请求,对浏览器有“堵塞效应”。
XMLHttpRequest对象
XMLHttpRequest对象用来在浏览器与服务器之间传送数据。
var ajax = new XMLHttpRequest(); ajax.open('GET', 'http://www.example.com/page.php', true);
上面代码向指定的服务器网址,发出GET请求。
然后,AJAX指定回调函数,监听通信状态(
readyState属性)的变化。
ajax.onreadystatechange = handleStateChange;
一旦拿到服务器返回的数据,AJAX不会刷新整个网页,而是只更新相关部分,从而不打断用户正在做的事情。
注意,AJAX只能向同源网址(协议、域名、端口都相同)发出HTTP请求,如果发出跨源请求,就会报错(详见《同源政策》和《CORS机制》两节)。
虽然名字里面有
XML,但是实际上,XMLHttpRequest可以报送各种数据,包括字符串和二进制,而且除了HTTP,它还支持通过其他协议传送(比如File和FTP)。
下面是
XMLHttpRequest对象的典型用法。
var xhr = new XMLHttpRequest(); // 指定通信过程中状态改变时的回调函数 xhr.onreadystatechange = function(){ // 通信成功时,状态值为4 if (xhr.readyState === 4){ if (xhr.status === 200){ console.log(xhr.responseText); } else { console.error(xhr.statusText); } } }; xhr.onerror = function (e) { console.error(xhr.statusText); }; // open方式用于指定HTTP动词、请求的网址、是否异步 xhr.open('GET', '/endpoint', true); // 发送HTTP请求 xhr.send(null);
open方法的第三个参数是一个布尔值,表示是否为异步请求。如果设为
false,就表示这个请求是同步的,下面是一个例子。
var request = new XMLHttpRequest(); request.open('GET', '/bar/foo.txt', false); request.send(null); if (request.status === 200) { console.log(request.responseText); }
XMLHttpRequest实例的属性
readyState
readyState是一个只读属性,用一个整数和对应的常量,表示XMLHttpRequest请求当前所处的状态。
0,对应常量
UNSENT,表示XMLHttpRequest实例已经生成,但是
open()方法还没有被调用。
1,对应常量
OPENED,表示
send()方法还没有被调用,仍然可以使用
setRequestHeader(),设定HTTP请求的头信息。
2,对应常量
HEADERS_RECEIVED,表示
send()方法已经执行,并且头信息和状态码已经收到。
3,对应常量
LOADING,表示正在接收服务器传来的body部分的数据,如果
responseType属性是
text或者空字符串,
responseText就会包含已经收到的部分信息。
4,对应常量
DONE,表示服务器数据已经完全接收,或者本次接收已经失败了。
在通信过程中,每当发生状态变化的时候,
readyState属性的值就会发生改变。这个值每一次变化,都会触发
readyStateChange事件。
if (ajax.readyState == 4) { // Handle the response. } else { // Show the 'Loading...' message or do nothing. }
上面代码表示,只有
readyState变为4时,才算确认请求已经成功,其他值都表示请求还在进行中。
onreadystatechange
onreadystatechange属性指向一个回调函数,当
readystatechange事件发生的时候,这个回调函数就会调用,并且XMLHttpRequest实例的
readyState属性也会发生变化。
另外,如果使用
abort()方法,终止XMLHttpRequest请求,
onreadystatechange回调函数也会被调用。
var xmlhttp = new XMLHttpRequest(); xmlhttp.open( 'GET', 'http://example.com' , true ); xmlhttp.onreadystatechange = function () { if ( XMLHttpRequest.DONE != xmlhttp.readyState ) { return; } if ( 200 != xmlhttp.status ) { return; } console.log( xmlhttp.responseText ); }; xmlhttp.send();
response
response属性为只读,返回接收到的数据体(即body部分)。它的类型可以是ArrayBuffer、Blob、Document、JSON对象、或者一个字符串,这由
XMLHttpRequest.responseType属性的值决定。
如果本次请求没有成功或者数据不完整,该属性就会等于
null。
responseType
responseType属性用来指定服务器返回数据(
xhr.response)的类型。
”“:字符串(默认值)
“arraybuffer”:ArrayBuffer对象
“blob”:Blob对象
“document”:Document对象
“json”:JSON对象
“text”:字符串
text类型适合大多数情况,而且直接处理文本也比较方便,document类型适合返回XML文档的情况,blob类型适合读取二进制数据,比如图片文件。
var xhr = new XMLHttpRequest(); xhr.open('GET', '/path/to/image.png', true); xhr.responseType = 'blob'; xhr.onload = function(e) { if (this.status == 200) { var blob = new Blob([this.response], {type: 'image/png'}); // 或者 var blob = oReq.response; } }; xhr.send();
如果将这个属性设为ArrayBuffer,就可以按照数组的方式处理二进制数据。
var xhr = new XMLHttpRequest(); xhr.open('GET', '/path/to/image.png', true); xhr.responseType = 'arraybuffer'; xhr.onload = function(e) { var uInt8Array = new Uint8Array(this.response); for (var i = 0, len = binStr.length; i < len; ++i) { // var byte = uInt8Array[i]; } }; xhr.send();
如果将这个属性设为“json”,支持JSON的浏览器(Firefox>9,chrome>30),就会自动对返回数据调用
JSON.parse()方法。也就是说,你从xhr.response属性(注意,不是xhr.responseText属性)得到的不是文本,而是一个JSON对象。
XHR2支持Ajax的返回类型为文档,即xhr.responseType=”document” 。这意味着,对于那些打开CORS的网站,我们可以直接用Ajax抓取网页,然后不用解析HTML字符串,直接对XHR回应进行DOM操作。
responseText
responseText属性返回从服务器接收到的字符串,该属性为只读。如果本次请求没有成功或者数据不完整,该属性就会等于
null。
如果服务器返回的数据格式是JSON,就可以使用
responseText属性。
var data = ajax.responseText; data = JSON.parse(data);
responseXML
responseXML属性返回从服务器接收到的Document对象,该属性为只读。如果本次请求没有成功,或者数据不完整,或者不能被解析为XML或HTML,该属性等于
null。
返回的数据会被直接解析为DOM对象。
/* 返回的XML文件如下 <?xml version="1.0" encoding="utf-8" standalone="yes" ?> <book> <chapter id="1">(Re-)Introducing JavaScript</chapter> <chapter id="2">JavaScript in Action</chapter> </book> */ var data = ajax.responseXML; var chapters = data.getElementsByTagName('chapter');
如果服务器返回的数据,没有明示
Content-Type头信息等于
text/xml,可以使用
overrideMimeType()方法,指定XMLHttpRequest对象将返回的数据解析为XML。
status
status属性为只读属性,表示本次请求所得到的HTTP状态码,它是一个整数。一般来说,如果通信成功的话,这个状态码是200。
200, OK,访问正常
301, Moved Permanently,永久移动
302, Move temporarily,暂时移动
304, Not Modified,未修改
307, Temporary Redirect,暂时重定向
401, Unauthorized,未授权
403, Forbidden,禁止访问
404, Not Found,未发现指定网址
500, Internal Server Error,服务器发生错误
基本上,只有2xx和304的状态码,表示服务器返回是正常状态。
if (ajax.readyState == 4) { if ( (ajax.status >= 200 && ajax.status < 300) || (ajax.status == 304) ) { // Handle the response. } else { // Status error! } }
statusText
statusText属性为只读属性,返回一个字符串,表示服务器发送的状态提示。不同于
status属性,该属性包含整个状态信息,比如”200 OK“。
timeout
timeout属性等于一个整数,表示多少毫秒后,如果请求仍然没有得到结果,就会自动终止。如果该属性等于0,就表示没有时间限制。
var xhr = new XMLHttpRequest(); xhr.ontimeout = function () { console.error("The request for " + url + " timed out."); }; xhr.onload = function() { if (xhr.readyState === 4) { if (xhr.status === 200) { callback.apply(xhr, args); } else { console.error(xhr.statusText); } } }; xhr.open("GET", url, true); xhr.timeout = timeout; xhr.send(null); }
[js点击]JavaScript之AJAX技术02
相关文章推荐
- [js点击]JavaScript之Ajax技术01
- [js点击]JavaScript之Ajax技术之02
- [js点击]JavaScript之Ajax技术02
- [js点击]JavaScript之Ajax技术02
- [js点击]JavaScript之原生触摸事件详解01
- JavaScript:全面解析Ajax跨站数据传输和iframe跨域名js调用
- 动态创建表格js文件,javascript,Ajax,DHTML动态实现表格的创建,动态读取XML中的文件,读取dom节点的例子。
- 本周ASP.NET英文技术文章推荐[02/24 - 03/01]:Silverlight、AJAX、Web Client Software Factory、LINQ、上传文件、GDI+
- 【收藏】本周ASP.NET英文技术文章推荐[02/24 - 03/01]:Silverlight、AJAX、Web Client Software Factory、LINQ、上传文件、GDI+
- JavaScript:全面解析Ajax跨站数据传输和iframe跨域名js调用
- 你应该知道的20个Ajax技术(01-10)
- 多款较经典的JS下拉菜单 - Javascript/Ajax - 网海拾贝 | 电脑教程软件资讯网
- 读GI源码、学JS编程——Javascript动态加载技术。
- 70个新鲜实用的JavaScript和Ajax技术[收藏]
- 基于对象的JavaScript实现无刷新页面发送和获取数据Ajax.js
- ASP.Net中利用AJAX、JS点击验证码自动更新功能
- 17个使用AJAX技术的数据表格控件解决方案(Data Grids with AJAX, DHTML and JavaScript)
- 本周ASP.NET英文技术文章推荐[02/17 - 02/23]:AJAX、History、jQuery、最佳实践、LINQ、Visual Studio、JavaScript、IIS
- 读GI源码、学JS编程——Javascript动态加载技术。
- 转贴:JavaScript:使用JS和CSS构造圆角DIV广告框技术解析