前後端分離（一）
阿新 • • 發佈：2019-01-25
一、基礎知識
1、Ajax是Asynchronous JavaScript and XML 的縮寫，即非同步的JavaScript和XML。傳統的網頁（不使用Ajax）如果需要更新內容，必須過載整個網頁。Ajax是一種無需重新載入整個網頁的情況下，能夠更新部分網頁的技術。
2、一般處理程式：ASP.NET網站中這種副檔名為ashx的程式稱為"一般處理程式"，它與普通的副檔名為aspx的窗體網頁程式不同的是沒有HTML的窗體網頁程式碼，適合作為後臺伺服器處理資料。
二、Ajax-DEMO
client.html
<!DOCTYPE html> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Ajax</title> <script language="javascript"> var http=null; function getHttp() { //獲取XMLHttpRequest物件 var http = null; try { if (window.ActiveXObject) http = new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) http = new XMLHttpRequest(); else alert('Getting XMLHttpRequest faild'); } catch (exp) { alert(exp.description); } return http; } function process() { if(http.readyState==4) { //獲取伺服器響應，顯示結果 document.getElementById("msg").innerHTML = http.responseText; } } function getDateTime(){ try { //獲取XMLHttpRequest物件 if(http==null) { http = getHttp(); } http.onreadystatechange=process; //傳送資料 http.open("GET", "server.ashx?&rnd="+Math.random().toString(), true); http.send(null); } catch (exp) { alert(exp.description); } } </script> </head> <body> <img src="image.jpg" eidth="50" height="50"/> <input type="button" value="獲取" onclick="getDateTime()" /> <span id="msg" /> </body> </html>
1、載入同目錄下的一張圖片
2、每次點選“獲取”按鈕會像伺服器端傳送非同步請求
server.ashx
<%@ WebHandler Language="C#" Class="DEMO.server" Debug="true"%> using System; using System.Web; using System.Threading; namespace DEMO { public class server : IHttpHandler { public bool IsReusable { get { return false; } } public void ProcessRequest(HttpContext context) { String s = DateTime.Now.ToString("yyyy-MM-dd HH:mm:ss"); Thread.Sleep(1000); //輸出結果 context.Response.Clear(); context.Response.ContentType = "text/plain"; context.Response.Write(s); context.Response.Flush(); } } }
當有請求來的時候、獲取當前時間然後傳回客戶端（更復雜的功能可以以此為基礎進行擴充套件）
Web.config
<?xml version="1.0" encoding="utf-8"?>
<configuration>
<system.web>
<globalization requestEncoding="gb2312" responseEncoding="gb2312"/>
</system.web>
</configuration>