本日开始写ajax入门,因为感觉终于有点开窍了 - - (上班时间写博客希望不要被老板看到)
有问题请到包子的博客留言
hi.baidu.com/j2eedoc
理论上的东西不说了,诸如什么异步请求之类,好处很多,很大程度上提高B/S系统的上用户体验
首先每一个基于JavaScript的ajax应用(VBScript还有PHP都可以一样使用ajax)总是由一个创建XHR(xmlHttpRequest)对象的函数开始的,XHR(异步请求对象)是ajax的灵魂
var xmlrequest;
function createXMLHttpRequest(){
if(window.XMLHttpRequest){
//mozilla 浏览器
xmlrequest = new XMLHttpRequest();
}else if(window.ActiveXObject){
//IE浏览器
try{
xmlrequest = new ActiveXObject("Msxml2.XMLHTTP");
}catch(e){
try{
xmlrequest = new ActiveXObject("Microsoft.XMLHTTP");
}catch(e){
}
}
}
}
这里不需要什么解释,每一个应用都是这样开始,几乎是模式化的东西,判断浏览器种类,然后开始创建XHR对象
然后编写一个触发应用的函数,说简单点就是页面上一有一个按钮,一按这个按钮,就开始调用XHR对象来在后台发送一个异步请求,也就是 "触发第一个激活" 的函数
function getXML(){
//初始化XHR对象;
createXMLHttpRequest();
//设置请求响应的URL
var uri="buildXMLAction";
//打开与服务器响应地址的链接
xmlrequest.open("POST",uri,true);
//设置请求头
xmlrequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
//设置处理响应的回调函数
xmlrequest.onreadystatechange = processResponse;
//发送请求
xmlrequest.send(null);
}
这里唯一需要注意的是 "回调函数" , 几乎所有的书上都把 "回调函数" 写成processResponse, 一开始笔者就被绕进去了,以为这个函数的名称和功能是不变的,也就是必须写成processResponse,这一度成为我"开窍"的最大障碍.
既然是"激活应用的函数",第一步就是激活刚才我们第一个编写的"创建XHR对象"的函数
createXMLHttpRequest();
注意这个函数没有返回值,因为我在脚本最开始定义了一个全局变量xmlHttpRequest,注意它是一个变量,名字随便起
然后进行了一些准备工作
//设置请求响应的URL
var uri="buildXMLAction";
//打开与服务器响应地址的链接
xmlrequest.open("POST",uri,true);
//设置请求头
xmlrequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
关于open函数和send函数可以去查baidu,很简单的
然后调用回调函数
xmlrequest.onreadystatechange = processResponse;
这里onreadystatechange和所有大家见过的onClick onMouseOver onMouseOut 一样,不过是一个事件
onreadystatechange是一个"只能用在XHR对象上"的 "当XHR对象的状态(readyState)改变"时调用函数的一个事件
processResponse 被叫做回调函数,不过它只是一个普通函数,你可以把它写成
xmlrequest.onreadystatechange = pr;
这个函数的名字自己定义,内容也自己编写
function processResponse(){
//判断相应是否完成
if(xmlrequest.readyState == 4){
//判断响应是否成功
if(xmlrequest.status == 200){
//信息已经成功返回,开始处理信息
var text = xmlrequest.responseText;
//在页面输出所有请求头
document.getElementById("output").innerText = text;
}else{
//页面不正常
window.alert("您所请求的页面异常");
}
}
}
这里responseText是XHR对象的一个属性,用于接收被请求的servlet或别的什么东西返回的响应
它还有一个类似的属性 responseXML用于接收一个XML对象
页面上用
<body>
<input type="button" value="getXML" onclick="getXML()"/><br>
<div id="output"></div>
</body>
这样每次点击按钮,就发送了一个局部请求
服务器用servlet
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html");
PrintWriter out = response.getWriter();
out
.println("<!DOCTYPE HTML PUBLIC \"-//W3C//DTD HTML 4.01 Transitional//EN\">");
Random rand = new Random(System.currentTimeMillis());
out.write("这里是返回信息");
out.flush();
out.close();
}
注意这里用的是doGet方法,但是请求里用的是doPost,需要把open函数的参数改为get
或者将doPost 方法导向 doGet
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
doGet(request,response);
}
|
|
23 
1![[:)]](/faces/2.gif){kind=small}
![[good]](/faces/76.gif){kind=small}
