上一讲讲了一个ajax的应用,改变form的默认提交方式,将其所有的字段通过ajax提交,方便了ajax的操作流程。代码借助jquery完成的,jquery是个优秀的js框架,使用它可以简化js的开发流程,但是这一次我讲的是使用纯js来实现ajax。那么有什么意义呢,这里当然不是为了学究,下面情况就需要用纯js了:很多js的新手可能不会用到jquery;最移动开发时,会发现移动设备上加载jquery这样的库会比PC机上慢很多,而且是不能忍受的。
闲话不再多说,先来个旋风式介绍,看下面代码:
代码段1.2.1 自定义ajax框架
下面是对这个自定义框架的使用Demo:
代码段 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所要承载的信息。
我们再来看看,服务器做了什么:
我们只是简单的打印了接收的数据,最后脚本的执行结果就是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文件上,这样就乱码了。