前言:上篇我们介绍了ajax是什么和ajax的执行流程本篇我们介绍实现ajax的对象XMLHttpRequest对象
1.如何使用XMLHttpRequest做ajax请求？
首先我们要先创建XMLHttpRequest对象,按标准new XMLHttpRequest()即可得到,但是如果考虑到低版本的ie那么我们可以new Window.ActiveXObject(Mircosoft.XMLHttp);
下面我们写一个版本兼容函数来创建我们的XMLHttpRequest对象。
1 function createXHR () { 2 ?????????if (typeof XMLHttpRequest != ‘undefined‘) { 3 ?????????????return new XMLHttpRequest(); 4 ?????????} 5 ?????????var version = [‘MSXML2.XMLHttp.6.0‘,‘MSXML2.XMLHttp.3.0‘,‘MSXML2.XMLHttp‘]; 6 ?????????for (var i = 0; i < version.length; i++) { 7 ?????????????try { 8 ?????????????????return new ActiveXObject(version[i]); 9 ?????????????}catch (e) {}10 ?????????}11 ?????}上面就是我们创建XMLHttpRequest 的版本兼容函数,如果你不需要考虑版本兼容问题那么直接new XMLHttpRequest对象即可。
在上一篇的博文中我们已经介绍了ajax的请求流程,上面则是我们的第二个流程创建xhr对象,那么接下来则开始我们第三流程发送请求访问服务端,
2.如何请求后台服务器？
分析http协议，要请求需要明确这样几个因素
1.用什么方法来请求？(GET,POST,DELETE,HEAD)
2.请求哪个资源?（url）
3.同步方式--同步/异步？
接下来我们来创建一个简单的ajax请求完成异步投票(这个需求很简单,就是页面每点击一次按钮我们的票数就增加一次)
首先我们在页面创建一个简单的按钮
并且为按钮绑定一个点击事件(这个按钮的id就是vote)
1 ??var vote = document.getElementById(‘vote‘); 2 ?????vote.onclick = function () { 3 ??????????4 ?????} 5 ?????function createXHR () { 6 ?????????if (typeof XMLHttpRequest != ‘undefined‘) { 7 ?????????????return new XMLHttpRequest(); 8 ?????????} 9 ?????????var version = [‘MSXML2.XMLHttp.6.0‘,‘MSXML2.XMLHttp.3.0‘,‘MSXML2.XMLHttp‘];10 ?????????for (var i = 0; i < version.length; i++) {11 ?????????????try {12 ?????????????????return new ActiveXObject(version[i]);13 ?????????????}catch (e) {}14 ?????????}15 ?????}创建一个名为vote.php文件(这里服务端使用php)
1 <?php2 // 文件路径3 $path = "vote.txt";4 // 如果文件不存在则创建5 is_file($path) || file_put_contents($path,"0");6 // 读取文件内容将内容+1并重新写入7 file_put_contents($path,file_get_contents($path) + 1);
这个文件代码如下非常简单,我们这里就不和数据库交互存储使用文件就好了
接下来开始实现我们的ajax请求
1 ???var vote = document.getElementById(‘vote‘); 2 ?????vote.onclick = function () { 3 ?????????// 1.创建xhr对象 4 ?????????var xhr = createXHR() 5 ?????????// 2.打开url连接 6 ?????????// 参数一:请求方法(GET,POST,DELETE,HEAD) 7 ?????????// 参数二:请求url 8 ?????????// 参数三:同步异步(true为异步,false为异步) 9 ?????????xhr.open("GET","vote.php",true)10 ?????????// 3.发送请求11 ?????????// 参数一:请求数据,这里我们是get请求所以填写null12 ?????????xhr.send(null)13 ?????}14 ?????function createXHR () {15 ?????????if (typeof XMLHttpRequest != ‘undefined‘) {16 ?????????????return new XMLHttpRequest();17 ?????????}18 ?????????var version = [‘MSXML2.XMLHttp.6.0‘,‘MSXML2.XMLHttp.3.0‘,‘MSXML2.XMLHttp‘];19 ?????????for (var i = 0; i < version.length; i++) {20 ?????????????try {21 ?????????????????return new ActiveXObject(version[i]);22 ?????????????}catch (e) {}23 ?????????}24 ?????}这样我们的ajax请求就实现啦！
这里可以看到每次请求和返回值,大家要善于使用NetWork
这里这样就实现完咯最后附上全部代码
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 ????<meta charset="UTF-8"> 5 ????<title>XMLHttpRequest的创建和使用</title> 6 </head> 7 <body> 8 ??<button id="vote">投票</button> 9 ??<script type="text/javascript">10 ?????var vote = document.getElementById(‘vote‘);11 ?????vote.onclick = function () {12 ?????????// 1.创建xhr对象13 ?????????var xhr = createXHR()14 ?????????// 2.打开url连接15 ?????????// 参数一:请求方法(GET,POST,DELETE,HEAD)16 ?????????// 参数二:请求url17 ?????????// 参数三:同步异步(true为异步,false为异步)18 ?????????xhr.open("GET","vote.php",true)19 ?????????// 3.发送请求20 ?????????// 参数一:请求数据,这里我们是get请求所以填写null21 ?????????xhr.send(null)22 ?????}23 ?????function createXHR () {24 ?????????if (typeof XMLHttpRequest != ‘undefined‘) {25 ?????????????return new XMLHttpRequest();26 ?????????}27 ?????????var version = [‘MSXML2.XMLHttp.6.0‘,‘MSXML2.XMLHttp.3.0‘,‘MSXML2.XMLHttp‘];28 ?????????for (var i = 0; i < version.length; i++) {29 ?????????????try {30 ?????????????????return new ActiveXObject(version[i]);31 ?????????????}catch (e) {}32 ?????????}33 ?????}34 ??</script>35 </body>36 </html>本篇就到这里结束啦,下一篇介绍ajax请求回调的各项返回值
ajax学习篇(二)XMLHttpRequest的创建和使用
原文地址：http://www.cnblogs.com/mdcm/p/7814088.html