周末给自己放了一个小假,周五晚上跟同学出去吃饭,周六又休息了一天,直到周日才坐到电脑前面码字。 本来说好周末这两天把之前三篇的代码根据评论中的建议好好修改一下的,顺便认真系统地学习一遍HTML基
周末给自己放了一个小假,周五晚上跟同学出去吃饭,周六又休息了一天,直到周日才坐到电脑前面码字。
本来说好周末这两天把之前三篇的代码根据评论中的建议好好修改一下的,顺便认真系统地学习一遍HTML基础。结果现在看来是赶不及了,因为这篇文章写完后要给妹子看,毕竟课程设计的进度也能拖太久,已经过了一个星期,只剩半个月的时间不到。我打算等整个系列写完之后,再花足够多的时间来整理完善,可以根据初学者的特点增加一些内容:例如如何学习HTML、如何找出PHP代码中的BUG并解决之类的东西。因为老同学很用功,很多东西都不需要我讲,她自己就看书看懂了,省了不少事。
遇到一个知道努力而且聪明的“学生”是多么的不容易,相信很多以各种形式当过“老师”的朋友都会有这样的感叹。既然遇到了,那就更应该以一个负责任的态度去教。写博客,其实也是一样的道理,既然有这么多的点击率(其中至少有那么几个人是抱着学习参考的目的来看的),那就必须要尽心尽力去写好。
作为程序员,整天面对着电脑以及身处一个男女比例极端失调的工作群体,能跟女性接触的机会本来就难得,要想遇到一个令自己动心而且对方还对自己有好感的女生就更是难上加难了。所以,如果真的缘分来到,让你遇上一个这样的女孩子,一定要好好珍惜。就像之前几篇说的那样,只要拿出琢磨代码和BUG的十分之一精力好好待她,就不会有什么大问题。虽然我还没毕业参加工作,但是常常会听说IT行业经常需要加班加点,甚至周末也没时间陪女友陪家人。实际情况是不是真的如此,是不是非常普遍,希望大家能在评论中告诉一下楼主自己切身和听闻的现实情形。然而无论如何,珍惜眼前人,待好眼前人毕竟才是最重要的。想想办法,抽出时间,多跟自己心仪的女生约会,多跟交心的朋友聚会,多回家陪陪逐渐年迈的父母。
且不说感情需要维系,能跟他们在一起的日子,已经在飞逝的流光中越来越少了。——写在毕业前九个月。
—————————————————————闲聊结束——————————————————————
前情回顾:在第(3)篇中,我们一起给妹子示范了如何与数据库进行简单的交互,并且讲解了简单的MVC架构原理。妹子在看完博客之后,我就让她先想好项目的框架到时候要怎么搭,有多少个文件,文件之间的关系又是怎么样的。下面,让大家看看她的一部分成果:
<span> 1</span> <span>四、管理资源的页面 OK </span><span> 2</span> <span>Veiw: </span><span> 3</span> [<span>8</span><span>] 管理资源页面manage.php(管理资源界面的视图,显示添加资源,添加资源时必须给该资源选择一个资源类型,若没有匹配的资源类型,旁边有一个可以选择添加资源类型的超链接,连接到manage_type.php。表单action到do_manage.php那里,用js判断是否有空的选项) </span><span> 4</span> [<span>9</span><span>]添加资源类型页面manage_type.php。可以设置资源的最小单位和起始时间。 </span><span> 5</span> <span>Control: </span><span> 6</span> [<span>10</span>]处理增加信息 do_manage.php(处理manage.php传来的数据。利用Class_manage类里的resource_exist()方法,判断是否已经有该资源,有,<span>return</span> <span>1</span><span>。若没有该资源,利用insert_resource()方法添加资源到数据库resource。) </span><span> 7</span> [<span>11</span>]处理增加资源类型do_manage_type.php(处理manage_type.php传来的数据。利用Class_type类里的type_exist()方法,判断是否已经有该资源,有,<span>return</span> <span>1</span><span>。若没有该资源,利用insert_type()方法添加资源到数据库type。) </span><span> 8</span> <span> 9</span> <span>Model: </span><span>10</span> [<span>12</span><span>]自定义处理管理资源的类do_manage_model.php(定义Class_manage类, </span><span>11</span> <span>方法有: resource_exist(资源类型,资源名称)方法判断是否已经有该资源。 insert_resource(资源名,资源类型)方法,插入数据库。) </span><span>12</span> [<span>13</span>]Class_type类(Type_exist(资源类型)方法,用于在添加资源类型时,判断是否有该资源类型。Insert_type(资源类型,开始时间,结束时间,时间单位)插入数据库)
令人惊喜的是,妹子已经对整个项目的框架有所把握了,那么我现在要做的事是什么呢?有人可能会想,既然框架都已经在自己的帮助下七七八八了,剩下自己就安心做别的,等妹子在开发过程中遇到什么问题再问自己好了。这样的想法不能说是错,但是,如果我们可以事先把项目中的一些关键地方帮妹子想好解决方案,到时候就会省去她很多的摸索时间以及也可以让自己不会因为临时遇到问题为了尽快回答而给出一个比较没那么好的策略。(而且,我们邪恶地想想,妹子刚遇到问题我们就给出一个近乎完美的解决方案,然后还装X地说:“早知道你会遇到这个问题,我都帮你想好啦。”妹子顿时感觉自己体贴入微有木有啊!!!顿时对自己加分加分再加分有木有啊!!!)
例如就这个管理资源页面——有许多不同的资源,那么每个资源的显示方式不尽相同,如果每切换一个资源或一类资源就切换一次页面的话,不仅用户体验不太好(想象一下你每切一个资源就刷新好久),而且还会对网络负载带来不必要的负担。因为不同的资源它们的资源管理页面都大致相同,某些部分是一模一样的,所以,我想看到这里,许多人都会跟我想到一块儿去,那就是传说中高端大气上档次的AJAX。
读音:e:j^ks 。AJAX即“Asynchronous JavaScript and XML”(异步JavaScript和XML),AJAX并非缩写词,而是由Jesse James Gaiiett创造的名词,是指一种创建交互式网页应用的网页开发技术。Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。简而言之,XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。——来自《百度百科》
看完这些,其实妹子也不会对AJAX有多少认识,我们还是直接上例子吧!通过实际的示范,说明它到底是是一个什么样的东西。
第八步:简单的AJAX示范
声明:代码重构来源自陈浩编著的《零基础学PHP》。另外也介绍大家看看这本书,对于新手入门还是蛮不错的,但深层次的东西却几乎没有。
首先,我们看一下HTML+JavaScript的部分(妹子问我,JavaScript跟Java是什么关系啊?看起来这么像。我引用网上说法,回答说:嗯嗯,大概就是雷锋跟雷峰塔的关系吧。)
ajax.html
<span> 1</span> <span><span>DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"</span><span>></span> <span> 2</span> <span><span>html</span><span>></span> <span> 3</span> <span><span>head</span><span>></span> <span> 4</span> <span><span>meta </span><span>http-equiv</span><span>="Content-Type"</span><span> content</span><span>="text/html; charset=UTF-8"</span><span>></span> <span> 5</span> <span><span>title</span><span>></span>ajax应用实例<span></span><span>title</span><span>></span> <span> 6</span> <span> 7</span> <span><span>script </span><span>language</span><span>='javascript'</span><span>></span> <span> 8</span> <span>var</span><span> xmlHttp</span><span>=</span><span>null</span><span>; </span><span> 9</span> <span> 10</span> <span>/*</span> <span> 11</span> <span> * 获取XmlHttpRequest对象 </span><span> 12</span> <span> * 使用XMLHttpRequest对象是实现AJAX技术的第一步 </span><span> 13</span> <span>*/</span> <span> 14</span> <span>function</span><span> GetXmlHttpRequest() </span><span> 15</span> <span>{ </span><span> 16</span> <span>var</span><span> xmlHttp</span><span>=</span><span>null</span><span>; </span><span> 17</span> <span>/*</span> <span> 18</span> <span> *由于不同的浏览器使用不同的方法创建XMLHttpRequst对象 </span><span> 19</span> <span> *例如IE使用的是ActiveXObject </span><span> 20</span> <span> *所以在这里使用try-catch嵌套形式创建该对象 </span><span> 21</span> <span>*/</span> <span> 22</span> <span>try</span> <span> 23</span> <span> { </span><span> 24</span> <span> xmlHttp </span><span>=</span> <span>new</span><span> XMLHttpRequest();</span><span>//</span><span>对于Firefox等浏览器</span> <span> 25</span> <span> } </span><span> 26</span> <span>catch</span><span>(e) </span><span> 27</span> <span> { </span><span> 28</span> <span>try</span><span>{ </span><span> 29</span> <span> xmlHttp </span><span>=</span> <span>new</span><span> ActiveXObject(</span><span>"</span><span>Msxm12.XMLHTTP</span><span>"</span><span>);</span><span>//</span><span>对于IE浏览器</span> <span> 30</span> <span> } </span><span> 31</span> <span>catch</span><span>(e) </span><span> 32</span> <span> { </span><span> 33</span> <span>try</span><span>{ </span><span> 34</span> <span> xmlHttp </span><span>=</span> <span>new</span><span> ActiveXObject(</span><span>"</span><span>Microsoft.XMLHTTP</span><span>"</span><span>); </span><span> 35</span> <span> } </span><span> 36</span> <span>catch</span><span>(e) </span><span> 37</span> <span> { </span><span> 38</span> <span> xmlHttp </span><span>=</span> <span>false</span><span>;</span><span>//</span><span>若返回false,表示创建对象失败</span> <span> 39</span> <span> } </span><span> 40</span> <span> } </span><span> 41</span> <span> } </span><span> 42</span> <span> 43</span> <span>return</span><span> xmlHttp; </span><span>//</span><span>返回XMLHttpRequest对象</span> <span> 44</span> <span>} </span><span> 45</span> <span> 46</span> <span>function</span><span> sendRequest() </span><span>//</span><span>发送异步请求</span> <span> 47</span> <span>{ </span><span> 48</span> <span>//</span><span>获取表单的文本框province的值</span> <span> 49</span> <span>var</span><span> prov_name </span><span>=</span><span> document.getElementById(</span><span>"</span><span>province</span><span>"</span><span>).value; </span><span> 50</span> <span> 51</span> <span>if</span><span>((prov_name </span><span>==</span> <span>null</span><span>) </span><span>||</span><span> (prov_name </span><span>==</span> <span>""</span><span>)) </span><span> 52</span> <span>return</span><span>; </span><span> 53</span> <span> 54</span> <span> xmlHttp </span><span>=</span><span> GetXmlHttpRequest(); </span><span> 55</span> <span>if</span><span>(xmlHttp </span><span>==</span> <span>null</span><span>) </span><span> 56</span> <span> { </span><span> 57</span> <span> alert(</span><span>"</span><span>浏览器不支持XmlHttpRequest!</span><span>"</span><span>); </span><span> 58</span> <span>return</span><span>; </span><span> 59</span> <span> } </span><span> 60</span> <span> 61</span> <span>//</span><span>构建请求的URL地址</span> <span> 62</span> <span>var</span><span> url </span><span>=</span> <span>"</span><span>ajax.php</span><span>"</span><span>; </span><span> 63</span> <span> url</span><span>=</span><span>url</span><span>+</span><span>"</span><span>?prov=</span><span>"</span><span>+</span><span>prov_name; </span><span> 64</span> <span> 65</span> <span> xmlHttp.open(</span><span>"</span><span>GET</span><span>"</span><span>,url,</span><span>true</span><span>);</span><span>//</span><span>使用GET方法打开一个到url的连接,为发出请求做准备</span> <span> 66</span> <span> xmlHttp.onreadystatechange </span><span>=</span><span> updatePage;</span><span>//</span><span>设置一个函数,当服务器处理完请求后调用,名为updatePage</span> <span> 67</span> <span> xmlHttp.send(</span><span>null</span><span>);</span><span>//</span><span>发送请求</span> <span> 68</span> <span>} </span><span> 69</span> <span> 70</span> <span>function</span><span> updatePage() </span><span>//</span><span>定义回调函数,处理服务器响应</span> <span> 71</span> <span>{ </span><span>/*</span> <span> 72</span> <span> *当readyState属性值为4时,表示相应加载完毕;status属性值为200时,表示一切正常 </span><span> 73</span> <span> *更多XMLHttpRequest对象的属性及其含义请参考相关资料 </span><span> 74</span> <span>*/</span> <span> 75</span> <span>if</span><span>(xmlHttp.readyState </span><span>==</span> <span>4</span> <span>&&</span><span> xmlHttp.status </span><span>==</span> <span>200</span><span>) </span><span> 76</span> <span> { </span><span> 77</span> <span>var</span><span> response </span><span>=</span><span> xmlHttp.responseText;</span><span>//</span><span>获取服务器返回的数据,以字符串的形式给出</span> <span> 78</span> <span> document.getElementById(</span><span>"</span><span>city</span><span>"</span><span>).innerHTML </span><span>=</span><span> response;</span><span>//</span><span>设置内部HTML为response的内容</span> <span> 79</span> <span> } </span><span> 80</span> <span>} </span><span> 81</span> <span></span><span>script</span><span>></span> <span> 82</span> <span> 83</span> <span></span><span>head</span><span>></span> <span> 84</span> <span> 85</span> <span><span>body</span><span>></span> <span> 86</span> <span><span>h3</span><span>></span>请选择一个省(自治区):<span></span><span>h3</span><span>></span> <span> 87</span> <span> 88</span> <span><span>form </span><span>action</span><span>="ajax.php"</span><span>></span> <span> 89</span> <span><span>div</span><span>></span> <span> 90</span> <span><span>select </span><span>id</span><span>="province"</span><span> onchange</span><span>="sendRequest()"</span><span>></span> <span> 91</span> <span><span>option </span><span>value</span><span>=""</span><span>></span>请选择一个省(自治区)<span></span><span>option</span><span>></span> <span> 92</span> <span><span>option </span><span>value</span><span>="ah"</span><span>></span>安徽<span></span><span>option</span><span>></span> <span> 93</span> <span><span>option </span><span>value</span><span>="fj"</span><span>></span>福建<span></span><span>option</span><span>></span> <span> 94</span> <span><span>option </span><span>value</span><span>="gs"</span><span>></span>甘肃<span></span><span>option</span><span>></span> <span> 95</span> <span><span>option </span><span>value</span><span>="gd"</span><span>></span>广东<span></span><span>option</span><span>></span> <span> 96</span> <span><span>option </span><span>value</span><span>="gx"</span><span>></span>广西<span></span><span>option</span><span>></span> <span> 97</span> <span><span>option </span><span>value</span><span>="gz"</span><span>></span>贵州<span></span><span>option</span><span>></span> <span> 98</span> <span><span>option </span><span>value</span><span>="hn"</span><span>></span>海南<span></span><span>option</span><span>></span> <span> 99</span> <span><span>option </span><span>value</span><span>="hb"</span><span>></span>河北<span></span><span>option</span><span>></span> <span>100</span> <span><span>option </span><span>value</span><span>="hh"</span><span>></span>河南<span></span><span>option</span><span>></span> <span>101</span> <span><span>option </span><span>value</span><span>="hl"</span><span>></span>黑龙江<span></span><span>option</span><span>></span> <span>102</span> <span></span><span>select</span><span>></span> <span>103</span> <span></span><span>div</span><span>></span> <span>104</span> <span></span><span>form</span><span>></span> <span>105</span> <span>106</span> <span><span>div </span><span>id</span><span>="city"</span><span>></span> <span>107</span> <span></span><span>div</span><span>></span> <span>108</span> <span>109</span> <span></span><span>body</span><span>></span> <span>110</span> <span></span><span>html</span><span>></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
再来看看服务器端的PHP代码,ajax.php
<span> 1</span> <span>php </span><span> 2</span> <span>$city_arr</span> = <span>array</span><span>( </span><span> 3</span> "ah"=>"合肥", <span> 4</span> "fj"=>"福州", <span> 5</span> "gs"=>"兰州", <span> 6</span> "gd"=>"广州", <span> 7</span> "gx"=>"南宁", <span> 8</span> "gz"=>"贵阳", <span> 9</span> "hn"=>"海口", <span>10</span> "hb"=>"石家庄", <span>11</span> "hh"=>"郑州", <span>12</span> "hl"=>"哈尔滨" <span>13</span> <span>); </span><span>14</span> <span>15</span> <span>if</span>(!<span>empty</span>(<span>$_Get</span>['prov'<span>])){ </span><span>16</span> <span>$prov</span> = <span>$_GET</span>['prov'];<span>//</span><span>获取GET请求中的prov参数</span> <span>17</span> <span>echo</span> <span>$prov</span><span> ; </span><span>18</span> <span>echo</span> <span>iconv</span>("GB2312","UTF-8",'<font color="red">您没有选择省(自治区)</font>'<span>); </span><span>19</span> <span>//</span><span>使用PHP的iconv函数做字符编码转换,以便XMLHttpRequest对象能够正确显示数据</span> <span>20</span> <span>} </span><span>21</span> <span>else</span> <span>22</span> <span>{ </span><span>23</span> <span>$prov</span> = <span>$_GET</span>['prov'<span>]; </span><span>24</span> <span>$city</span> = <span>$city_arr</span>[<span>$prov</span><span>]; </span><span>25</span> <span>echo</span> <span>iconv</span>("GB2312","UTF-8",'所选省(自治区)省会(首府)为:'.<span>$city</span>);<span>//</span><span>显示对应的省会(首府)城市</span> <span>26</span> <span>} </span><span>27</span> ?>
大家可以把代码复制一下,好好感受ajax到底是什么东西。我觉得学习是一个由浅入深的过程,有些看不懂的地方可以暂时放一放,先用起来再说。
另外,这次的例子最后向浏览器相应的是一个字符串,而不是XML。之所以这样安排,是为了便于妹子理解AJAX的工作原理以及使用方法,而不用同时再去学习XML方面的知识,造成过多的压力。
然而,服务器的相应是XML才更符合AJAX的本质。如果浏览器端得到的相应是XML,那么在回调函数中就要实现对XML的处理,最终完成页面内容的更新。至于如何使用PHP处理XML的相关知识和方法,我们下次再说~
————————————————————分割线重出江湖————————————————————
最后聊点别的,不感冒的朋友请直接跳过。
我认识几个父母在自己小时候就离婚的朋友,他们的故事几乎如出一辙:爸妈工作(做生意)很忙,经常不在一起,全家一起吃饭的时间一个星期不到三四次。家里的经济条件越来越好,家的氛围也越来越淡。最后离婚的时候,一个朋友的妈妈问她以后想跟谁一起生活,她的一句话让她妈妈当场流下泪来:“跟谁都一样,反正你们都不管我。”
有些孩子不学好,爸妈一味就只知道训斥,说什么“我在外面挣钱养家,供你上学读书,你还这么不听话?”父母养育儿女,除了把他们“养”大之外,还要“教”他们。总是以忙为理由,跟孩子待在一起的时间少的可怜,成绩不好或者在学校惹事了除了骂还是骂,教过孩子写作业么?平时好好管过孩子么?除了简单粗暴地给钱和把气撒在心智不成熟的孩子身上,还会点什么?
我看见过一条公益广告宣传语,印象很深——再贵的玩具,都比不上爸爸好玩。
周杰伦有一首歌,叫做《我不配》(这会不会暴露我的年龄和品味下限?)。里面有一句歌词:
是我忽略
你不过要人陪
小孩需要人陪,大人也需要人陪。我以后无论工作如何,一定要多回家看看爸妈,哪怕自己工资低给不了多少家用,关心关心他们身体,聊聊最近发生的事,让他们开心点是一点。写着写着,有点想家了。