⭐ 欢迎来到虫虫下载站！ | 📦 资源下载 📁 资源专辑 ℹ️ 关于我们
⭐ 虫虫下载站
📤 上传资源

📄 post_ajax_note.html

📁 无刷新技术AJAX,就是在不刷新网页的情况下更新网站内容
💻 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>PHP+Ajax 版发帖程序实例说明</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<style>
#content{background-color:#FFFEEC;border:1px dashed black;color:black;padding:10px;margin:10px;width:; table-layout:fixed; word-break:break-all; word-wrap:break-word; font-family:arial; font-size:90%} 
/*blockquote{padding:10px; background-color:#F2FFFA;}*/
blockquote{padding:10px; background-color:#EEEEFC;}
/*#li{font-weight:normal;font-size:100%;color:#006600;border:1px solid #cecece;background-color:white; padding:5px;}*/
#li{ color:#009900; padding:5px; font-weight:bold}
#mc{padding:10px; margin:10px; background-color:#F2FFFA}

#note{color:#666666;font-size:80%; margin:10px;}
</style>
</head>
<!--
//版权声明：本程序包括但不限于php,js代码，不经本人同意不得进行任何商业应用，本代码和效果可以供个人研究和使用，只需要保留最原始开发人信息即可;
//Blog:http://jiarry.blogchina.com
--->
<body>
<div align="center" style="font-family:Arial; background-color:#F2FFFA; border:1px solid #009933">
<h3 style="margin:5px; ">PHP+Ajax 版发帖程序实例说明</h3>
</div>
<div id="note">本文所讲例子基于windows或linux的apache+php5.0平台(<a href="http://jiarry.blogchina.com/2425368.html">查看安装文档</a>);</div>
<div id="content"><strong>概要说明</strong><br /> 
<blockquote>本例是用PHP+文本作后台，Ajax操作界面来实现的一个例子。这其实只是一个测试和实践，因为代码写的并不规范，也没有做优化和压缩。由于Ajax越来越火热，应用范围也越来越广，这种无刷新的WEB技术确实带给用户更多的方便和体验。我认为Ajax其实更应该是一种理念，不光只是一些技术的组合。它应该与RIA一样(或是RIA现阶段最好的体现)，而非是一种技术或是技术的组合，因为技术或是技术的结合总会是有局限性或时间性的。关键是怎么样提高用户体验，怎样让用户能像使用桌面软件或超过桌面软件一样便捷、迅速地操作WEB程序，能让WEB界面像桌面系统一样具有美丽的外观和实用的功能，这才是Ajax所要表达的意思。因为只有让用户感受到丰富，友好地界面操作，包括Ajax等的各种网页技术才会有它的价值。而在追逐时尚，张扬个性，讲究体验的现今网络时代时，给用户最好的才能是最好的。<br />
  <br />
  也正是基于此，看了prototype.js以及net.js以后才想要真正地做一个能够说明和实际应用Ajax的例子(其实05年初时就做过Ajax的应用，只是那时还没有Ajax统一叫法,当时模仿Google Suggest 做了一个自动提示程序)。代码写的并不好，但是我觉得算是一种Ajax的实际应用了包括xmlhttp,js,css,xhtml等加上后台的php文本操作，可以基本讲下Ajax是如何用的，供想学Ajax的人参考和讨论。<strong>源文件下载地址:</strong><a href="http://jarryli.googlepages.com/post_ajax.rar">http://jarryli.googlepages.com/post_ajax.rar</a>, 解压缩至apache+php里的相应目录即可运行</blockquote>  
<strong>结构说明</strong>(下面是一些关于结构的描述，代码里的描述请看代码里的注释，非常地详细，在这里都不多说了)<br /> 
<blockquote>1，先来看下目录结构，在post目录下建有action(用来放各种与后台操作相当的文件),data(用来存放数据文件),inc(用来存放包含内容文件),js(用来存放用到的js库),login(登录页面),validate(验证码页面)。<br />
  在post目前下有四个php文件，其中<br />
    showall_js.php是用来查看删除更多留言的界面，这里采用js解析得到的文本的方式。<br />
    showall_normal.php是采用普通查看删除更多的方式，没有什么特别，大家可能比较熟悉<br />
    showall_xml.php是采用js来解析得到的xml文档的方式<br />
  <img src="images/post03.gif" width="466" height="180" /><br />
  <br />
    2,具体文件说明：<br />
    <strong>action目录下的</strong><br />
    action.php用来接受提交的数据，并且保存到文本里去，这需要得到post的值即可。<br />
    delmessage.php是用来按传统方式删除文本里的数据的，用文本存储数据与数据库不太一样，删除每行时需要按指针或是全部覆盖原来的文件，不像数据可以update或delete。<br />
    delmessage_ajax.php这与传统的方式基本一致，只ajax版的删除完后给出一个成功提示，这样就通过xmlhttp来得到内容是否已经更新的提示。<br />
    msgjs.php用来输出供js的可以引用的文内容，将&quot;'\都作为转义处理<br />
    msgxml.php用来输入供js解析的xml文档， &lt;![CDATA $contents$ ]]&gt; 这样来引用带html或js的数据，不用转义处理<br />
    show_this_all.php用来按字符长度输出截取了更多的内容<br />
    show_this_all_normal.php用来普通版的显示截取了的更多内容<br />
    <strong>data目录下的</strong><br />
    LeaveMessage.text用来存储数据,采取分行显示的方式，每条数据以行(\r\n)为间隔，每条里的内容按(\t)tab键来间隔，取时按这个取。这时如果用数据库的话就简单多了。<br />
    <strong>inc目录下的</strong><br />
    delete.inc是php里调用的删除的些一函数命令<br />
    footer.inc是页脚<br />
    header.inc是页头<br />
    loaddata.inc是Ajax版调用数据时用的<br />
    loaddata_normal.inc是普通调用数据时用的，它与Ajax版没有区别，只是因为路径不同而做成了两个文件，一般一个文件就够了<br />
    page.inc是普通方式php调用翻页的class<br />
    substring.php是按英截取字符长度的一些公用函数<br />
    url.php只个测试文 档，没有其它用处 <br />
    <strong>login目录下的</strong><br />
    allow.php是否允许访问某个页面<br />
    login.php登录页面,loginValidate.php登录验证不,login_ajax.phpAjax版的登录页面<br />
    logout.php倒出注销页面<br />
    public.php是登录时共用的一些信息，如session等<br />
  <img src="images/post04.gif" width="539" height="532" /><br />
  <strong>js目录下的</strong><br />
ajax版的登录时用到的js, <br />
check.js检查多选时的js，<br />
darg.js拖动效果,<br />
net.js调用xmlhttp的js,<br />
page.js是翻页库，<br />
prototype.js不用提了，大名鼎鼎了，但本程序中没有使用它，因为只有某一些功能符合要求，所以采用简单net.js即可,<br />
settable.js是一个控制表格如分行显示颜色，重显表头啦等等,<br />
showmore.js是当截取字符查看更多时的用到js<br />
showtip.js是一个提示与关闭提示用到的一些js函数<br />
<strong>validate目录下的</strong><br />
img.php是生成验证码的php程序<br />
<br />
下面是一些界面抓图<br />
<br />
<strong>首页显示取前10条发帖内容的界面</strong><br />
  <img src="images/post01.gif" width="1033" height="533" /><br />
  <strong>发帖处的截图</strong><br />
  <img src="images/post02.gif" /><br />
  <br />
  <strong>删除发帖里的截图</strong><br />
  <img src="images/post05.gif" width="874" height="458" /><br />
  <br />
  <strong>登录框</strong><br />
  <img src="images/post06.gif" width="832" height="220" /></blockquote>
后记说明<br /> 
<blockquote>这其实只是一个测试和实践，因为代码写的并不规范，也没有做优化和压缩。由于Ajax越来越火热，应用范围也越来越广，这种无刷新的WEB技术确实带给用户更多的方便和体验。越来越多感兴趣的朋友也开始用Ajax来开发WEB程序。我感觉用Ajax会有以下几个优点和好处:<br />
  <strong>优点</strong><br />
  1，增强用户体验，(页面无刷新，减少用户等待时间，给用户友好提示 等等)<br />
  2，减少请求的内容并减少请求次数，只发送需要更新的请求数据，不变的仍然不改变，且得到内容后即可将内容保存在js里，等用时再显示。这点来讲节省了带宽和成本。<br />
  3，显示速度加快，页面动态交互效果增强，让用户感受软件界面的应用<br />
  4，web2.0的一种应用吧，也是种RIA的实际应用，有效结合了B/S与C/S模式<br />
  <br />
  <strong>缺点：</strong><br />
  1，客房端程序编写复杂不利用调试，没有好的IDE，用Eclipse装插件不错，用JavaScript Edtior 也可以，不过最好还是用Ultra Edit ,本例子主要用的就是Ultra Edit。 <br />
  2，不够安全，通过xmlhttp来获取数据确实不太安全，不过就算传统的应用，照样可能受到xmlhttp请求攻击<br />
  3，采用js解析文本的方式是个不错的主意，速度快，但不好定以什么间隔内容，若采用xml，效率低，速度慢，便xml不用转义字符，且通用性比较好，建议大众用的一些数据用xml，比如rss\tag\天气预报等等，其它留言等信息采用文本的方式较好。<br />
  4，还有些Ajax的设计小问题，比如没有后退页，秒利用搜索引擎抓取啦等等，不过这些都不是大问题。都会有相应方法解决，这不会成为Ajax发展的阻碍。<br />
  <br />
下载地址:<a href="http://jarryli.googlepages.com/post_ajax.rar" target="_blank">http://jarryli.googlepages.com/post_ajax.rar</a></blockquote>
</div>
<div align="center" style="font-family:Arial;padding:5px;background-color:#F2FFFA; border:1px solid #009933">
<font size="-2">若有任何问题请联系: E-mail:<a href="mailto:Jiarry@hotmail.com">Jiarry@hotmail.com</a></font><br />
<b>All Right Reserved Please visit <a href="http://jiarry.126.com" target="_blank" onMouseOver="this.style.backgroundColor='green';this.style.color='white'" onMouseOut="this.style.backgroundColor='';this.style.color='green'" style="color:green;"> http//:jiarry.126.com</a><sup>&reg;</sup> or  <a href="http://jiarry.blogchina.com" target="_blank" onMouseOver="this.style.backgroundColor='green';this.style.color='white'" onMouseOut="this.style.backgroundColor='';this.style.color='green'" style="color:green;"> http//:jiarry.blogchina.com</a></b><br>
Copyright@Jiarry.126.com <font size="-1">版权皮子(Jiarry/Jarry)所由.如需转载请注明作者及出处并保留版权与声明信息.谢谢! </font><br>
</div>
<br />

</body>
</html>

⌨️ 快捷键说明

复制代码 Ctrl + C
搜索代码 Ctrl + F
全屏模式 F11
切换主题 Ctrl + Shift + D
显示快捷键 ?
增大字号 Ctrl + =
减小字号 Ctrl + -