有一半清醒,有一半醉!这可能是众位看客看过之前两篇博客后的感觉.没关系,继续闷头看起!!!
你的脑壳一定要建立这样一种信念,ajax不是新的技术,而是对客户端技术js/dom/css的综合运用而已.所以掌握ajax,最重要是在锤炼你的js/dom/css功底.从web应用角度来看,无非就是处理两种事情
1.request-请求即浏览器向服务器请求数据
我们来看看在request方都需要做哪些事情呢?
1.1XMLHttpRequest对象的构建
ajax方式的请求是借助浏览器的一个对象XMLHttpRequest来实现.而获取XMLHttpRequest对象在不同类型的浏览器中的方式不同,火狐浏览器直接通过new XMLHttpRequest()来完成,而对于IE浏览器来说,则需要根据IE的不同版本来实现XMLHttpRequest对象的构建.当获得XMLHttpRequest对象后保存在一个变量中,命名成http_request.
1.2设置响应处理函数
在发送请求数据的时候,就需要提前设置谁来处理服务器返回的数据,对客户端来讲,当然就是某个js函数了.这里设置响应处理函数用这样一句代码来实现:
http_request.onreadystatechange=doHandler;
其中,onreadystatechange是XMLHttpRequest对象上的一个属性,整句代码的意思是"当服务器将数据返回后,将数据交给函数名为doHandler的函数负责处理".函数doHandler需要你单独编写.
1.3构建请求服务器地址和发送数据
服务器地址的构建是根据客户端的请求方式的不同而不同,如果客户端请求方式为post时,这时,地址和请求数据的构建是分离的.在前文的实例当中,我们是将数据发送到服务器端的一个叫做CheckAccountServlet来处理,那么请求地址和数据的构建如下:
var url = CheckAccountServlet;
var data = "name=zhangsan&password=123"
如果服务器端地址为/abc/cfg/CheckAccountServlet,那么这里就应该变成var url = abc/cfg/CheckAccountServlet,总之这里的地址是跟你所请求的服务器地址始终保持一致.
而对于请求方式为get时,这时,地址和请求数据一起来构建成一个完成的url.示例代码如下:
var url = "CheckAccountServlet?name=zhangsan&password=123"
在发送时,就将url直接以get方式发送到服务器上.
1.4连接服务器
就跟你操作db一样,在真正执行sql语句之前,你必须先跟db连接上.同样的,ajax要想发送数据则也需先跟服务器建立连接,建立连接代码如下
http_request.open(method,url,flag);
其中,method代表客户端请求方式,取值为post或者get
url代表服务器地址(具体构建方式见1.3)
flag取值为true或者false,如果为true表示只有和服务器建立连接成功后才执行发送数据,否则,相反(建议设置为true)
1.5.发送请求数据
如果请求方式为get,由于数据已经一并附加到url后面,所以,发送时直接调用http_request.send(null)即可.
如果请求方式为post,则需要将按照格式构建好的数据传递给send函数,并且在调用send函数前还需加上另外一个行代码,整个代码如下:
http_request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
http_request.send(data);
至此,客户端的处理已经宣告结束.剩下的就是服务器端的处理了
2.response-响应即服务器将响应数据发送回浏览器
我们再来看看在response方都需要做哪些事情呢?
2.1获取请求数据
跟你获取表单数据一样,获取ajax提交上来的数据也是采用request.getParameter()来实现
2.2处理请求数据
具体的数据处理就是你的事情了(做你想做的一切事情!)
2.3输出响应数据
要想把响应数据输出给客户端,只能通过输出流的方式来实现.
PrintWriter out = response.getWriter();//获取输出流
out.println("Some message");//开始输出响应数据
.......
out.close();//关闭输出流
这里,需要重点强调几点:
2.3.1.如果输出信息中包含中文,则需要在获取输出流之前添加response.setContentType("text/html;charset=gb2312");
2.3.2.设置让浏览器无缓存,添加response.setHeader("Cache-Control","no-cache");
2.3.3.输出信息只允许两种形式,分别是文本信息和xml格式的字符串信息.如果是文本信息,则按照前面的方式直接输出即可.如果是xml格式的字符串信息,则需要更改2.3.1.提到的代码response.setContentType("text/html;charset=gb2312")为response.setContentType("text/xml;charset=gb2312")
至此,服务器端的响应信息已经输出完成(但我们的路还差最后一步哦,加点油,我们马上成功啦!!!)
2.4.客户端处理服务器返回的数据
那么,在哪来处理服务器返回的数据呢?还记得1.2提到的doHandler函数吗?
对了,doHandler函数就负责处理返回的数据的.来看看,它都做了哪些事情
/*具体负责处理服务器返回数据的函数*/
function doResponse(){
//当服务器将数据返回给客户端时,readyState状态值为4
if(http_request.readyState==4){
//当服务器返回的数据是正常的数据时,status状态值为200
if(http_request.status==200){
//通过XMLHttpRequest对象的responseText属性获取
//服务器返回的文本信息
var returnMsg = http_request.responseText;
//将响应信息显示到页面上
showMessage(returnMsg);
}
}
}
这里的函数doResponse函数就是起到doHandler的作用(说过了嘛,doHandler函数名称可以任意取的嘛,别纠着函数名不放好不好).
关键的地方在于通过什么来获取服务器给我们返回的数据.XMLHttpRequest对象上提供两个属性供我们抉择.
2.4.1.responseText-如果服务器端返回的是普通的文本信息的话,用它就够了.
2.4.2.responseXML-如果服务器端返回的是xml格式的数据,则需要用它.而如果用它的话,那么就需要dom技术来解析其中的数据喽!(见下回分解)
大功告成,一切的一切都已经OK,请问,您酒醒了吗?