B/S真是一个长见识的阶段，认识了很多前端必备的语言，随着时间的增加，本以为新闻发布系统中学到的那些我还不知道是什么的东西，会早已没了印象。但反而却更加深刻了，当时还不知道什么是CSS，就学会了写CSS。还不是什么是异步通信，就学会了用AjaX。当看到视频中的经典框架时，才发现，这不就是新闻发布系统中用到的CSS+DIV么！(⊙o⊙)哦，原来我早就会写了！ ## 一、为什么是DIV+CSS 　　看到这个搭配，我就在想为什么是这样的组合？Span不可以么！直接用HTML不可以么！一个很明确的目的：为了让数据内容与数据格式分离，方便前端er开发和维护。想象一下，一个内链样式表的语句 ~~~ ~~~ 　　如果需要修改任何一个前端元素的样式，只要在样式表中去查找ID或类别名就可以了，这无疑大大提高了开发的效率。 　　还有一个问题就是为什么Span不可以？SPAN和DIV的区别在于，DIV(division)是一个块级元素，可以包含段落、标题、表格，乃至诸如章节、摘要和备注等。而SPAN是行内元素，SPAN的前后是不会换行的，它没有结构的意义，纯粹是应用样式，当其他行内元素都不合适时，可以使用SPAN。 ## 二、一步步实现DIV+CSS ### Step ONE：DIV分块 　　首先要考虑到网页分为几个展示部分，Banner和Footer是必备的，其他内容的展示就是个性的问题了，分配给相应的DIV块。  ### Step Two：DIV定位——盒子模型 　　用CSS样式表给DIV定位，就要用到我们的盒子模型了，如它的名字，盒子是用来存放东西的，可以任意的挪动。当然更专业的词，我们称它为浮动。下面就是盒子模型的展示，margin、border、padding。如果你可以联想到照相馆墙上的画面那就再好不过了！   ### Step Three：整体架构 　　以下的代码是第一张原型的诠释，是一个很基础的CSS+DIV的实现结果。其中用到了盒子浮动的效果，让content模块和link模块各自向左右两边浮动。 ~~~ ~~~ 效果图如下：  ## 三、小结 　　在有了CSS与DIV组合之后，网页的加载变得轻松，因为数据与格式的分离，让维护更加容易。搜索效率和浏览效率的提高，会带来很好的用户体验。So...CSS+DIV构成的如此简洁的源代码前台，是我们学习前端开发的必备基础。

　　信息化到处被提及的特点，就是拥有大量的数据交互的格式。前阵子学习了XML的结构化数据，在学习javascript的时候又接触到了JSON，都作为数据的存储格式，二者之间有什么区别和联系呢，查了很多的资料，小编在这里就相当于写个总结了。 　　十年前，XML是主要的数据交换格式。它的出现，尤如一股清新的空气，以及令人惊喜的SGML（标准通用标记语言），是一个巨大的进步。它使人们能够做到以前想都不敢想的事情,本质上讲，XML就是一个文本文件，在解析上，在普通的web应用领域，开发者经常为XML的解析伤脑筋，无论是服务器端生成或处理XML，还是客户端解析XML，都常常导致复杂的代码，极低的开发效率，无疑让JSON占了上风，加上在javascript的领域中，利用toJSONString()就可以看到JSON的字符串结构。 ## 一、JSON是什么 　　JSON : JavaScript Object Notation 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。JSON采用完全独立于语言的文本格式，但是也使用了类似于C语言家族的习惯（包括C, C++, C#, Java, JavaScript, Perl, Python等）。这些特性使JSON成为理想的数据交换语言。 　　关于XML的详细介绍（见博客：[B/S初探之XML学习小结](http://blog.csdn.net/zhou2s_101216/article/details/42215059)）。 ## 二、JSON的优缺点 　优点： 　　（1）数据格式比较简单，易于读写，格式都是压缩的，占用带宽小； 　　（2）易于解析，客户端JavaScript可以简单的通过eval_r()进行JSON数据的读取； 　　（3）支持多种语言，包括ActionScript, C, C#, ColdFusion, Java, JavaScript, Perl, PHP, Python, Ruby等服务器端语言，便于服务器端的解析； 　　（4）在PHP世界，已经有PHP-JSON和JSON-PHP出现了，偏于PHP序列化后的程序直接调用，PHP服务器端的对象、数组等能直接生成JSON格式，便于客户端的访问提取； 　　（5）因为JSON格式能直接为服务器端代码使用，大大简化了服务器端和客户端的代码开发量，且完成任务不变，并且易于维护。 　 缺点： 　　（1）没有XML格式这么推广的深入人心和喜用广泛，没有XML那么通用性； 　　（2）JSON格式目前在Web Service中推广还属于初级阶段 ## 三、XML的优缺点 　优点： 　　（1）格式统一，符合标准； 　　（2）容易与其他系统进行远程交互，数据传输比较方便。 　缺点： 　　（1）XML文件庞大，文件格式复杂，传输占带宽； 　　（2）服务器端和客户端都需要花费大量代码来解析XML，导致服务器端和客户端代码变得异常复杂且不易维护； 　　（3）客户端不同浏览器之间解析XML的方式不一致，需要重复编写很多代码； 　　（4）服务器端和客户端解析XML花费较多的资源和时间。 ## 四、二者比较 　1、可读性 　　JSON和XML的可读性可谓不相上下，一边是简易的语法（JSON），一边是规范的标签形式（XML），很难分出胜负。 　2、可扩展性 　　XML天生有很好的扩展性，JSON当然也有，没有什么是XML可以扩展而JSON却不能扩展的。不过JSON在Javascript主场作战，可以存储Javascript复合对象，有着xml不可比拟的优势。 　3、编码难度 　　XML有丰富的编码工具，比如Dom4j、JDom等，JSON也有提供的工具。无工具的情况下，相信熟练的开发人员一样能很快的写出想要的xml文档和JSON字符串，不过，xml文档要多很多结构上的字符。 　4、解码难度 　　XML的解析方式有两种：一是通过文档模型解析，也就是通过父标签索引出一组标记。例如：xmlData.getElementsByTagName("tagName")，但是这样是要在预先知道文档结构的情况下使用，无法进行通用的封装。另外一种方法是遍历节点（document 以及 childNodes）。这个可以通过递归来实现，不过解析出来的数据仍旧是形式各异，往往也不能满足预先的要求。凡是这样可扩展的结构数据解析起来一定都很困难。JSON也同样如此。 　5、有效数据率 　　JSON作为数据包格式传输的时候具有更高的效率，这是因为JSON不像XML那样需要有严格的闭合标签，这就让有效数据量与总数据包比大大提升，从而减少同等数据流量的情况下，网络的传输压力。 　　以上都是我查到的，不怕脑洞不够大，一张导图总结以上的内容：  ## 五、举例 　　XML： ~~~ 　　 中国　　 黑龙江哈尔滨大庆 广东广州深圳珠海 台湾台北高雄 新疆乌鲁木齐 ~~~ 　　JSON： ~~~ { "people": [ { "firstName": "Brett", "lastName":"McLaughlin", "email": "aaaa" }, 　　 { "firstName": "Jason", "lastName":"Hunter", "email": "bbbb"}, 　　 { "firstName": "Elliotte", "lastName":"Harold", "email": "cccc" } 　　 ]} ~~~ ## 六、总结 　　个人认为JSON更好，因为它不像XML那么详尽，并且比起纯二进制更容易被人们理解。XML已经被业界广泛的使用，而JSON才刚刚开始，但是在Ajax这个特定的领域，为了实现友好的异步数据传输，JSON还是很有潜力的。

　　最近看着人事系统的代码，还真是头疼。。为了尽快上手，看懂点东西，便快马加鞭了。看到前台用到了cookie，正好JS也学到了这个地方，这样就介绍一下Cookie的应用。 ## 一、Cookie是什么 　　Cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。你可以使用 JavaScript 来创建和取回 cookie 的值。Cookie是由服务器端生成，发送给User-Agent（一般是浏览器），浏览器会将Cookie的key/value保存到某个目录下的文本文件内，下次请求同一网站时就发送该Cookie给服务器。 　　比如说，当你第一次访问淘宝时，要输入你的用户名和密码，这时用户信息会存储在你的浏览器的文本文件中，当你退出后内容就会存在硬盘中，下一次发生会话时，就读入到RAM中。 ## 二、Cookie干什么 　　随着web越来越复杂，开发者急切的需要能够本地化存储的脚本功能。Cookie的意图就是在本地的客户端的磁盘上以很小的文件形式保存数据。 ## 三、Cookie局限性 　（1）每个特定的域名下最多产生10个cookie。 　（2）cookie的最大大约是4096字节（4k），为了更好的兼容性，一般不能超过4095字节。 　（3）cookie存储在客户端的文本文件，所以特别重要和敏感的数据是不建议保存在cookie中的。这里是考虑安全性的问题。 ## 四、Cookie如何工作   　（1）客户端通过浏览器发送报文给服务器，请求连接。 　（2）服务器端收到要求，根据客户端的要求建立一个Set-Cookies Header。 　（3）服务器端通过建立Response Header去返回给客户端。 　（4）客户端收到报文，解析，获取cookie，存在本机内存。   Cookie有几个重要的属性，Cookie中有一个Expires（有效期）属性，这个属性决定了Cookie的保存时间，也可以重新设定来改变它，若不设置该属性，那么Cookie只在浏览网页期间有效，关闭浏览器后，这些Cookie会自动消失。还有path属性，可以限制访问Cookie的目录，domain用来限制域名访问，secure指定必须通过Https加密通信访问。对服务器起作用的是name和value属性。 ## 五、创建，读取，删除Cookie 　　下面的例子中，分别写了四个函数创建，读取，删除，检测cookie的值。 ~~~ ~~~ ## 六、小结 　　本文简单的从几个角度介绍了：定义，作用，缺点，使用，流程。这让我联想到，Cookie通过在客户端记录信息确定用户身份，Session通过在服务器端记录信息确定用户身份。什么时候使用Cookie，什么时候使用Session，还是需要仔细研究的。

## 前言：    文档对象模型（Document Object Model，简称DOM），是W3C组织推荐的处理可扩展置标语言的标准编程接口。它是一种与平台和语言无关的应用程序接口(API),它可以动态地访问程序和脚本,更新其内容、结构和www文档的风格(目前,HTMl和XML文档是通过说明部分定义的)。    文档对象模型提供了一种访问和修改HTML文档内容的方法。DOM是万维网联盟（W3C）定义的一种标准。大部分的互联网浏览器以各种形式实现了DOM并且获得了不同程度的成功。和其他标准，特别是那些与web编程相关的标准一样，DOM已经发展了很多年。它有三个规范，即所谓的DOM的级别，第四个规范正在制定中。DOM的强大远飞我一两句可以谈清楚的。本文简单的介绍了一下如何使用Javascript访问和操作DOM。  ## 一、获取元素     使用Javascript编程时，获取文档的元素是使用DOM的基本方式。下面将介绍其中两个用来获取元素的基本方法：getElementById()和getElementsByTagName()。 ### 1、通过ID获取元素    getElementById()方法是DOM中频繁使用的一个方法。它获取HTML文档的一个特定元素并且返回一个对它的引用。为了获取元素，它必须具有一个ID属性。 举例如下： ~~~ window.onload = function () { var str = document.getElementById("p1").innerHTML; alert(str); //弹出 我是第一个P } ~~~ ### 2、通过标签名获取    当只获取一个或几个元素时，getElementById（）方法工作的很好，但是当我需要同时获取超过一个的元素时，就发现getElementsByTagName()方法更合适。后者是通过数组或者列表的格式返回指定标签类型的所有元素。 举例如下： ~~~ window.onload = function () { var str = document.getElementsByTagName("p")[1].innerHTML; alert(str); //输出 我是第二个P，因为获取的是索引为1的P，索引从0开始 } window.onload = function () { var arr = document.getElementsByTagName("p"); for (var i = 0; i < arr.length; i++) { alert(arr[i].innerHTML); } } window.onload = function () { var node = document.getElementById("div1"); var node1 = document.getElementsByTagName("p")[1]; //从获取到的元素再获取 alert(node1.innerHTML); } ~~~ ## 二、操作属性 ### 1、getAttribute()与setAttribute()    getAttribute()是读取属性内容，setAttribute()方法对文档做出的修改，将使得文档在浏览器窗口里的显示效果和/或行为动作发生相应的变化，但我们在通过浏览器的view source（查看源代码）选项去查看文档的源代码时看到的仍将是原来的属性值——也就是说，setAttribute()方法做出的修改不会反映在文档本身的源代码里。这种“表里不一”的现象源自DOM的工作模式：**先加载文档的静态内容、再以动态方式对它们进行刷新，动态刷新不影响文档的静态内容。**这正是DOM的真正威力和诱人之处：对页面内容的刷新不需要最终用户在他们的浏览器里执行页面刷新操作就可以实现。 ### 2、举例 ~~~

• Magci
• J2EE
• Haha!

~~~ ## 三、创建、删除、替代、插入节点对象 我们没有受到与已有元素交互的限制。我们可以使用DOM为文档添加元素。下面介绍了几种常用的操作Node对象的方法。  ### 1、创建 ~~~ window.onload = function () { var textNode = document.createTextNode("

我是一个javascript新建的节点

"); document.getElementById("div1").appendChild(textNode); } ~~~ ### 2、删除 ~~~ window.onload = function () { var div1 = document.getElementById("div1"); div1.removeChild(document.getElementById("p2")); } ~~~ ### 3、替代 ~~~ window.onload = function () { var div1 = document.getElementById("div1"); var span1 = document.createElement("span"); span1.textContent = "我是一个新建的span"; div1.replaceChild(span1,document.getElementById("p2")); } ~~~ ### 4、插入 ~~~ window.onload = function () { var pNode1 = document.createElement("p"); pNode1.textContent = "insertBefore插入的节点"; var pNode2 = document.createElement("p"); pNode2.textContent = "appendChild插入的节点"; document.getElementById("div1").appendChild(pNode2); document.getElementById("div1").insertBefore(pNode1,document.getElementById("p1")); } ~~~ ## 四、小结   结合前面一个阶段学过的XML，XML文档就是一颗节点树，树上所有的节点都是有联系的。Javascript就是通过DOM来操作XML中的节点。解释器把XML翻译成Javascript可访问的DOM对象，这样就方便了使用Javascript语言来操作XML文档。

## 前言：   真正的JavaScript是由三部分组成，ECMAScript、DOM、BOM，如下图所示。本文将主要介绍其中的浏览器对象模型。 BOM(Browser Object Mode) 是指浏览器对象模型，是用于描述这种对象与对象之间层次关系的模型，浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成，其中代表浏览器窗口的Window对象是BOM的顶层对象，其他对象都是该对象的子对象。  ## 一、window对象   BOM可以用来访问和操作浏览器窗口的浏览器，开发人员可以使用它控制浏览器显示页面以外的部分。它提供了很多的对象，来帮助我们访问浏览器。其中核心对象是window，它表示浏览器的一个实例。window对象处于JavaScript结构的最顶层，对于每个打开的窗口，都会有一个默认的window对象。  window对象的属性：  window对象的方法：    在方法中有我们经常使用的alert（），confirm（），prompt（）方法可以调用系统对话框向用户显示信息。因为window对象是一个全局对象，所以不需要在它的属性和方法的面前加上window。相反，可以直接调用它们，就向我们已经在那些直接调用alert（）方法的实例中见到的那样。 应用举例： ~~~ //确定和取消 if (confirm('请确定或者取消')) { alert("确定要确定么？") } else { alert("确定要取消么？") } ~~~   window对象的直接后代不需要window前缀，不过，当处理window对象的直接后代以外的对象时，则需要在它们前面加上window对象的名字。例如，document对象是window对象的直接后代，所以不需要window前缀，但是document对象的后代却需要document前缀。 举例如下： ~~~ alert('something'); //note no window document.forms[0] //note the document ~~~ ## 二、location对象   location对象使我们能够访问当前载入的URI，包括任何有关查询字符串、使用的协议以及其他相关组件的信息。 location属性：   location方法：  应用举例： ~~~   ~~~ ## 三、history对象   history对象提供了通过访问者浏览历史向前和向后移动的方法。具体的说，可以使用back（）、forward（）、go（）。这可能不言而喻，但还要说明一下：back（）和forward（）分别向后和向前移动一个页面，go（）方法移动到参数指定的索引值。  应用实例： ~~~ function back() { history.back(); } function forward() { history.forward(); }

Click to go back

Click to go forward

~~~ ## 四、小结       关于浏览器对象模型中几个重要的对象，需要进一步实践去掌握一些常用的属性和方法。

　　正则表达式，又称正规表示法、常规表示法（英语：Regular Expression，在代码中常简写为regex、regexp或RE），计算机科学的一个概念。正则表达式使用单个字符串来描述、匹配一系列符合某个句法规则的字符串。在很多文本编辑器里，正则表达式通常被用来检索、替换那些符合某个模式的文本。 ## 一、创建 　　创建正则表达式和创建字符串相似，有以下两种方法。 　方法一：NEW运算符 ~~~ var box = new RegExp("Box", 'ig'); ~~~ 　方法二：字面量 ~~~ var box=new RegExp/box/ig; ~~~ 模式参数 | 参数 | 含义 | |-----|-----| | i | 忽略大小写 | | g | 全局匹配 | | m | 多行匹配 | ## 二、测试 　　RegExp对象提供两个测试方法： 　方法一：test() 在字符串中查找是否存在指定的正则表达式，返回值为布尔值，如果匹配到了就返回True,如果不存在就返回False。 　方法二：exec() 如果执行成功，就返回包含该查找字符串的相关信息数组。如果失败返回NULL。 　实例1： 　　匹配信息为box,i参数是不区分大小写。在str变量存放的字符串中查找，返回的变量为True。 ~~~ var pattern = new RegExp('box', 'i'); var str = 'This is a Box!'; alert(pattern.test(str)); ~~~  　实例2： 　　用exec()方法返回的是匹配到的源字符串中的内容，如果没有匹配到则返回NULL. ~~~ var pattern = new RegExp('box', 'i'); var str = 'This is a Box!'; alert(pattern.exec(str)); ~~~  ## 三、其他方法：  　1、match()方法 ~~~ var pattern = /Box/ig; var str = 'This is a big Box!That is a beautiful box'; alert(str.match(pattern)); ~~~ 　　返回为：Box,box 　2、replace()方法 ~~~ var pattern = /Box/ig; var str = 'This is a big Box!That is a beautiful box'; alert(str.replace(pattern,'Apple')); ~~~ 　　返回为：This is a big Apple!That is a beautiful Apple 　3、search()方法 ~~~ var pattern = /Box/ig; var str = 'This is a big Box!That is a beautiful box'; alert(str.search(pattern)); ~~~ 　　返回为：查到的位置，如果查不到就返回-1. 　4、split()方法 ~~~ var pattern = /Box/ig; var str = 'This is a big Box!That is a beautiful box'; alert(str.split(pattern)); ~~~ 　　返回为：拆分成的字符串数组。This is a big ,!That is a beautiful , ## 四、获取控制 　　正则表达式元字符是包含特殊含义的字符，它们有一些特殊功能，可以改变匹配模式的方式。做个简单的例子。 　实例： 　　简单的电子邮件验证： ~~~ var pa = /^([\w\.\-]+)@([\w\-]+)\.([\w]{2,4})$/; var str = 'zhou@163.com'; alert(pa.test(str)); ~~~ 　　（）的作用是分组模式，{2,4}的意思是匹配分组里的字符串2-4次。 　　正则量词的贪婪与惰性： 　　贪婪量词：先看整个字符串是否匹配，如果不匹配就把最后一个字符去掉在进行匹配，不匹配继续去掉最后一个字符，指导找到一个匹配或者不剩任何字符才停止。 　　惰性量词：先看第一个字符串是否匹配，如果第一个不匹配就在加入第二个字符串依此类推，指导找到一个匹配或者不剩任何字符才停止，贪婪量词与贪婪量词的方法正好相反. 　实例一： 　　？号关闭了贪婪匹配，只替换了字符串中的第一个字符a. ~~~ var pattern = /[a-z]+?/; var str = 'abcdefghijklmnopqrstuvwxyz'; var result = str.replace(pattern, 'YYY'); alert(result); ~~~ 　　返回值为；YYYbcdefghijklmnopqrstuvwxyz 　实例二： 　　g参数开启的全局，禁止了贪婪。 ~~~ var pattern = /8(.+?)8/g; var str = 'This is 8google8,That is 8google8,There is 8google8 '; var result = str.replace(pattern, '$1'); document.write(result); ~~~ ## 五、总结： 　　假设用户在填写HTML表单的时候，需要写姓名，年龄，性别，E-Mail等，在提交到服务器之前，在前端先验证一遍。看看用户输入的信息是否符合规定。这种客户端验证的方法，可以节省大量的服务器系统资源，获得更好的用户体验。

## XML 可扩展标记语言，标准通用标记语言的子集，是一种用于标记电子文件使其具有结构性的标记语言。       近年来，随着 Web的应用越来越广泛和深入，人们渐渐觉得HTML不够用了，HTML过于简单的语法严重地阻碍了用它来表现复杂的形式。尽管HTML推出了一个又一个新版本，已经有了脚本、表格、帧等表达功能，但始终满足不了不断增长的需求。 　　有人建议直接使用SGML 作为Web语言，这固然能解决HTML遇到的困难。但是SGML太庞大了，用户学习和使用不方便尚且不说，要全面实现SGML的浏览器就非常困难，于是自然会想到仅使用SGML的子集，使新的语言既方便使用又实现容易。正是在这种形势下，Web标准化组织W3C建议使用一种精简的SGML版本——XML应运而生了。  [图一] XML家族史 ### Q1：什么是XML? - XML 指可扩展标记语言（EXtensible Markup Language） - XML 是一种标记语言，很类似 HTML - XML 的设计宗旨是传输数据，而非显示数据，常用于简化数据的存储和共享 - XML 标签没有被预定义。您需要自行定义标签。 - XML 被设计为具有自我描述性。 - XML 的优势之一，就是可以经常在不中断应用程序的情况进行扩展。 ### Q2：XML与HTML的区别? - XML 被设计用来传输和存储数据。 - HTML 被设计用来显示数据。 - XML 不是 HTML 的替代。 - XML 和 HTML 为不同的目的而设计： - XML 被设计为传输和存储数据，其焦点是数据的内容。 - HTML 被设计用来显示数据，其焦点是数据的外观。 - XML 把数据从 HTML 分离。XML 文档形成了一种树结构，它从“根部”开始，然后扩展到“枝叶”。  ## XML DTD 和XML Schema 　　二者的作用很容易理解，为了进行正确的数据交换，就要规定文档的数据类型，也就是规定文档的结构。这里打个比方，意大利人说意大利语，日本人说Japanese，两个的商人要进行对外的贸易，就要有个统一的语言，那就是需要贸易通则 Incoterm2010（作为一名国贸生，能把计算机与专业课联系在一起，可见我专业课上总是开小差了~） 　　 　　想象一下，一个XML的组成就是元素，属性，内容，那么DTD或是它的升级版Schema就是用来规定一个XML文档什么时候什么地点可以出现什么元素，每个元素都可以有什么描述属性。以及它们出现的顺序，重复的次数。在二者中都有详细的规定了。 　　DTD可以嵌入在XML文档中，也可以单独形成一个文件，引入即可。 ~~~ ]> George John Reminder Don't forget the meeting! ~~~ ### Q1：DTD与Schema的关系 - 都是用于描述XML文档的结构。 - Schema是基于XML的DTD的替代品。 - Schema要比DTD更强大。 ### Q2：Schema的优点 - XML Schema 支持数据类型 - XML Schema 使用 XML 语法 　　这样的好处是不必学习新的语言，可以使用XML编辑器来编辑、解析Schema文件。 - XML Schema 可保护数据通信 　　通过Schema，发送方可以使用一种接收方能够明白的方法来描述数据。 - XML Schema 可扩展 　　可以根据原有的数据类型自定义出自己需要的数据类型，在相同的文档中可以引用多重的Schema。 ## 小结： 　　 　　通过XML的学习，知道了HTML与XML实际上没有必然的联系，用途不同的两者总是被大家搞混。了解了XML的组成，下一步就是JavaScript脚本语言的学习，看看在JS中如何操作XML文件。

## 一、前言： 　　这几周跟着于海涛老师进入了.NET编程世界，领略到了ASP.NET的精髓。要说起ASP.NET的发展史，那要追溯到HTML了，因为它功能简单，无法从用户接收信息并自动进行更新，而不需要开发人员重新编写。怎样才能赋予站点如此的反应能力呢？如何提供面向用户的“个性化服务”呢？ 　　有了需求，就有了语言竞争的动力，短短几年，聪明的人类已经开发出好多种技术。Microsoft公司作为IT界的领先者，也参与了这场WEB的变革中，它的秘密武器就是——ASP，它因技术简单，容易上手，备受程序猿儿的亲睐。在此基础上，经历了1.0、2.0、3.0的变革，在.NET Framework的创建后，又使它技术升级为——ASP.NET。 ## 二、整体印象： 　　主角引出来，下面是我的学习总结，总体来说，很喜欢老师的讲课风格，先理论学习后实战做Demo。只因和老师用的开发工具不同，VS2005和VS2013差距还是很大的，我也没有因为视频而改变自己的开发工具。正是因为这个原因，让我每个DEMO完成的都可以说是“印象深刻”！！让我深深感受到：学习！离不开网络！ 　　本专辑系统的讲解了ASP.NET编程的各个方面，包括了ASP.NET的基础知识，ASP.NET和IIS架构，HTML语言，C#基础，HTML控件和Web服务器控件，Web表单验证控件，在C#VB.NET中使用ASP.NET对象，数据库基础与数据连接对象ADO.NET、数据库编程，高级应用，ASP.NET应用程序的设置与安全、程序设计实例等。  ## 三、分支讲解： - 　**Part One：太熟悉的控件对象** 　　认识一个新的事物，总是想看看它有没有我已经认识的一面，视频中很大的篇幅都在介绍ASP.NET的控件。在制作牛腩新闻发布系统的时候，这个视频中提到的控件，我们都用到了。不得不说，当时也是迷迷糊糊的就用了，还不知道它是什么，就已经会用了。现在回头看这些控件的理论知识的学习，想想控件必备属性，方法，事件。就觉得挺简单的。  　　关于控件这部分，验证控件是之前VB中没有接触到的，我的理解，因为验证控件的属性设置，可以减少我们前台很多的判断功能的代码，比如判断是不是为空啊，是不是数字啊等等。这一点是ASP.NET的巨大进步了。关于列表控件，在支持数据库后台的WEB应用程序中，为了给用户展示详尽的数据信息，列表控件是必不可少的。gridview，它的强大在于能简单实现分页、排序、丰富的格式样式以及易于操作的布局。对于repeater，以上gridview的大部分功能其实都能实现，只不过实现起来相当复杂些，但我们只要掌握它，那么gridview面对repeater而言，就会变得毫无优势。 - **Part Two：六大内置对象**  　1、session & application 　　Session 是服务器端的状态保存机制，每个用户端均有独立的空间（以浏览器运行个体来赋与唯一的SessionID值）。 Application 是服务器端的状态保存机制，但应用程序所有的用户端共用同一份状态数据。Application对象和Session对象都可在服务器端保存数据或对象，使用方法和常用属性、事件、方法也基本相同。但Application对象中保存的信息是为所有来访的客户端浏览器共享的，而Session对象保存的数据则是仅为特定的来访者使用的。 　　例如，在河南的A用户和在河北的B用户同时访问某一服务器，若A修改了Application对象中存放的信息，B用户在刷新页面后就会看到修改后的内容；但若A修改了Session对象中存放的数据，B用户是感觉不到的。此时只有A可以看到和使用这些数据。也就是说Session对象中存放的是专用信息。 　2、response & request 　　WEB服务器在收到了客户端的HTTP请求后，会根据每次请求分别创建两个对象：代表请求的request对象，代表响应的response对象。对于二者的区分可以根据意思出发。 - request是要求的意思：要得到客户端提交的数据。 - response是回应的意思：向客户端输出数据。 　　相对应的，在页面跳转方面，二者有各自的方法，在开发当中也是经常会使用到的，为了进一步看出二者的区别，我用ER画图工具画了两个图。。如下：   　　response.redirect()：向客户端输出一个数据，是告诉客户端要跳向指定的界面，客户端浏览器的网址发生改变。变为指定的页面***.aspx。 　　request.forward()：实现的是服务器内部的转发，不会让客户端浏览器的地址发生改变。 - **Part Three：Web服务** 　　web服务提供了两种访问方法，即HTTP-GET和HTTP-POST。还学会了使用代理来调用服务。使用SOAP协议还可以用于在分布式计算环境中进行交换信息。 - 　**Part Four：配置文件** 　　在学习设计模式的时候学到了配置文件，所以当看到这一章的时候，很是亲切。复习了一下页配置设置，应用程序设置。还学会了customErrors设置。配置文件的方便之处在于：以纯文本格式储存，使用XML编写，如果需要更改，无需重新启动服务器。 ## 四、总结： 　　在ASP.NET理论+实践的学习过程中，深刻体会到了没有网络，例子根本敲不下去的囧境。在过程中，多问几个为什么，可以学到更多有意思的知识，这点是王潇峥师傅告诉我的。还有，建议向我一样的小白，学习之初先拿本书看看，摸清思路。再来看视频，就会有所准备，产生共鸣。在我解决问题的时候，搜索到了好几个关于前端开发的学习网站，挺好的。在这里分享给大家（都是免费的课程哦～）： - w3school：[http://www.w3school.com.cn/index.html](http://www.w3school.com.cn/index.html) - 慕课网：[http://www.imooc.com/](http://www.imooc.com/)

HMTL（Hyper Text Markup Language  超文本标识语言）是一种用来制作超文本文档的简单标记语言。HTML的上一个版本诞生于1999年。自从那以后，Web世界已经经历了巨变。如今，HTML5正处于完善之中，是W3C与WHATWG合作重建的。HTML5中添加了有趣的新特性，用于绘画的canvas元素，用于多媒体应用的video和audio元素等等。。  经过几天的了解，我对HTML有了初步的认识，在网站的设计中，网页是构成网站的最基本的元素，HTML语言就是用来搭建网页的框架。用HTML语言编写的WEB文件会存储于某台服务器中，用户通过互联网搜索，从而获取WEB文件，网页通常分为两类动态网页和静态网页。那么二者之间有什么联系和区别呢？在说明动态与静态的区别之前，先讲一个动态HTML的概念，跟动态网页区别开。 ## --动态HTML VS 动态网页： 顾名思义，动态HTML是指含有动态特效的页面，主要包括客户端脚本语言，CSS和文档对象模型。能独立在客户端处理用户发出的请求，改变其页面、内容和位置，并呈现给用户看。所有的操作都只在客户端进行，不需要向服务器请求让服务器来处理。动态网页主要是指服务器端脚本程序，它们只有在接受了客户的访问请求之后，在服务器端生成后传回到客户端的浏览器上。由此可见，我们理解的“能动”的HTML，并不一定都是动态网页。 ## --动态网页VS静态网页： - **编程技术不同** 由上边的介绍我们知道了动态网页跟网页的动态内容是不可以混为一谈的，所谓的动态网页是指利用了HTML语言、其他高级程序设计语言和数据库技术生成的网页。静态网页是指随着HTML代码的生成，网页的内容和显示效果是不能改的了，除非改变HTML代码。 - **传输速度不同** 这里讲网页的传输速度不同，一定是因为二者的传输方式不同导致的。动态网页，需要根据用户的请求进行动态的编译过程，也就是说这个网页不是现成的，而是动态生成的，这就需要有多个读取过程，每次数据的交互都会大大降低用户的访问速度。而相反静态网页，由于网页上面的内容是直接存储在服务器端的，用户的请求发出，直接生成在客户端的浏览器，省去了服务器的编译过程。由此得知，静态网页的传输速度更胜一筹。 - **后期维护工作量不同** 静态网页都是写死的，没有数据库的支持。如果要进行更改，必须对源代码进行重新修改，需要的工作量更大。 这个问题是上周潇峥师傅问我的，没有答上来，这里做个小总结。 下面就是我的HTML的总结。  HTML要三大基本要素，有了标签、属性、元素的完美配合，我们就可以写出一个网页的基本框架了。自己也只是记住了一些常用的标签，不常用的等用到的时候再查查吧。 ## --总结： 在HTML的学习过程，感觉就是牛腩的复习，实践之后带着问题去学习理论知识，B/S的学习思路我现在才悟道啊。这些也只是基础皮毛，重在实践。

      用了半个月的时间做完了这个新闻发布系统。从写文档到C#开发后台再到ASP.NET开发前台，通过这样一个艰辛的历程，我对B/S有了初步的了解。这个系统看着简单，就发现它用到了所有我们B/S项目中我们需要学习的内容，真是麻雀虽小五脏俱全。佩服牛老师那“绝对不放过1PX”的精神！！！       如下图一是我的概述总结。  [图一 牛腩总结] ## 一、文档的编写        视频（1-4）的开始在介绍系统开发前的设计阶段，很熟悉，当初敲机房收费系统也是这样一个过程。通过牛腩系统发布系统的前期设计文档的编写，让我又温习了一遍设计说明书中的重点内容：UML图，用例设计，UI设计，数据库设计。包括后边开发阶段的时候，一直都是以这个文档为开发的宗旨的。我才恍然大悟：原来文档是这个样子用的。 ## 二、后台的编写        视频（5-17）接下来就开始了系统开发的阶段，后台的编写跟C/S的项目没有区别。我是没有看出有什么不一样的地方。首先系统采用了三层架构，这些都是我们上个阶段学到的内容。然后详细的介绍了SQLHelper类的形成过程，找到数据库连接时的共性进行不断的抽象和封装，根据查和增删改返回值不同，而分成两个函数。然后是数据库的设计，主要用到了存储过程和连接查询。存储过程在机房收费系统的时候就用到了，这里主要把连接查询复习了一下。自考《数据库原理》中也详细介绍了内连接的内容，也是对学过内容的一次回顾。总体感觉：后台编写主要就是回顾了一下之前的知识而已。 ## 三、前台编写        [图二 前台]       视频（18-63）接下来就到了我们要学习的B/S部分（如图二）了，如我开篇所说，这个系统看着简单，就它用到了所有我们B/S项目中我们需要学习的内容，下面根据它们出场的顺序，谈谈我对它们的理解。 ### 1、前台开发三大神器：HTML、CSS、JavaScript - **神器一：Web的“骨架”——HTML**       HTML（HyperText Mark-up Language）超文本标记语言或超文本链接标示语言（标准通用标记语言下的一个应用）HTML是一种制作万维网页面的标准语言，是万维网浏览器使用的一种语言，它消除了不同计算机之间信息交流的障碍。【XML（Extendsible Markup Language 可扩展性标记语言）和HTML的区别在于：前者是用来传输和存储数据，后者用来显示数据。】       HTML有三大基本要素：标签，属性，元素。如下面这段代码，<>括号里面的内容，就是标签。其中带有“/”的标签是结束标签。标签里面比如color="green"，其中color就是font字体的颜色属性。这句的意思是：起始标签-内容-闭合标签。 ~~~

静夜思

　　　　　作者：李白

---

窗前明月光，疑是地上霜。
抬头望明月，低头思故乡。

~~~ - **神器二：Web的“血肉”——CSS+DIV**       DIV+CSS是WEB设计标准，它是一种网页的布局方法。与传统中通过表格（table）布局定位的方式不同，它可以实现网页页面内容与表现相分离。在用到了HTML标签的基础上，我们使用CSS盒子模型，可以把标签当成盒子，对网页进行布局。使用CSS盒子可以对我们的主页进行渲染，使表现形式越来越丰富。 - **神器三：Web的“神经”——JavaScript**        JavaScript 直译式脚本语言，嵌入HTML，有利于结构与新闻分离，添加网页的动态功能效果。比如JavaScript可以对鼠标的单击事件或者浏览器的操作进行捕捉。在新闻发布系统中把JS单独写成了一个脚本文件，然后引用到HTML中，这样做的好处是：有利于结构和操作活动的分离。JQuery是一个优秀的JavaScript库，使用它的目的是方便处理HTML，实现动态效果，提供与AJAX的交互。       举个例子，在新闻发布系统中有个对类别进行管理的功能，要求实现点击表格中的某个单元格的时候，该单元格就会变成一个文本框用于进行编辑。 效果如下图三：  [图三] ~~~ $(function () { // 相当于在页面中的body标签加上onload事件 $(".caname").click(function () { // 给页面中有caname类的标签加上click函数 var objTD = $(this); var oldText = $.trim(objTD.text()); // 保存老的类别名称 var input = $(""); // 文本框的HTML代码 objTD.html(input); // 当前td的内容变为文本框 // 设置文本框的点击事件失效 input.click(function () { return false; }); }); }); ~~~ ### 2、Web异步更新——AJAX        AJAX框架（Asynchronows JavaScript And XML ）整合了JS，XML，CSS，实现了JS和XML的异步，创建了交互式网页应用的网页开发技术。在后头与Server进行少量数据交换（异步更新是指：不重新加载整个页面，只实现局部的更新。）       举个例子，在系统中当更改了新闻类别名称后，更新到数据库中。这个样子，类名信息需要取出最新的，利用AJAX可以实现不刷新整个网页，只修改类别table。如下： ~~~ //在文本框中按下键盘某键 input.keydown(function (event) { var jianzhi = event.keyCode; var input_keydown = $(this); switch (jianzhi) { case 13: //按下回车键，提交数据 var newText = $(input_keydown).val();//修改后的名称 //当老名与新名不同才进行提交 if (oldText != newText) { //获取该类别所对应的序号 var caid = $.trim(objTD.prev().text()); //AJAX异步更改数据库 var url = "../handler/ChangeCaName.ashx?caname=" + encodeURI(encodeURI(newText)) + "&caid=" + caid + "&t=" + new Date().getTime(); $.get(url, function (data) { if (data == "false") { $("#test").text("类别修改失败，请查看是否类别名称有问题"); input_keydown.trigger("focus").trigger("select"); // 全选 } else { $("#test").text(""); objTD.html(newText); } }); } else { //前后文本一致，把文本框变成标签 objTD.html(newText); } break; case 27: //按下esc,取消修改,把文本框变成标签 $("#test").text(""); objTD.html(oldText); break; } }); ~~~        一般处理程序如下，判断类别是否重复，调用B层的更新类别名函数： ~~~ <%@ WebHandler Language="C#" Class="ChangeCaName" %> using System; using System.Web; using BLL; using Model; public class ChangeCaName : IHttpHandler { public void ProcessRequest (HttpContext context) { context.Response.ContentType = "text/plain"; string caid = context.Request.QueryString["caid"]; string caname = context.Server.UrlDecode( context.Request.QueryString["caname"]); //是否重名 if(new CategoryManager().IsExists(caname)) { context.Response.Write("false"); return; } //更数据库类别名称 Category ca = new Category(caid, caname); bool b= new CategoryManager().Update(ca); if (b) { context.Response.Write("true"); } else { context.Response.Write("false"); } } public bool IsReusable { get { return false; } } } ~~~ ## 四、小结       在整个新闻发布系统的制作过程中，接触到了一些web前台开发必备技术，给我的感觉是有些东西还不知道是什么，也没学过，就已经用上了。像HTML、ASP.NET、JavaScript、XML、AJAX。这些都不是一个个单独存在的，每一个技术的应用都是为了弥补上一个技术的应用的不足。这仿佛是暗示了我，在B/S接下来的学习中，要多多想想这些技术之间的关系。

## 前言 分页是Web应用程序中最常用到的功能之一，在ASP.NET中，虽然自带了一个可以分页的DataGrid和GridView控件，但其分页功能并不尽如人意，外观比较丑，是我pass它们的主要原因。而且没有办法实现导航与数据显示的分离。 这个时候AspNetPager针对ASP.NET分页控件的不足，提出了与众不同的解决asp.net中分页问题的方案，即将分页导航功能与数据显示功能完全独立开来，由用户自己控制数据的获取及显示方式，因此可以被灵活地应用于任何需要实现分页导航功能的地方，因为AspNetPager控件和数据是独立的，因此要分页的数据可以来自任何数据源。 ## 一、分页介绍 分页功能实现从表现形式上分为两种：真分页和假分页。二者各有特色。本篇主要介绍真分页的实现，这就简单介绍一下什么是假分页。 ### 1、假分页： 在第一次请求后，一次性从数据库中将数据全部取出来，并不全部显示。而是根据量分为几个部分，分开呈现在屏幕上。因为是一次性的数据交互动作，显然，假分页适用于数据量不大，请求次数少的查询显示动作。 ### 2、真分页: 是按查询数据时给定的查询记录数来查多少条数据。通俗的说，要哪里取出哪里。因为取出的数据只是一部分，所以可见真分页的效率很高。假设你的数据量很大，那么就没有必要去一次性取出所有的数据。这样发出命令到web服务器，再返回数据，时间太长了，用户早就等的不乐意了。这时候就体现出真分页的优势了。下面我就以牛腩新闻发布系统为例，介绍一下AspNetPager 控件实现真分页功能（如图一）。  [图一 AspNetPager控件使用效果展示] ## 二、真分页原理讲解 ### 1、需要前台提供什么数据 大家先要考虑一个事情，就是如果实现真分页的功能，需要怎样定位我们的数据？答案是一个起始记录号码和一个终止号码。就像是班主任点名字，看着全班的花名册就会说：请20号到30号的同学到黑板上做题。这里需要从前台传递到后台BLL层，DAL层，最后到数据库的存储过程中的数据就是这个20和30。 ### 2、AspNetPager 控件的作用 上一个问题已经解决了“我们需要什么”的问题，下面就是“怎么获取”的问题，让AspNetPager干活，它也是需要数据支持的：它要知道一共有多少数据，用户想让每一页显示几条记录。这样它的第1，2，3，页的显示，响应anp_PageChanged的时候实际就是在传递行号。 ### 3、数据库中存储过程的原理 将开始行数和截止行数作为参数传入存储过程中，它会根据ID的次序，生成一列行号，这个行号就对应了我们要取得的数据起始标记。如图二： **** [图二 存储过程执行效果展示] ## 三、代码实现 1、首先在newsmanager.aspx中添加AspNetPager控件 **控件设置代码如下：** ~~~ ~~~ 2、然后在.cs中传入数据（U层），因为要多次用到数据的绑定，所以我就把代码封装成了一个函数。方便调用。 ~~~ protected void Page_Load(object sender, EventArgs e) { //判断session里面是否存在管理员 if (Session["admin"] != null && Session["admin"].ToString() == "zhou") { //已登录 if (!Page.IsPostBack) { { //第一次进入该页面时 DataTable dt = new DataTable(); dt = new NewsManager().SelectAll();//选择所有新闻 anp.RecordCount = dt.Rows.Count; //记录总数 //开始绑定记录 BindNews(); } } } else { //未登录 Response.Redirect("Default.aspx"); } } #region 绑定新闻列表 ///

/// Repeater控件绑定数据源 ///

private void BindNews() { int startIndex = anp.StartRecordIndex; //开始记录数 int endIndex = anp.EndRecordIndex; //结束记录数 repNews.DataSource = new NewsManager().SelectByPage(startIndex, endIndex); repNews.DataBind(); } #endregion protected void anp_PageChanged(object sender, EventArgs e) { //控件的切换实现数据库的数据交互 BindNews(); } ~~~ **3、调用B层** ~~~ #region 分页功能实现 ///

/// 分页控件传递开始页和终止页的数据 ///

/// 开始数 /// 截止数 /// DataTable public DataTable SelectByPage(int startIndex, int endIndex) { return ndao.SelectByPage(startIndex, endIndex); } #endregion ~~~ **4、调用D层** ~~~ ///

/// 分页功能的实现 ///

/// 开始 /// 结束 /// public DataTable SelectByPage(int startIndex, int endIndex) { DataTable dt = new DataTable(); string cmdText = "partPage"; SqlParameter[] paras = new SqlParameter[]{ new SqlParameter ("@startIndex",startIndex ), new SqlParameter ("@endIndex",endIndex ) }; dt = sqlhelper.ExecuteQuery(cmdText, paras, CommandType.StoredProcedure); return dt; } #endregion ~~~ **5、数据库中的存储过程的编写** ~~~ USE [newssystem] GO /****Object: StoredProcedure [dbo].[partPage] Script Date: 2014-11-30 15:38:11 ****/ SET ANSI_NULLS ON GO SET QUOTED_IDENTIFIER ON GO -- ============================================= -- Author: 周洲 -- Create date: 2014-11-28 -- Description: 传入开始号和结束号，查询新闻 -- ============================================= ALTER PROCEDURE [dbo].[partPage] @startIndex int, --查询开始记录数 @endIndex int --结束记录数 AS BEGIN with temptbl as ( SELECT ROW_NUMBER() OVER (ORDER BY id desc)AS 行号, * from news --使得记录按顺序排列，按行号查询 ) SELECT * FROM temptbl where 行号 between @startIndex and @endIndex --传入开始和结束的参数，执行查询 END ~~~ ## 四、总结 AspNetPager作为完全免费且开放源代码的ASP.NET控件，为Web开发提供了很大的便利。我想起作品展的时候就用到了别人的控件，让我们省去了很多代码的编写。这也算是站在了巨人的肩膀上，用别人封装好的东西，给我们自己的系统增光添彩。做完了牛腩新闻发布系统为我们掀开了B/S的一个序幕，更多有意思的东西，待我边探索边分享。

> 原文出处：[Web开发入门篇](http://blog.csdn.net/column/details/web-basic.html) 作者：[zhou2s_101216](http://blog.csdn.net/zhou2s_101216) **本系列文章经作者授权在看云整理发布，未经作者允许，请勿转载！** # Web开发入门篇 > 带你进入Web前端开发的世界，系统的向你介绍当下前端流行的技术：HTML、XML、Asp.net、JavaScript等，他们之间的联系和互相之间的交互。