原生AJAX入门讲解（含实例）
|
http://mrthink.net/ajax-starter-xmlhttpreq/ 相对于jQuery、YUI以及其他一些类库的AJAX封装，原生JS的AJAX显得那么的尴尬，兼容性不好，要记很多的方法属性，调用不便捷，代码臃肿…但我还是想说，原生JS才是最根本最底层的知识（虽然实际项目中我也是以jQuery AJAX为主，为什么？高效！），求木之长者，必固其根本。
<form action="#" method="post" name="iform"> <p><label for="nickname">用户名：</label> <input type="text" name="nickname" id="nickname" placeholder="在这里输入用户名"><span id="tips"></span></p> </form> 另外，我们还需要一个判断输入昵称是否存在的后端页面（本文以PHP为例，这部分不用细究）:
...
if(isset($_GET['entryname'])){
$entryname=$_GET['entryname'];
}else{
$entryname='DATA NULL';
}
$sql=sprintf("select * from i_test_ajax where nickname='%s'",$entryname);
$res=$iajax->query($sql);
//sleep只是为了展示readState==1时的效果
sleep(1);
if(($res->num_rows)>0){
echo "抱歉！此昵称已存在 :(";
}else{
echo "恭喜！此昵称可注册 :)";
}
...
如此，万事俱备，只欠东风，剩下的就交给AJAX来处理了。 XMLHttpRequest，不得不提的一个对象，AJAX最核心也是最底层的对象。可悲哀的是，它是W3C的一个标准，但微软IE一直很自我（微软IE）。怎么办？当然是用一个方法和谐掉它们。微软IE支持ActiveXObject(‘Microsoft.XMLHTTP’)对象，这样就简单了：
//兼容的XMLHttpRequest对象
IXHR: function(){
if(window.ActiveXObject){
XHR=new ActiveXObject('Microsoft.XMLHTTP');
}else if(window.XMLHttpRequest){
XHR=new XMLHttpRequest();
}else{
return null;
}
}
兼容的XMLHttpRequest对象实现了，接下来写一个简单的onblur事件，即当输入值后，表单失去焦点后开始判断并迅速回馈一个信息到前台。代码如下：
//触发焦点时执行
document.forms['iform'].nickname.onblur = function(){
//输入的值
var val=document.forms['iform'].nickname.value;
//对用户名的判断
if(!/^[a-zA-Z0-9_]{3,16}$/.test(val)){
alert('请输入3~16位由英文、数字、下划线组成的昵称！');
return false;
}
//初始化一下XHR
iBase.IXHR();
//原来需要新打开的判断页面用GET使用异步
XHR.open('GET','/demo/ajax/iajax20110306_query.php?entryname='+val,true);
//与readyState属性有关，当readyState改变时它才会触发
XHR.onreadystatechange=returnFun;
//异步处理完成后发送数据出去（比如某些需要在焦点事件后再执行的）
XHR.send(null);
}
解释一下AJAX部分的代码。iBase.IXHR()，初始化XHR，以保证XMLHttpRequest对象的兼容。接下来，通过以GET的方式，异步发送到/demo/ajax/iajax20110306_query.php页面进行验证。有人会问什么是GET，GET是从服务器上请求数据，GET方法就是把数据参数队列加到一个URL上，值和表单是一一对应的，比如本文的entryname=val。这个概念可能属于后台程序的范畴，不在此细说。然后，我们需要用到一个onreadystatechange事件属性，这个属性是用来存储函数（或函数名），每当readyState属性改变时，就会调用该函数，即本文中的returnFun；最后，我们还要发送一个数据到服务器，send属性一般用于数据交换,而本文只是一个简单的验证判断，所以，send一个空值。 基本的判断与数据发送完成了，接下来还剩一个关键的信息获取，即returnFun。先看代码： function returnFun(){
//当send()已调用，正在发送请求时，显示Loading...
if(XHR.readyState==1){
iBase.Id('tips').innerHTML='Loding...';
}else if(XHR.readyState==4){
//当响应内容解析完成，可以调用时
//更缜密，再判断一下status是否成功
if(XHR.status==200){
//responseText为返回的文本
iBase.Id('tips').innerHTML=XHR.responseText;
}
//使用完请销毁，避免内存泄露
XHR=null;
}
}
此函数是用来通过判断readyState及status状态也及时反馈给用户相应的提示信息。readyState有五种状态： 0 (未初始化)： (XMLHttpRequest)对象已经创建，但还没有调用open()方法； 关于AJAX的基础介绍与实例就这么多，关键还是在于自己的实践与思考。其实这其中涉及知识并不复杂，若有后端程序的基础，学起AJAX会更加容易，关键是要想明白其中的逻辑关系。有兴趣的话，可以自己写一个不刷新页面加载新内容的AJAX，或者研究一下jQuery中关于AJAX的封装。 （编辑：李大同） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |