二.为什么要用ajax
富客户端已经成为网站以及基于网站的程序发展的必然(什么是富客户端?自己google),要构建一个富客户端的程序,必须满足以下条件:
1. 用户定制服务(实例: www.live.com)
2.无需等待(实例:Gmail)
3.桌面化界面(实例: www.backbase.com)
OK,再来讲讲ajax能实现的功能:
1.采用XMLHttpRequest实现后台数据提交,客户端无刷新(此功能满足富客户端要求2)
2.返回数据能完美与CSS结合,实现丰富界面(此功能满足富客户端要求3)
3.采用javascript脚本实时控制当前浏览界面(此功能满足富客户端要求1)
4.兼容绝大部分浏览器,只要你的浏览器支持JAVASCRIP,支持XMLHttpRequest
5.丰富的自定义扩展(请允许我叫他API吧),能用于FLASH,能用于ASP,能用于PHP.能用于......
综上,ajax的使用无疑能大大完善客户端与服务器端的交流与沟通,较完美处理客户端指令,试想,当你跟客户沟通已经达致完美,还有什么生意谈不成呢?
三. ajax原理
请允许我采用这张已经广为流传的图片作为ajax原理的展示,虽然他还不够完全表达,但已经是目前最直观最完美的展示了
四.实例告诉你怎么用ajax
精彩部分开始了!
XmlHTTPrequest调用 javascript ajax.js
HTML代码:
//功能: 根据浏览器调用支持的XMLHTTPREQUEST // IE support if (window.ActiveXObject && !window.XMLHttpRequest) { window.XMLHttpRequest = function() { var msxmls = new Array('Msxml2.XMLHTTP.5.0','Msxml2.XMLHTTP.4.0','Msxml2.XMLHTTP.3.0','Msxml2.XMLHTTP','Microsoft.XMLHTTP'); for (var i = 0; i < msxmls.length; i++) { try { return new ActiveXObject(msxmls[i]); } catch (e) { } } return null; }; } // Gecko support /* ;-) */ // Opera support if (window.opera && !window.XMLHttpRequest) { window.XMLHttpRequest = function() { this.readyState = 0; // 0=uninitialized,1=loading,2=loaded,3=interactive,4=complete this.status = 0; // HTTP status codes this.statusText = ''; this._headers = []; this._aborted = false; this._async = true; this._defaultCharset = 'ISO-8859-1'; this._getCharset = function() { var charset = _defaultCharset; var contentType = this.getResponseHeader('Content-type').toUpperCase(); val = contentType.indexOf('CHARSET='); if (val != -1) { charset = contentType.substring(val); } val = charset.indexOf(';'); if (val != -1) { charset = charset.substring(0, val); } val = charset.indexOf(','); if (val != -1) { charset = charset.substring(0, val); } return charset; }; this.abort = function() { this._aborted = true; }; this.getAllResponseHeaders = function() { return this.getAllResponseHeader('*'); }; this.getAllResponseHeader = function(header) { var ret = ''; for (var i = 0; i < this._headers.length; i++) { if (header == '*' || this._headers[i].h == header) { ret += this._headers[i].h + ': ' + this._headers[i].v + '/n'; } } return ret; }; this.getResponseHeader = function(header) { var ret = getAllResponseHeader(header); var i = ret.indexOf('/n'); if (i != -1) { ret = ret.substring(0, i); } return ret; }; this.setRequestHeader = function(header, value) { this._headers[this._headers.length] = {h:header, v:value}; }; this.open = function(method, url, async, user, password) { this.method = method; this.url = url; this._async = true; this._aborted = false; this._headers = []; if (arguments.length >= 3) { this._async = async; } if (arguments.length > 3) { opera.postError('XMLHttpRequest.open() - user/password not supported'); } this.readyState = 1; if (this.onreadystatechange) { this.onreadystatechange(); } }; this.send = function(data) { if (!navigator.javaEnabled()) { alert("XMLHttpRequest.send() - Java must be installed and enabled."); return; } if (this._async) { setTimeout(this._sendasync, 0, this, data); } else { this._sendsync(data); } }; this._sendasync = function(req, data) { if (!req._aborted) { req._sendsync(data); } }; this._sendsync = function(data) { this.readyState = 2; if (this.onreadystatechange) { this.onreadystatechange(); } var url = new java.net.URL(new java.net.URL(window.location.href), this.url); var conn = url.openConnection(); for (var i = 0; i < this._headers.length; i++) { conn.setRequestProperty(this._headers[i].h, this._headers[i].v); } this._headers = []; if (this.method == 'POST') { // POST data conn.setDoOutput(true); var wr = new java.io.OutputStreamWriter(conn.getOutputStream(), this._getCharset()); wr.write(data); wr.flush(); wr.close(); } // read response headers // NOTE: the getHeaderField() methods always return nulls for me :( var gotContentEncoding = false; var gotContentLength = false; var gotContentType = false; var gotDate = false; var gotExpiration = false; var gotLastModified = false; for (var i = 0; ; i++) { var hdrName = conn.getHeaderFieldKey(i); var hdrValue = conn.getHeaderField(i); if (hdrName == null && hdrValue == null) { break; } if (hdrName != null) { this._headers[this._headers.length] = {h:hdrName, v:hdrValue}; switch (hdrName.toLowerCase()) { case 'content-encoding': gotContentEncoding = true; break; case 'content-length' : gotContentLength = true; break; case 'content-type' : gotContentType = true; break; case 'date' : gotDate = true; break; case 'expires' : gotExpiration = true; break; case 'last-modified' : gotLastModified = true; break; } } } // try to fill in any missing header information var val; val = conn.getContentEncoding(); if (val != null && !gotContentEncoding) this._headers[this._headers.length] = {h:'Content-encoding', v:val}; val = conn.getContentLength(); if (val != -1 && !gotContentLength) this._headers[this._headers.length] = {h:'Content-length', v:val}; val = conn.getContentType(); if (val != null && !gotContentType) this._headers[this._headers.length] = {h:'Content-type', v:val}; val = conn.getDate(); if (val != 0 && !gotDate) this._headers[this._headers.length] = {h:'Date', v:(new Date(val)).toUTCString()}; val = conn.getExpiration(); if (val != 0 && !gotExpiration) this._headers[this._headers.length] = {h:'Expires', v:(new Date(val)).toUTCString()}; val = conn.getLastModified(); if (val != 0 && !gotLastModified) this._headers[this._headers.length] = {h:'Last-modified', v:(new Date(val)).toUTCString()}; // read response data var reqdata = ''; var stream = conn.getInputStream(); if (stream) { var reader = new java.io.BufferedReader(new java.io.InputStreamReader(stream, this._getCharset())); var line; while ((line = reader.readLine()) != null) { if (this.readyState == 2) { this.readyState = 3; if (this.onreadystatechange) { this.onreadystatechange(); } } reqdata += line + '/n'; } reader.close(); this.status = 200; this.statusText = 'OK'; this.responseText = reqdata; this.readyState = 4; if (this.onreadystatechange) { this.onreadystatechange(); } if (this.onload) { this.onload(); } } else { // error this.status = 404; this.statusText = 'Not Found'; this.responseText = ''; this.readyState = 4; if (this.onreadystatechange) { this.onreadystatechange(); } if (this.onerror) { this.onerror(); } } }; }; } // ActiveXObject emulation if (!window.ActiveXObject && window.XMLHttpRequest) { window.ActiveXObject = function(type) { switch (type.toLowerCase()) { case 'microsoft.xmlhttp': case 'msxml2.xmlhttp': case 'msxml2.xmlhttp.3.0': case 'msxml2.xmlhttp.4.0': case 'msxml2.xmlhttp.5.0': return new XMLHttpRequest(); } return null; }; } //上述代码也是网上广为流传的,请允许我调用,虽然我不知道原作者是谁:P
构造表单处理及提交javascript脚本 reg.js
HTML代码:
//获取页面指定ID公用函数 function GE(a){return document.getElementById(a);} //表单检测 function Check(){ //检测ID是否为空 if(GE('regid').value==''){GE('msg').innerHTML='ID不能为空';return false} //检测PASSWORD是否为空 if(GE('regpassword').value==''){GE('msg').innerHTML='password 不能为空';return false} //检测OK后提交数据 //建立XMLHttpRequest对象 var X=new XMLHttpRequest(); //检测浏览器是否支持XMLHttpRequest if(X){ //禁止客户端再次提交表单 GE('regsubmit').disabled=true; //onreadystatechange为XMLHttpRequest的状态改变的事件触发器 X.onreadystatechange=function(){ //readyState 对象状态 //0 = 未初始化 //1 = 读取中 //2 = 已读取 //3 = 交互中 //4 = 完成 if(X.readyState==4){ //交互完成的处理 //status,服务器返回的状态码, 200为成功 if(X.status==200){ //运行服务器返回的脚本 eval(X.responseText) } //服务器端程序运行失败,返回错误代码 else{GE('msg').innerHTML=X.statusText} } }; //获取服务器端数据 //open("method","URL"[,asyncFlag]) //请求的目标 URL, 方法 //采用POST为提交数据 //采用true为异步传输, false为同步传输 X.open('POST','reg.asp',true); X.setRequestHeader('Content-Type','application/x-www-form-urlencoded'); var SendData = 'regid='+GE('regid').value+'®password='+GE('regpassword').value X.send(SendData) } //不支持的话返回错误提示 else{ GE('msg').innerHTML='你的浏览器不支持XMLHttpRequest' } }
Step5:
OK,客户端页面全部完成, 重新调整下reg.html
HTML代码:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>注册 </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <script type="text/javascript" src="ajax.js"> </script> <script type="text/javascript" src="reg.js"> </script> </head> <body> <div id="msg"> </div> ID: <input type="text" id="regid" /> <br /> Password: <input type="password" id="regpassword" /> <br /> <input type="submit" id="regsubmit" οnclick="Check()" /> </body> </html>
构造服务器端程序 reg.asp
HTML代码:
<% dim regid, regpassword, str regid=Request.Form("regid") regpassword=Request.Form("regpassword") if regid="" or regpassword="" then str = "ID和PASSWORD必须填写" else '查询数据库是否存在该ID '代码略 if rs.EOF then '不存在则添加数据 '代码略 str = "注册成功,ID为" & regid & " , 密码为" & regpassword else str = "注册失败,ID已经存在" end if Set rs = nothing End if Response.Write "GE('msg').innerHTML='" & str & "';GE('regsubmit').disabled=false" Response.End %>
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
