當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

ajax div 赋值重新渲染_30分钟全面解析图解AJAX原理

發布時間：2023/12/19 编程问答 29 豆豆

生活随笔收集整理的這篇文章主要介紹了 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

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.代碼

客戶端代碼：

服務端代碼：

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代碼:

這里有一點需要注意

總結

以上是生活随笔為你收集整理的ajax div 赋值重新渲染_30分钟全面解析图解AJAX原理的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： Ubuntu用户Steam控制器不工作的
下一篇：读书笔记（javascript 高级程序