web开发技术初探
最近在弄wordpress, 想弄一个自己的博客，wordPress是用php写的一套博客框架，所以顺道学了一下phptutorial。
对于web开发技术中眼花缭乱的开发语言，觉得很迷惘，所以又花了写时间对一些语言进行了总结和分类，希望对以后有些帮助。
一些概念介绍：
1. Web Server: 也可以是web Container, 用于部署webproject, 用于处理webclient 端来的请求，同时生成response返回，等等， 现有的具体的web Server 有要钱的IIS和免费的Apache。
2. Server Side code: 是指在webServer端解析和执行的代码，现有的一些server端语言有(PHP,ASP, Perl, JSP)。
3. Client Side code: 是指在webclient 端（webbrowser）端解析和执行的代码，比如(JavaScript(JS),html)。
4. Client 端代码比较常用的就是JS和html了，而Server端的语言有很多种选择，不论选择PHP，ASP， perl还是JSP， 都能处理client端返回的请求，这里不讨论哪些语言好，哪些语言不好。 对于不同的Server端语言，选择不同的web Server支持，如果 选择ASP,就选择微软的IIS作为webserver。如果 选择PHP， 选择Apache作为webserver。如果选择JSP，选择Apachetomcat 作为webserver， 选择perl语言， 就不知道用什么webserver了。
一般的网站的逻辑部署图如下：
用户通过浏览器访问网络另一端的web Server，对于一个网站来说，web Server只是作为一个后台服务的接入层，客户和后来逻辑的中间层，web server 解析Client端的http请求，webserver 访问后台相应的应用逻辑服务器，获取相应的数据和逻辑处理，webserver等待后台逻辑的返回，生成相应的httpResponse。
简单的Web Client 和 Web Server交互流程图：
1. 用户通过web browser访问网站，获取ClientSide的网页。
2. Web Server找到相应的网页，分装成response返回。
3. Web browser在得到 client side的网页时，要对网页进行渲染，解析和执行JS代码。
4. 如果需要从server端获取数据时，通过Get或则POST方法，向webServer发送httpRequest.
5. Web Server在接收到httpRequest后，找到相应的server端代码来对httpRequest进行解析，生成相应的httpResponse 返回给web browser.
6. Web browser在接收到http Response之后设置相应的数据，生成动态的网页。
Client端 JS sample代码：
<html> <head> <script type="text/javascript">
//该函数会在下面选择form中被触发
function showUser(str)
{
if (str=="")
{
document.getElementById("txtHint").innerHTML="";
return;
}
//构建httpRequest
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera,Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=newActiveXObject("Microsoft.XMLHTTP");
}
//为httpReqest设置回调函数，当response返回时被触发
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 &&xmlhttp.status==200)
{
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
//初始化httpRequest,通过Get方法发出Request
//指定server side的get user.php处理该Request, 同时给了个参数q
xmlhttp.open("GET","getuser.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<select name="users"onchange="showUser(this.value)">
<option value="">Select aperson:</option>
<option value="1">PeterGriffin</option>
<option value="2">LoisGriffin</option>
<option value="3">GlennQuagmire</option>
<option value="4">JosephSwanson</option>
</select>
</form>
<br />
<div id="txtHint"><b>Personinfo will be listed here.</b></div>
</body>
</html>
Server端PHP sample代码：
<?php
//获得Get 方法中的q参数 $q=$_GET["q"];
//链接本地数据库
$con = mysql_connect('localhost', 'peter','abc123');
if (!$con)
{
die('Could not connect: ' .mysql_error());
}
mysql_select_db("ajax_demo", $con);
//构建和执行SQL语句 $sql="SELECT * FROM user WHERE id ='".$q."'"; $result = mysql_query($sql);
//构建HTTPResponse,直接echo.
echo "<table border='1'>
<tr>
<th>Firstname</th>
<th>Lastname</th>
<th>Age</th>
<th>Hometown</th>
<th>Job</th>
</tr>";
while($row = mysql_fetch_array($result))
{
echo "<tr>";
echo "<td>" .$row['FirstName'] . "</td>";
echo "<td>" .$row['LastName'] . "</td>";
echo "<td>" .$row['Age'] . "</td>";
echo "<td>" .$row['Hometown'] . "</td>";
echo "<td>" .$row['Job'] . "</td>";
echo "</tr>";
}
echo "</table>";
//最后关闭数据库链接 mysql_close($con); ?>