|
转自：http://mantocom.blog.sohu.com/155564198.html
由于传统web应用时每次总是全部页面加载的缺点(用传统的js可以部分的加载),使得2005年后ajax(异步传输技术)技术大行其道,在程序上除了减少与服务器交互的数据量,但对用户的体验方面是大大的舒服了.虽然在程序设计时,对与程序员的代码工作量增加了,但对于客户的使用方面却得到了很大的提升.下面说一下,用js而非什么其他的ajax框架的步骤与实现代码:主要是1-5这五个步骤是重点.
0.写客户端的提交页面:一般用表单(按钮)或链接来写开始页面.
1. 创建XMLHttpRequest对象:这一步写起来虽然麻烦,但都是千篇一律,所以直接复制粘贴就是,里面代码中注意浏览器的兼容问题的考虑.
var XHR=null;
var XHRcreate=function()
{
if (window.XMLHttpRequest) {
//针对FireFox，Mozillar，Opera，Safari，IE7，IE8
XHR = new XMLHttpRequest();
//针对某些特定版本的mozillar浏览器的BUG进行修正
if (XHR.overrideMimeType) {
XHR.overrideMimeType("text/xml");
}
} else if (window.ActiveXObject) {
//针对IE6，IE5.5，IE5
var activexName = ["MSXML2.XMLHTTP","Microsoft.XMLHTTP"];
for (var i = 0; i < activexName.length; i++) {
try{
//如果创建失败，回抛出异常，然后可以继续循环，继续尝试创建
XHR = new ActiveXObject(activexName[i]);
break;
} catch(e){
}
}
}
}
XHRcreate();
2.注册回调函数:注意回调函数后面不要接()就是,否则返回的是callback()的返回值.
XHR.onreadystatechange = callback;
3.设置连接信息:这里分两种情况:一是get方式发送;二是以post方式发送,就要麻烦一些,要设置请求头
(1)get方式:
XHR.open("GET","login_verify.jsp?name="+ userName,true);
(2)post方式:
XHR.open("POST","AJAXXMLServer",true);
XHR.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
4.发送数据:
(1)get方式:
XHR.send(null);
(2)post方式:
XHR.send("name=" + userName);
5.接收响应数据:(在回调函数里面):这是最复杂的地方,响应的方式有两种:一种是text方式,一种是xml方式,因为xml方式处理比较麻烦,而且实际中也比较少.这里就只说text方式:
function callback() {
//判断对象的状态是交互完成
if (XHR.readyState == 4) {
//判断http的交互是否成功
if (XHR.status == 200) {
var responseText = XHR.responseText;
//通过dom的方式找到div标签所对应的元素节点(为了简便,这里客户端的程序未写了)
var divNode = document.getElementById("result");
divNode.innerHTML = responseText;
} else {
alert("出错了！！！");
}
}
6.写服务器端的响应:用jsp或servlet都可以,一般是用out.println("返回给客户的的内容");的语句来返回给客户内容. （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
