ajax div 赋值重新渲染_30分钟全面解析图解AJAX原理
閱讀目錄
一、什么是 AJAX?
二、提交Form表單的原理
三、提交請求和服務響應的原理
四、XMLHttpRequest 對象的知識
五、JQuery實現AJAX
六、優勢
七、缺點
八、應用場景
九、不適用場景
閱讀本文需要30分鐘，請先收藏轉發后再看。
先上原理圖:
背景：
1.傳統的Web網站，提交表單，需要重新加載整個頁面。
2.如果服務器長時間未能返回Response，則客戶端將會無響應，用戶體驗很差。
3.服務端返回Response后，瀏覽器需要加載整個頁面，對瀏覽器的負擔也是很大的。
4.瀏覽器提交表單后，發送的數據量大，造成網絡的性能問題。
問題：
1.如何改進？
2.AJAX是什么？
3.有什么優勢？
4.有什么缺點？
一、什么是?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呈現在頁面上。
二、提交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。
三、AJAX提交請求和服務響應的原理
1.代碼
客戶端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 |
總結
以上是生活随笔為你收集整理的ajax div 赋值重新渲染_30分钟全面解析图解AJAX原理的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Ubuntu用户Steam控制器不工作的
- 下一篇： 安卓关于图片压缩的那些事儿,希望给每个安