web開發技術初探

阿新 • • 發佈：2019-01-12

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

web開發技術初探

web開發技術初探

轉Web開發的發展史---Web開發技術的演變

零基礎學習web開發技術總結分享

2019-Web開發技術指南和趨勢

Web開發技術發展史話

(Java Web開發技術與實戰專案)第二章 JSP資料互動(一)

Java web開發技術第二章

【web複習】WEB開發技術基礎知識整理（1）

Web開發技術發展歷史

Web開發技術應用系統設計報告

月薪過萬的高級web開發工程師會哪些技術

用ASP.NET Web API技術開發HTTP接口（一）

Servlet開發技術，創建，以及Servlet的配置，web.xml的配置

移動端web開發初探之Vuejs的簡單實戰

極客學院Web前端開發技術實戰視頻教程初級入門+高級實戰++專家課程+面試指導

Python+Flask+MysqL的web建設技術開發一個網站

沿用Python+Flask+Mysql的web建設技術開發網站

基於SSM的Java Web應用開發原理初探

web前端開發技術之淺談對HTML5 智能表單的理解

用ASP.NET Web API技術開發HTTP介面

web開發技術初探

相關推薦