關於Ajax是執行在伺服器端還是客戶端的問題

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

其實對Ajax一點也不熟悉（或者說對前端這些東西一點也不熟悉），但是期末考試還要考類似的概念問題，聽說會有這樣的nc題，

Ajax是執行在伺服器端還是客戶端。一開始查定義對這個瞭解的不太清楚，之後又查了一下細節，覺得如果這樣問的話，回答只能是在客戶端吧，下面是查到的一些資料

什麼是 AJAX ？

AJAX = 非同步 JavaScript 和 XML。

AJAX 是一種用於建立快速動態網頁的技術。

通過在後臺與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

傳統的網頁（不使用 AJAX）如果需要更新內容，必需過載整個網頁面。

有很多使用 AJAX 的應用程式案例：新浪微博、Google 地圖、開心網等等。

AJAX 例項解釋

上面的 AJAX 應用程式包含一個 div 和一個按鈕。

div 部分用於顯示來自伺服器的資訊。當按鈕被點選時，它負責呼叫名為 loadXMLDoc() 的函式：

<html>
<body>

<div id="myDiv"><h3>Let AJAX change this text</h3></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button 
>

</body>
</html>

接下來，在頁面的 head 部分新增一個 <script> 標籤。該標籤中包含了這個 loadXMLDoc() 函式：

<head>
<script type="text/javascript">
function loadXMLDoc()
{
.... AJAX script goes here ...
}
</script>
</head>

XMLHttpRequest 是 AJAX 的基礎。

XMLHttpRequest 物件

所有現代瀏覽器均支援 XMLHttpRequest 物件（IE5 和 IE6 使用 ActiveXObject）。

XMLHttpRequest 用於在後臺與伺服器交換資料。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。

建立 XMLHttpRequest 物件

所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 以及 Opera）均內建 XMLHttpRequest 物件。

建立 XMLHttpRequest 物件的語法：

variable=new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 物件：

variable=new ActiveXObject("Microsoft.XMLHTTP");

為了應對所有的現代瀏覽器，包括 IE5 和 IE6，請檢查瀏覽器是否支援 XMLHttpRequest 物件。如果支援，則建立 XMLHttpRequest 物件。如果不支援，則建立 ActiveXObject ：

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");

XMLHttpRequest 物件用於和伺服器交換資料。

向伺服器傳送請求

如需將請求傳送到伺服器，我們使用 XMLHttpRequest 物件的 open() 和 send() 方法：

xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

方法	描述
open( method , url , async )	規定請求的型別、URL 以及是否非同步處理請求。 method ：請求的型別；GET 或 POST url ：檔案在伺服器上的位置 async ：true（非同步）或 false（同步）
send( string )	將請求傳送到伺服器。 string ：僅用於 POST 請求

方法

描述

open( method , url , async )

規定請求的型別、URL 以及是否非同步處理請求。

method ：請求的型別；GET 或 POST
url ：檔案在伺服器上的位置
async ：true（非同步）或 false（同步）

send( string )

將請求傳送到伺服器。

string ：僅用於 POST 請求

GET 還是 POST？

與 POST 相比，GET 更簡單也更快，並且在大部分情況下都能用。

然而，在以下情況中，請使用 POST 請求：

無法使用快取檔案（更新伺服器上的檔案或資料庫）
向伺服器傳送大量資料（POST 沒有資料量限制）
傳送包含未知字元的使用者輸入時，POST 比 GET 更穩定也更可靠

GET 請求

一個簡單的 GET 請求：

xmlhttp.open("GET","demo_get.asp",true);
xmlhttp.send();

在上面的例子中，您可能得到的是快取的結果。

為了避免這種情況，請向 URL 新增一個唯一的 ID：

xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true);
xmlhttp.send();

如果您希望通過 GET 方法傳送資訊，請向 URL 新增資訊：

xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
xmlhttp.send();

POST 請求

一個簡單 POST 請求：

xmlhttp.open("POST","demo_post.asp",true);
xmlhttp.send();

如果需要像 HTML 表單那樣 POST 資料，請使用 setRequestHeader() 來新增 HTTP 頭。然後在 send() 方法中規定您希望傳送的資料：

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

方法	描述
setRequestHeader( header , value )	向請求新增 HTTP 頭。 header : 規定頭的名稱 value : 規定頭的值

方法

描述

setRequestHeader( header , value )

向請求新增 HTTP 頭。

header : 規定頭的名稱
value : 規定頭的值

url - 伺服器上的檔案

open() 方法的 url 引數是伺服器上檔案的地址：

xmlhttp.open("GET","ajax_test.asp",true);

該檔案可以是任何型別的檔案，比如 .txt 和 .xml，或者伺服器指令碼檔案，比如 .asp 和 .php （在傳回響應之前，能夠在伺服器上執行任務）。

非同步 - True 或 False？

AJAX 指的是非同步 JavaScript 和 XML（Asynchronous JavaScript and XML）。

XMLHttpRequest 物件如果要用於 AJAX 的話，其 open() 方法的 async 引數必須設定為 true：

xmlhttp.open("GET","ajax_test.asp",true);

對於 web 開發人員來說，傳送非同步請求是一個巨大的進步。很多在伺服器執行的任務都相當費時。AJAX 出現之前，這可能會引起應用程式掛起或停止。

通過 AJAX，JavaScript 無需等待伺服器的響應，而是：

在等待伺服器響應時執行其他指令碼
當響應就緒後對響應進行處理

Async = true

當使用 async=true 時，請規定在響應處於 onreadystatechange 事件中的就緒狀態時執行的函式：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","test1.txt",true);
xmlhttp.send();

Async = false

如需使用 async=false，請將 open() 方法中的第三個引數改為 false：

xmlhttp.open("GET","test1.txt",false);

我們不推薦使用 async=false，但是對於一些小型的請求，也是可以的。

請記住，JavaScript 會等到伺服器響應就緒才繼續執行。如果伺服器繁忙或緩慢，應用程式會掛起或停止。

註釋：當您使用 async=false 時，請不要編寫 onreadystatechange 函式 - 把程式碼放到 send() 語句後面即可：

xmlhttp.open("GET","test1.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

伺服器響應

如需獲得來自伺服器的響應，請使用 XMLHttpRequest 物件的 responseText 或 responseXML 屬性。

屬性	描述
responseText	獲得字串形式的響應資料。
responseXML	獲得 XML 形式的響應資料。

responseText 屬性

如果來自伺服器的響應並非 XML，請使用 responseText 屬性。

responseText 屬性返回字串形式的響應，因此您可以這樣使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

responseXML 屬性

如果來自伺服器的響應是 XML，而且需要作為 XML 物件進行解析，請使用 responseXML 屬性：

xmlDoc=xmlhttp.responseXML;
txt="";
x=xmlDoc.getElementsByTagName("ARTIST");
for (i=0;i<x.length;i++)
  {
  txt=txt + x[i].childNodes[0].nodeValue + "<br />";
  }
document.getElementById("myDiv").innerHTML=txt;

onreadystatechange 事件

當請求被髮送到伺服器時，我們需要執行一些基於響應的任務。

每當 readyState 改變時，就會觸發 onreadystatechange 事件。

readyState 屬性存有 XMLHttpRequest 的狀態資訊。

下面是 XMLHttpRequest 物件的三個重要的屬性：

屬性	描述
onreadystatechange	儲存函式（或函式名），每當 readyState 屬性改變時，就會呼叫該函式。
readyState	存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。 0: 請求未初始化 1: 伺服器連線已建立 2: 請求已接收 3: 請求處理中 4: 請求已完成，且響應已就緒
status	200: "OK" 404: 未找到頁面

屬性

描述

onreadystatechange

儲存函式（或函式名），每當 readyState 屬性改變時，就會呼叫該函式。

readyState

存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。

0: 請求未初始化
1: 伺服器連線已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成，且響應已就緒

status

200: "OK"

404: 未找到頁面

在 onreadystatechange 事件中，我們規定當伺服器響應已做好被處理的準備時所執行的任務。

當 readyState 等於 4 且狀態為 200 時，表示響應已就緒：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

註釋： onreadystatechange 事件被觸發 5 次（0 - 4），對應著 readyState 的每個變化。

使用 Callback 函式

callback 函式是一種以引數形式傳遞給另一個函式的函式。

如果您的網站上存在多個 AJAX 任務，那麼您應該為建立 XMLHttpRequest 物件編寫一個標準的函式，併為每個 AJAX 任務呼叫該函式。

該函式呼叫應該包含 URL 以及發生 onreadystatechange 事件時執行的任務（每次呼叫可能不盡相同）：

function myFunction()
{
loadXMLDoc("ajax_info.txt",function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  });
}

好了，以上都是摘自W3C上的權威指南，是關於ajax的一些基本的概念，原理以及簡單的用法，希望對大家有幫助

關於Ajax是執行在伺服器端還是客戶端的問題

其實對Ajax一點也不熟悉（或者說對前端這些東西一點也不熟悉），但是期末考試還要考類似的概念問題，聽說會有這樣的nc題， Ajax是執行在伺服器端還是客戶端。一開始查定義對這個瞭解的不太清楚，之後又查了一下細節，覺得如果這樣問的話，回答只能是在客戶端吧，下面是查到的一些資料

java多執行緒通訊（伺服器與多客戶端）

基於TCP的多執行緒通訊伺服器執行緒： package com.netproject1; import java.io.DataInputStream; import java.io.DataOutputStream; import java.io.IOExc

java多執行緒網路伺服器端向客戶端傳送檔案

tcpServer.java package com.tcp.server; import java.io.IOException; import java.net.ServerSocket; im

多執行緒實現伺服器與多個客戶端通訊,客戶端之間相互不干擾

1,服務端建立ServerSocket繫結埠號，迴圈呼叫accept()方法 2,客戶端建立一個socket並請求和伺服器端連線 3,伺服器端接受客戶端請求，建立socket與該客戶建立連線 4,兩個socket在一個單獨的執行緒上通話 5,伺服器端繼續等待新的連線

Android訊息推送的Androidpn實現方式：（一）下載androidpn伺服器端與客戶端的Demo並執行

androidpn是基於XMPP協議的用於向Android客戶端推送文字資訊的一套開源的工具。它幫我們做了那些維護Socket長連線等等的事情。在真正把它使用在我們的專案中之前，我們先領略一下推送。第二步，啟動伺服器端與客戶端，通過Web頁面推送。詳細的步驟如下：

Mybatis之攔截器--獲取執行SQL實現多客戶端數據同步

gin sign factor 方便完成後動態代理 exc batis 包安裝最近的一個項目是將J2EE環境打包安裝在客戶端(使用 nwjs + NSIS 制作安裝包)運行, 所有的業務操作在客戶端完成, 數據存儲在客戶端數據庫中. 服務器端數據庫匯總各客戶端的數據進

基於windows的簡單伺服器端和客戶端

伺服器端套接字建立步驟：1.呼叫socket函式建立套接字。2.呼叫bind函式分配IP地址和埠號。3.呼叫listen函式轉為可接收請求狀態。4.呼叫該accept函式受理連線請求。客戶端套接字建立步驟：1.呼叫socket函式建立套接字。2.呼叫connect函式向伺服器端傳送連線請求。

redis叢集與分片（1）-redis伺服器叢集、客戶端分片 redis叢集與分片（1）-redis伺服器叢集、客戶端分片

redis叢集與分片（1）-redis伺服器叢集、客戶端分片下面是來自知乎大神的一段說明，個人覺得非常清晰，就收藏了。為什麼叢集？通常，為了提高網站響應速度，總是把熱點資料儲存在記憶體中而不是直接從後端資料庫中

伺服器中判斷客戶端socket斷開連線的方法

1, 如果服務端的Socket比客戶端的Socket先關閉，會導致客戶端出現TIME_WAIT狀態，佔用系統資源。所以，必須等客戶端先關閉Socket後，伺服器端再關閉Socket才能避免TIME_WAIT狀態的出現。 2, 在linux下寫socket的程式的時候，如果嘗

基於AIX系統的應用日誌採集-Logstash伺服器端和客戶端配置

1.服務端 1.1.需要檔案(/opt/file): logstash-forwarder.crt logstash-forwarder.key 1.2. 執行命令生成金鑰檔案keystor

boost::asio伺服器處理多個客戶端連線(客戶端程式)

1.SDL2_net TCP伺服器端和客戶端的通訊

這幾天打算把以前做的遊戲嘗試加入區域網聯機，恰巧SDL提供了對應的庫，即SDL2_net。 1.安裝我的系統是ubuntu，安裝相對簡單，下面一個命令即可： sudo apt install libsdl2-net-dev 等待安裝完成即可。如果使用的是window，可以去官

Python下UDP的Socket程式設計：伺服器端因客戶端的非正常退出而報錯？

伺服器端程式碼 import socket import threading import logging import datetime logging.basicConfig(format='%(message)s', level=logging.INFO) class ChatUd

單點登入CAS使用記：關於伺服器超時以及客戶端超時的分析

我的預想情況一般情況下，當用戶登入一個站點後，如果長時間沒有發生任何動作，當用戶再次點選時，會被強制登出並且跳轉到登入頁面，提醒使用者重新登入。現在我已經為站點整合了CAS，並且已經實現了單點登入以及單點登出，那麼當用戶使用過程中，發生了超時的情況，估計也是自動的強行登

socket+執行緒池，寫服務端和客戶端進行互動

以下內容轉自： https://www.cnblogs.com/gnoc/p/4866788.html 前言　　 socket（套接字），Socket和ServerSocket位於java.net包中，持續開啟服務端，接收來自客戶端的資訊，並響應。最開始，咱們先來兩段最簡單的服

TCP實現伺服器端與客戶端通訊

TCP實現伺服器端接收客戶端傳送過來的訊息。伺服器端： import java.io.IOException; import java.io.InputStream; import java.net.ServerSocket; import java.net.Socket; p

Qt：Qt實現Winsock網路程式設計—TCP服務端和客戶端通訊（多執行緒）

Qt實現Winsock網路程式設計—TCP服務端和客戶端通訊（多執行緒）前言感覺Winsock網路程式設計的api其實和Linux下網路程式設計的api非常像，其實和其他程式語言的網路程式設計都差不太多。博主用Qt實現的，當然不想用黑視窗唄，有介面可以看到，由於GUI程式設計

伺服器獲取真實客戶端 IP

0x01 先查個問題測試環境微信支付通道提示網路環境未能通過安全驗證，請稍後再試，出現這種情況一般首要想到可能是雙方網路互動中微信方驗參與我們出現不一致，翻了下手冊確定是這類問題開始排查環節可能獲取真實IP方式錯誤 getenv('HTTP_CLIENT_IP') g

伺服器實時通知客戶端方案，伺服器傳送/推送事件方案（2）server event，典型例子，可以用作股票、新聞資訊推送

server event是html5規範的一部分，它相比websocket使用起來更簡單，對伺服器的改動也最小前端html部分 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"&

伺服器實時通知客戶端方案，伺服器傳送/推送事件方案（1）websocket

服務端 @Configuration public class WebSocketConfig { @Bean public ServerEndpointExporter serverEndpointExporter(){ return new ServerEndpointEx

關於Ajax是執行在伺服器端還是客戶端的問題

什麼是 AJAX ？

AJAX 例項解釋

XMLHttpRequest 物件

建立 XMLHttpRequest 物件

建立 XMLHttpRequest 物件的語法：

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 物件：

向伺服器傳送請求

GET 還是 POST？

GET 請求

POST 請求

url - 伺服器上的檔案

非同步 - True 或 False？

Async = true

Async = false

伺服器響應

responseText 屬性

responseXML 屬性

onreadystatechange 事件

使用 Callback 函式

相關推薦