ajax入门之建立XHR对象 (1)
来源:互联网 发布:手机游戏变速软件 编辑:程序博客网 时间:2024/05/16 12:17
ajax入门之建立XHR对象
今天帮朋友写了一个简单的ajax的demo,发现了一些东西,决定写一篇文章记录一下,避免以后挖坑。
创建XMLHttpRequest
通常
function createXHR(){ if(XMLHttpRequest){ return new XMLHttpRequest(); }else{ return new ActiveXObject('Microsoft.XMLHTTP') } }
这一段js代码来源自w3school,用于创建兼容各浏览器的XMLHttpRequest对象的含义:
检测客户端是否有XMLHttpRequest,否则使用ActiveXObject
关于XMLHttpRequest对象,IE5是第一个引入XHR对象的浏览器,在IE5中,XHR是通过activeX对象实现的.因此在IE中可能遇到三种不同版本的XHR对象,MXSML2.XMLHTTP,MXSML2.XMLHttp.3.0和MXSML2.XMLHttp.6.0。
IE的坑
为了向我们伟大的IE浏览器“致敬”,我们必须添加额外的代码进行创建 以下代码适用与IE7以下的情况:
function createXHR(){ if(typeof argument.callee.activeXString != 'string'){ var versions = ['MXSML2.XMLHTTP','MXSML2.XMLHttp.3.0','MXSML2.XMLHttp.6.0']; var i len; for(i = 0;len=versions.length;i<len;i++){ try{ new ActiveXObject(varsions[i]); argument.callee.activeXString = varsions[i]; }catch{ <!-- 跳过 --> } } } return new ActiveXObject(argument.callee.activeXString);}
完整走一遍
但往往我不会考虑这么多,能看懂前面的函数也是很不容易了,再让我写出来,我的天!当大家和我这么懒的时候,可以直接使用第一份代码,也就是w3school那一套代码,我们使用原生的XHR对象进行创建。 当然,我们这里也给出完整的代码。
function createXHR(){ if(typeof XMLHttpRequest != 'undefined'){ return new XMLHttpRequest(); }else if(typeof argument.callee.activeXString != 'string'){ var versions = ['MXSML2.XMLHTTP','MXSML2.XMLHttp.3.0','MXSML2.XMLHttp.6.0']; var i len; for(i = 0;len=versions.length;i<len;i++){ try{ new ActiveXObject(varsions[i]); argument.callee.activeXString = varsions[i]; }catch{ <!-- 跳过 --> } } return new ActiveXObject(argument.callee.activeXString); }else{ throw new Error("没有XHR对象存在"); }}
用法
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>demo</title></head><body> <form> <button onclick="returnText();return false">登陆</button> </form> <script type="text/javascript"> function returnText(){ var xhr = createXHR(); xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304){ alert(xhr.responseText); }else{ alert('获取失败'+xhr.status) } } } xhr.open('get','demo.php',true); xhr.send(null); } function createXHR(){ if(typeof XMLHttpRequest != 'undefined'){ return new XMLHttpRequest(); }else{ return new ActiveXObject('Microsoft.XMLHTTP') } } </script></body></html>
创建好XHR对象只是第一步,才是我们各种操作的开始。
open()
open()函数会启动一个请求,但并不是发送,可以看作办事之前的准备。 它接受三个函数:
open(get/post,url,false/true)
请求类型:最常用的就是get和post
路径:就是要请求的操作的文件的url
是否异步,一般会使用 true ,用 false 毫无意义...
我们这是使用的是get方式,因为我们并没有要发送的数据。异步我们选择了true,无意中发现在使用false时候,火狐出现了警告:
主线程中同步的 XMLHttpRequest 已不推荐使用,因其对终端用户的用户体验存在负面影响。
具体需要再了解。
send(data);
自然而然,准备好了就要发送,send()只接受一个参数,那就是要发送的数据。我们使用的是get,数据已经在URL中,那就null好了。
php
因为这篇文章主要是讲ajax,所以php部分我只用了最简单的echo
<?php echo '成功了'; ?>
这样就能在接受到请求后返回一个字符串。
回调函数
我们怎么样才能直到php文件将数据处理完,返回给客户端了呢? 这时候我们就需要监测XHR的readyState属性。先介绍以下readyState属性:
0:初始化未完成,未调用open()
1: 启动调永了open()函数,但是还没有send
2:发送,调永了send()函数,还没有接收到响应
3:开始接收,接收到部分的数据
4:完成,接收到了全部数据。
所以在上面的函数中我们可以看到,我们去监测readyState属性,等到等于4的时候,也就是数据接收完成之后,我们开始对数据进行处理。
小结
这是一个手动创建XHR对象并使用最简单的方法。以后回继续进行更新。介绍其更详细的用法。
- ajax入门之建立XHR对象 (1)
- ajax入门之建立XHR对象 (1)
- ajax入门之建立XHR对象 (1)
- ajax入门之建立XHR对象 (1)
- Ajax 详解 (1) :XHR 对象
- [ JS 进阶 ] Ajax 详解 (1) :XHR 对象
- ajax-XHR对象
- AJAX / XHR :XMLHttpRequest对象
- AJAX--XHR对象
- AJAX--XHR对象
- AJAX之XHR响应
- AJAX之创建XHR对象与发送请求
- AJAX中xhr对象详解
- 深入理解ajax系列之一-XHR对象
- AJAX XHR
- 【Ajax技术】Ajax技术回顾与XHR对象的创建
- Ajax知识笔记——入门,同步和异步,XHR
- Ajax笔记—入门,同步和异步,XHR
- 学习笔记之ConcurrentLinkedQueue源码分析整理
- 学习笔记之BlockingQueue及其各个实现的分析整理
- C语言strtod()函数:将字符串转换为double
- dirop
- Java 多线程设置线程超时时间之 Callable接口和Future接口 线程超时控制
- ajax入门之建立XHR对象 (1)
- 学习笔记之Java线程安全杂谈(中)——Java内存模型、happens-before原则和DCL问题
- 【PAT】1103. Integer Factorization
- Inside the java virtual machine
- JavaScript全局对象
- Java基础知识(三)
- 学习笔记之Java线程安全杂谈(上)——线程安全概念和基本方案
- mac80211概览
- 五种开源协议的比较(BSD,Apache,GPL,LGPL,MIT)