首先,我们都知道AJAX是融合了多门技术(JS/XML/CSS等),而运用了新的思想,采用异步操作,来让我们的网页在不刷新的情况下,就可以自动的获取页面信息。而AJAX的核心功能离不开我们的XMLHttpRequest。现在我们就来对它进行初步的了解。
下面是网上的一个小例子,我们来一起分析一下。
<script type="text/javascript"> try{ var xmlhttp = new XMLHttpRequest(); } catch (e) { var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP'); } xmlhttp.open('GET', 'js.js', true); xmlhttp.onreadystatechange = function () { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { alert(xmlhttp.responseText); } } xmlhttp.send(); </script>
1、创建XMLHttpReque对象
首先,我们需要考虑浏览器的兼容性问题。在IE6以下的老版本是通过ActiveXObject对象来支持的。在IE7以及非IE核心的浏览器中,他的对象都是通过window对象的属性而支持的。很可能在这个版本中,他是可以正常运行的,但是切换在其他的版本中,他又就不能运行啦。
在上面的例子中,
var xmlhttp = new XMLHttpRequest();
<pre name="code" class="javascript">var xmlhttp = new ActiveXObject('Microsoft.XMLHTTP');我们可以看到创建了俩个不同浏览器版本都可以用的对象。
2、初始化请求
我们可以看到上面的例子用open方法来初始化请求。
xmlhttp.open('GET', 'js.js', true);open方法传递了三个参数,这三个参数分别表示:
get:请求的方法为get方法。
js.js为url,也就是请求的目标地址。
true:定义了请求是异步请求。假如我们的定义为false,为同步请求。
3、获取请求状态
在上面的代码中我们看到了readyState的属性,这个属性是在告诉我们XMLHttpReque对象处于什么的生命周期,处于什么的一种状态。其具体如下:
0:对象已经建立,但是没有调用open方法来初始化。
1:对象已经初始化,但是没有调用send的方法。
2:send方法已经被调用,但是HTTP状态和HTTP头未知。
3:已经接受数据。但是接受数据不完整。
4:数据接受完毕。
在上面的例子中,我们可以看到当为4的时候,也就是数据接受完毕后,才会显示js中的内容。
4、发送请求
在对象初始化后,可以用send方法将请求发送到指定的HTTP服务器中。
当请求是同步的,也就是我们定义的false,用send方法将会等待请求完成后才会返回,请求过程中页面会中断执行,处于假死状态。假如我们的请求是异步的,也就是上面的例子中的true,就会立即返回,不会中断。
5、指定请求状态改变的事件处理
当我们的readyState状态发生改变的时候,就会触发我们的onreadystatechange事件,而我们的readyState属性存有我们XMLHttpRequest的状态信息。
在请求完成后,可以通过访问XMLHttpRequest对象的status属性来获取当前HTTP请求的状态,status是一个数值,他的值有好多好多。其中我们例子中的200为时‘OK’的意思。也就是说已经成功获取了HTTP请求的状态。
6、取得返回的数据
我们看到了responseText属性来获取返回的数据。他是作为字符串格式返回的。除此之外,还有responXML,将返回的数据格式为XML文档返回,要求服务端输出的是一个有效的文档。
上面涉及到了很多的属性和方法,我们在AJAX视频中也介绍了很多,不一一列举啦。想详细的了解,请点击下面的超链接!xmlhttprequest属性和方法
整体觉得 XMLHttpRequest对象比较抽象,作为用于在后台和服务器交互数据,实现了在不重新刷新页面就可以更新网页,页面加载后能从服务器中请求和接受数据,同时能在后台向服务器发送数据!
XMLHttpRequest的浏览器兼容问题和乱码问题依然存在,但是它依然是每一个网页程序员渴望使用的先进技术和先进思想。同时对他的理解还很浅显,需要后期的不断加强。
版权声明:本文为博主原创文章,未经博主允许不得转载。
原文:http://blog.csdn.net/lifen0908/article/details/48048075