web开发技术初探

最新推荐文章于 2024-07-30 20:43:25 发布

码农SW

最新推荐文章于 2024-07-30 20:43:25 发布

阅读量2.4k

点赞数

分类专栏： web开发文章标签： web开发 server xmlhttprequest 语言 browser wordpress

本文链接：https://blog.csdn.net/suwei19870312/article/details/7579667

版权

web开发专栏收录该内容

14 篇文章 0 订阅

订阅专栏

最近在弄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"οnchange="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);
?>

码农SW

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录