閱讀目錄javascript
1、什麼是 AJAX php
2、提交Form表單的原理html
3、提交請求和服務響應的原理java
4、XMLHttpRequest 對象的知識ajax
5、JQuery實現AJAX數據庫
6、優點json
7、缺點小程序
8、應用場景瀏覽器
9、不適用場景安全
閱讀本文須要30分鐘，請先收藏轉發後再看。
先上原理圖:
背景：
1.傳統的Web網站，提交表單，須要從新加載整個頁面。
2.若是服務器長時間未能返回Response，則客戶端將會無響應，用戶體驗不好。
3.服務端返回Response後，瀏覽器須要加載整個頁面，對瀏覽器的負擔也是很大的。
4.瀏覽器提交表單後，發送的數據量大，形成網絡的性能問題。
問題：
1.如何改進？
2.AJAX是什麼？
3.有什麼優點？
4.有什麼缺點？
1、什麼是 AJAX
1.爲何須要AJAX
當須要從服務器獲取數據，並刷新頁面的操做，若是不採用AJAX，則須要用提交整個表單的方式，當提交表單時，發送請求給服務器，頁面須要等待服務器發送完response後，頁面才能恢復操做。
2.AJAX的概念：
1.AJAX = 異步 JavaScript 和 XML。
2.AJAX 是一種用於建立快速動態網頁的技術。
3.經過在後臺與服務器進行少許數據交換，可使網頁實現異步更新。
4.能夠在不從新加載整個網頁的狀況下，對網頁的某部分進行更新。
3.什麼叫異步
當前頁面發送一個請求給服務器，當前頁面不須要等待服務器響應才能操做網頁。發送完請求以後，當前頁面能夠繼續瀏覽，操做。
4.什麼叫局部刷新
咱們能夠用兩種方式來實現部分刷新。
1. iframe頁面重載的方式。
這種方式雖然實現了部分刷新，可是是頁面的重載，因此也會帶來性能上的問題。
Step1.在頁面中定義一個Iframe
<iframe id="indexFrame" name="index" width="1000" height="800" frameborder="0" marginwidth="0" marginheight="0" scrolling="yes" style="margin-top:100px;"></iframe>
Step2.設置Iframe的src
var indexFrame = document.getElementById("indexFrame");indexFrame.src = "introduction.php";
Step3.添加一個button的點擊事件，當點擊這個button時，從新設置Iframe的src，實現iframe裏面的頁面刷新。Iframe外面的內容不刷新。
<button id="room" onclick='IndexClick("room")'>Click Me!</button>
function IndexClick(moduleKey) { var indexFrame = document.getElementById("indexFrame"); if(indexFrame == null) { indexFrame = parent.document.getElementById("indexFrame"); } var url = "introduction.php"; switch (moduleKey) { case "introduction": url = "introduction.php"; break; case "room": url = "room.php"; break; default: { } } indexFrame.src = url;}
經過這種方式咱們能夠實現一個導航欄的功能：
2.AJAX方式
Step1.JavaScrpit發送異步請求
Step2.服務端查詢數據庫，返回數據
Step3.服務端返回Response
Step4.客戶端根據返回的Response，來用JavaScript操做DOM。
看下面的例子：
當咱們切換DropDownList中的Item時，JavaScript發送異步請求給Server端，Server端返回數據，而後JavaScript將數據解析出來，拼接了一個Table，將Table呈如今頁面上。
2、提交Form表單的原理
1.代碼
客戶端代碼：
<form id="form1" action="Test.ashx" method="get"> 您的姓名1：<input type="text" name="fname" size="20" /> <input type="submit" name="submit" value="Sumbit"> </form>
服務端代碼：
public void ProcessRequest (HttpContext context){ //Delay for (int i = 0; i < 2; i++) { System.Threading.Thread.Sleep(1000); } //從Requset.Form中獲取fname的值。使用Form獲取請求的鍵值對的值的前提條件是HTTP request Content-Type 值必須是"application/x-www-form-urlencoded" 或 "multipart/form-data". string fname = context.Request["fname"]; context.Response.ContentType = "text/plain"; //將字符串寫入 HTTP 響應輸出流。 context.Response.Write("Hello World " + fname); }
2.將代碼部署到IIS
3.打開站點：
http://localhost:8003/Test.html
4.輸入「Jackson0714」而後點擊Sumbit按鈕
頁面會從新刷新，顯示"Hello World Jackson0714"
5.提交Form表單後，頁面發送請求和服務端返回響應的流程
6.經過抓包，咱們能夠獲得HTTP Headers
瀏覽器發送HTTP給服務端，採起的協議是HTTP協議。
在傳輸過程當中，咱們能夠看下HTTP Headers。
3、AJAX提交請求和服務響應的原理
1.代碼
客戶端HTML代碼：
<!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/xhtml"><head> <meta charset="utf-8" /> <title></title> <script type="text/javascript" src="Ajax.js"></script> </head><body> <div id="Test" style="background-color:#40eeee"> 您的姓名2：<input type="text" id="testGetName" size="20" /> <button type="button" onclick="testGet();">Ajax Get請求</button> </div> <div id="Test" style="background-color:#ff6a00"> 您的姓名3：<input type="text" id="testPostName" size="20" /> <button type="button" onclick="testPost();">Ajax Post請求</button> </div> <div id="myDiv" /> </body></html>
客戶端JS代碼:
var xmlhttp = createRequest(); function testGet() { var fname = document.getElementById("testGetName").value; xmlhttp.open("GET", "Test.ashx?fname=" + fname + "&random=" + Math.random() , true); xmlhttp.onreadystatechange = callback; xmlhttp.send(null);} function testPost() { var fname = document.getElementById("testPostName").value; xmlhttp.open("POST", "Test.ashx?" + "&random=" + Math.random() , true); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8"); xmlhttp.onreadystatechange = callback; xmlhttp.send("fname="+fname); } function createRequest() { var xmlhttp; if (window.XMLHttpRequest) { // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp = new XMLHttpRequest(); } else { // code for IE6, IE5 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); } return xmlhttp} function callback() { if (xmlhttp.readyState == 4 && xmlhttp.status == 200) { document.getElementById("myDiv").innerHTML = xmlhttp.responseText; }}
這裏有一點須要注意
|
1
|
var
xmlhttp = createRequest(); 。
|
1.讓服務端可以操做這個變量，若是定義成局部變量，則服務端返回response時，不能對xmlhttp的屬性賦值。回調函數要求request是全局的，才能訪問這個變量和它的屬性值。
2.定義成全局變量後，可能出現兩個請求或多個請求共享同一個請求對象。而這個請求對象只能存放一個回調函數來處理服務器響應。當服務器返回兩個請求的Response後，可能會調用後指定的回調函數。因此可能有兩個徹底不一樣的服務器響應由同一個回調函數處理，而這可能並非正確的處理。解決辦法是建立兩個不一樣的請求對象。
服務端代碼不變。
2.輸入「Jackson0714」而後點擊Sumbit按鈕
頁面不會刷新，在最下面顯示"Hello World Jackson0714"
3.AJAX發送請求和服務端返回響應的流程
4.經過抓包，咱們能夠獲得HTTP Headers
瀏覽器發送HTTP給服務端，採起的協議是HTTP協議。
在傳輸過程當中，咱們能夠看下HTTP Headers：
5.AJAX GET和POST方式區別
AJAX發送請求和POST發送請求的代碼以下：
//GET方式function testGet() { var fname = document.getElementById("testGetName").value; xmlhttp.open("GET", "Test.ashx?fname=" + fname + "&random=" + Math.random() , true);xmlhttp.onreadystatechange = callback; xmlhttp.send(null);} //POST方式function testPost() { var fname = document.getElementById("testPostName").value; xmlhttp.open("POST", "Test.ashx?" + "&random=" + Math.random() , true); xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded;charset=UTF-8"); xmlhttp.onreadystatechange = callback; xmlhttp.send("fname="+fname); }
1.請求的URL中，POST方式能夠添加鍵值對，也能夠不添加
2.GET方式中，send方法傳遞值無效。對於IE瀏覽器能夠忽略send()方法的參數。可是對於FireFox，必須提供一個null引用，不然回調行爲將不規律。這是在編寫客戶端腳本時你會發現的一個跨瀏覽器兼容的問題。
3.POST 能夠用send方法發送額外信息。發送的信息存放在content中
4.Post方式須要指定Request Header的類型。Get方式不須要指定。
5.GET方式將參數暴露在URL中，POST不暴露。
4、XMLHttpRequest 對象的知識
1.XMLHttpRequest 對象的方法
2.XMLHttpRequest 對象的屬性
5、JQuery實現AJAX
下面的代碼實現了當切換DropDownList的item時，觸發getWeeklyCalendar方法，用JQuery的類庫方法$.ajax來發送AJAX請求。
客戶端JQuery代碼
function getWeeklyCalendar(name,currentDate,mode){ $.ajax({ type:'POST', url:'weekProcess.php',data:'func=getWeeklyCalender&name='+name+'¤tDate='+currentDate+'& mode='+mode, success:function(data){ paintWeeklyCandler(data); } });}
後臺成功返回Response後，執行paintWeeklyCandler(data)方法
後臺PHP代碼
<?php<br> //定義返回的Response的格式爲JSON格式 header('Content-type: text/json');<br> //引入自定義的數據庫鏈接文件 include 'dbConfig.php';<br> //引入自定義的設置session的文件 include_once 'session.php'; /* * Function requested by Ajax */ if(isset($_POST['func']) && !empty($_POST['func'])) { switch($_POST['func']){ case 'getWeeklyCalender': getWeeklyCalender($_POST['name'],$_POST['currentDate'],$_POST['mode']); break; case 'getWeeklyStatus': getWeeklyStatus($_POST['name'],$_POST['currentDate'],$_POST['mode']); break; case 'getEvents': getEvents($_POST['date'],$_POST['name']); break; default: break; }} function getWeeklyCalender($name = '',$currentDate = '',$mode = ''){ //邏輯代碼<br> <br> <br> //返回JSON格式的Response echo json_encode(array('result'=>$DaysOfWeekResultsArray)); }<br>?>
6、優點
1.使用異步方式與服務器通訊，頁面不須要從新加載，頁面無刷新
2.按需取數據，減小服務器的負擔
3.使得Web應用程序更爲迅捷地響應用戶交互
4.AJAX基於標準化的並被普遍支持的技術，不須要下載瀏覽器插件或者小程序，但須要客戶容許JavaScript在瀏覽器上執行
5.瀏覽器的內容和服務端代碼進行分離。頁面的內容所有由JAVAScript來控制，服務端負責邏輯的校驗和從數據庫中拿數據。
7、缺點
1.安全問題：將服務端的方法暴露出來，黑客可利用這一點進行攻擊
2.大量JS代碼，容易出錯
3.Ajax的無刷新重載，因爲頁面的變化沒有刷新重載那麼明顯，因此容易給用戶帶來困擾——用戶不太清楚如今的數據是新的仍是已經更新過的；現有的解決有：在相關位置提示、數據更新的區域設計得比較明顯、數據更新後給用戶提示等
4.可能破壞瀏覽器後退按鈕的正常行爲；
5.一些手持設備（如手機、PAD等）自帶的瀏覽器如今還不能很好的支持Ajax
8、應用場景
1.對數據進行過濾和操縱相關數據的場景
2.添加/刪除樹節點
3.添加/刪除列表中的某一行記錄
4.切換下拉列表item
5.註冊用戶名重名的校驗
9、不適用場景
1.整個頁面內容的保存
2.導航
悟空聊架構
關注我，帶你天天進步一點點！
還有111本書籍贈送~~
本文分享自微信公衆號 - 悟空聊架構（PassJava666）。
若有侵權，請聯繫 support@oschina.cn 刪除。
本文參與「OSC源創計劃」，歡迎正在閱讀的你也加入，一塊兒分享。