web开发技术初探

来源：互联网发布：程序员的浪漫'' 编辑：程序博客网时间：2024/04/30 02:34

最近在弄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;  }

//构建httpRequestif (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, 同时给了个参数qxmlhttp.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);?>