自定义小型ajax框架-ajax讲义二

上一讲讲了一个ajax的应用，改变form的默认提交方式，将其所有的字段通过ajax提交，方便了ajax的操作流程。代码借助jquery完成的，jquery是个优秀的js框架，使用它可以简化js的开发流程，但是这一次我讲的是使用纯js来实现ajax。那么有什么意义呢，这里当然不是为了学究，下面情况就需要用纯js了：很多js的新手可能不会用到jquery；最移动开发时，会发现移动设备上加载jquery这样的库会比PC机上慢很多，而且是不能忍受的。

闲话不再多说，先来个旋风式介绍，看下面代码：

 

/** * @param method 发送的方式，post或者get * @param url 发送的url地址 * @param content 要发送的参数内容 * @param callback 监听函数 */ function send_request(method,url,content,callback){ http_request=false; //获取ajax对象 if(window.XMLHttpRequest){//非IE浏览器 http_request=new XMLHttpRequest(); if(http_request.overrideMimeType) http_request.overrideMimeType("text/xml"); } else if(window.ActiveXObject){//IE浏览器 try{ http_request=new ActiveXObject(Msxml2.XMLHTTP); }catch(e){ try { http_request=new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){} } } if (!http_request){ window.alert("不能创建XMLHttpRequest对象实例"); return false; } http_request.onreadystatechange=function(){callback();}; //if(method.toLowCase()=="get"){ if(method=="get"){ http_request.open(method,url,true);//设置发送地址和发送方式 } //else if(method.toLowCase()=="post"){ else if(method=="post"){ http_request.open(method,url,true); http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=utf-8"); http_request.setRequestHeader("If-Modified-Since","0"); } else{ windows.alert("http请求参数类别错误！"); return false; } http_request.send(content);//发送数据 }

代码段1.2.1 自定义ajax框架

下面是对这个自定义框架的使用Demo：

function sendAjax() { send_request('post','http://192.168.133.72/my_info.php',null,function() { if(http_request.readyState==4){ if(http_request.status==200){ alert(http_request.responseText); }else{ alert(http_request.status); } }else{ } }); } 

代码段 1.2.2 使用自定义ajax框架

拿到上面两份代码，你脑子里可能会用很多大大的问号，为什么会是这个样子？我们不得不承认，只有搞清楚一个对象的原理，我们才能更好的利用其特性。当然我们现在并不仅仅是为了学习ajax的特性，更重要的是要大家先搞懂上面的代码，为此我不得不学究一把（被逼的）。

在代码段1.2.1中，我们首先取得一个ajax对象，注意在在不同的浏览器中获取ajax对象的方式是不一样的，IE6和IE5.X中使用activeX方式创建ajax对象，非IE浏览器和IE7和更高版本的IE浏览器使用XMLHttpRequest对象创建AJAX对象。接下来是设置ajax对象的onreadystatechange属性，on readystate change，顾名思义，“当状态变化时”做处理。原来ajax在运行，有一个属性会随程序运行而不断改变，他就是readstate属性，每次readystate变化时，都会调用callback，即代码段1.2.1中的第29行，关于readystate属性的使用也将在代码1.2.2做详细说明。接下来设置ajax对象的open方法，我们使用它来建立和服务器端的连接，它有三个参数：

a.发送数据的方式，post或者get。

b.要发送的url地址。

c.数据发送方式，ture为异步，false为同步，异步的话，数据发到服务器端后，客户端的脚本就可以继续运行，不用等待服务器返回数据处理结果；false则相反，必须等到服务器返回数据后，才能继续运行客户端脚本。这个在使用时，要根据具体情况决定使用哪种方式，一般情况下使用异步方式，因为这样会提高程序的运行效率；但是假设你用for循环处理多个ajax请求时，就得考虑用同步方式了，因为每次请求时间间隔太短，不用同步方式的话，很容易出现返回的数据相互覆盖的现象。

最后是要发送的数据，使用post方式的时候，我们习惯将数据通过类似'a=some&b=other'的形式，将其ajax对象的send方法；使用get方式的时候，我们习惯将send方法的参数设置为null，取而代之的是将参数信息都放在url中，即open函数的第二个参数，形成类似'http://somesite/somepage?a=some&b=other'的形式。

 

好接下来看demo函数的使用，代码1.2.2中只给出了一个函数，其实它可以发生在类似下面的代码块中：

<input type="button" value="发送ajax" οnclick="sendAjax();" />

send_request函数指定了四个个参数：

a.发送数据的方式——post

b.发送的地址

c.发送的信息，我们发送了两个数据a的值为aaa，b的数据为bb

d.接收服务器端返回数据的回调匿名函数。

重点来看这个匿名函数，首先判断了ajax对象的readyState属性，readyState属性有四个值：1、2、3、4，如果它的值为4，说明服务器处理完成，返回了处理结果。那么它返回了什么信息，还有它在处理过程会不会出错呢，从而没有拿到预期数据呢？不用急，ajax对象有一个status属性，它记录服务器端处理的结果，它的值其实是HTTP协议的返回值，200代表处理成功。HTTP协议错误码比较多，在这里只列出几个常用的，404——找不到网页，500——服务器内部错误（服务器程序出错），403——没有权限。然后，我们知道服务器处理成功了，怎么拿到服务器的返回信息呢？这正是responseText所要承载的信息。

我们再来看看，服务器做了什么：

<?php //Header("Content-type: text/html;charset=utf-8"); echo '你接受到的数据：a:'.$_POST['a'].', b:'.$_POST['b'];

我们只是简单的打印了接收的数据，最后脚本的执行结果就是alert“你接收的数据：a：aaa， b:bb”。注意我在第一行注释掉了了一句话，这是因为我在html使用了utf-8编码，而js使用的默认编码也是utf-8编码，所以不需要使用转码函数，但是假设你的html使用gb2312之类的编码，就要Header("Content-type: text/html;charset=gb2312");否则js会用utf-8编码将其显示在gb2312编码的html文件上，这样就乱码了。