手把手教你用ajax搭建页面
来源:互联网 发布:华工 美国人 知乎 编辑:程序博客网 时间:2024/05/21 10:34
二.为什么要用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 supportif (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 supportif (window.opera && !window.XMLHttpRequest){window.XMLHttpRequest = function(){this.readyState = 0; // 0=uninitialized,1=loading,2=loaded,3=interactive,4=completethis.status = 0; // HTTP status codesthis.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 dataconn.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 informationvar 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 datavar 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{// errorthis.status = 404;this.statusText = 'Not Found';this.responseText = '';this.readyState = 4;if (this.onreadystatechange){this.onreadystatechange();}if (this.onerror){this.onerror();}}};};} // ActiveXObject emulationif (!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();//检测浏览器是否支持XMLHttpRequestif(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').valueX.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" onclick="Check()" /></body></html>
构造服务器端程序 reg.asp
HTML代码:
<%dim regid, regpassword, strregid=Request.Form("regid")regpassword=Request.Form("regpassword")if regid="" or regpassword="" thenstr = "ID和PASSWORD必须填写"else'查询数据库是否存在该ID'代码略if rs.EOF then'不存在则添加数据'代码略str = "注册成功,ID为" & regid & " , 密码为" & regpasswordelsestr = "注册失败,ID已经存在"end ifSet rs = nothingEnd ifResponse.Write "GE('msg').innerHTML='" & str & "';GE('regsubmit').disabled=false"Response.End%>
- 手把手教你用ajax搭建页面
- 手把手教你搭建SpringMVC
- 手把手教你用AJAX做聊天程序
- 手把手教你在Github Pages搭建自己写的页面
- 手把手教你用亚马逊云搭建免费VPN服务器
- 手把手教你用github pages搭建博客 最新版
- 手把手教你用Java搭建自己的网站
- 手把手教你用Mysql-Cluster-7.5搭建数据库集群
- 手把手教你用Mysql-Cluster-7.5搭建数据库集群
- 手把手教你用Mysql-Cluster-7.5搭建数据库集群
- 手把手教你用亚马逊云搭建免费VPN服务器
- 手把手教你用Mysql-Cluster-7.5搭建数据库集群
- 手把手教你用webpack来搭建一个项目
- 手把手教你用Hexo搭建免费个人博客
- 手把手教你搭建OA服务器
- 手把手教你搭建NOD32升级服务器
- 手把手教你搭建ucenter环境
- 手把手教你appium_mac上环境搭建
- 菜鸟是怎么练成的(三)
- 菜鸟是怎么练成的(四)
- 上帝也会犯错,何况是微软!
- 在浮躁的年代里做好学问,难!
- AJAX的简单例子
- 手把手教你用ajax搭建页面
- 星际争霸兵种的诉苦(简略版)
- C#中的公共勾子类
- cisco
- 计算机类核心期刊(半月刊)
- linux下打包
- 阴影技术
- Servlet技术
- 在防火墙配置ArcGIS License server的端口