前端之家收集整理的这篇文章主要介绍了
ajax入门之建立XHR对象 (1)，
前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
ajax入门之建立XHR对象
今天帮朋友写了一个简单的ajax的demo,发现了一些东西，决定写一篇文章记录一下，避免以后挖坑。
创建XMLHttpRequest
通常
@H_
301_9@
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以下的情况：
@H_
301_9@
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对象进行创建。当然，我们这里也给出完整的代码。
@H_
301_9@
function createXHR(){
if(
typeof XMLHttpRequest != 'undefined'
){
return new XMLHttpRequest();
}else if(
typeof argument.callee.activeXString != 'string'
){
var versions = ['MXSML2.XMLHTTP','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对象存在"
);
}
}
@H_
301_9@<!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()函数会启动一个请求,但并不是发送，可以看作办事之前的准备。它接受三个函数:
@H_
301_9@open(get/post,url,false/
true)
-
请求类型:最常用的就是get和post
-
路径：就是要请求的操作的文件的url
-
是否异步,一般会使用 true,用 false 毫无意义...
我们这是使用的是get方式，因为我们并没有要发送的数据。异步我们选择了true,无意中发现在使用false时候，火狐出现了警告：
主线程中同步的 XMLHttpRequest 已不推荐使用，因其对终端用户的用户体验存在负面影响。
具体需要再了解。
自然而然，准备好了就要发送，send()只接受一个参数，那就是要发送的数据。我们使用的是get，数据已经在URL中，那就null好了。
因为这篇文章主要是讲ajax，所以PHP部分我只用了最简单的echo
@H_
301_9@<?
PHP
echo '成功了'
;
?>
这样就能在接受到请求后返回一个字符串。
我们怎么样才能直到PHP文件将数据处理完，返回给客户端了呢？这时候我们就需要监测XHR的readyState属性。先介绍以下readyState属性：
-
0：初始化未完成，未调用open()
-
1: 启动调永了open()函数，但是还没有send
-
2：发送，调永了send()函数，还没有接收到响应
-
3：开始接收,接收到部分的数据
-
4：完成，接收到了全部数据。
所以在上面的函数中我们可以看到，我们去监测readyState属性，等到等于4的时候，也就是数据接收完成之后，我们开始对数据进行处理。
小结
这是一个手动创建XHR对象并使用最简单的方法。以后回继续进行更新。介绍其更详细的用法。
