簡介

AJAX 的完整拼寫是： Asynchronous JavaScript and XML（異步的 JavaScript 和 XML）。
可以看出，AJAX並不是一門新的語言，而是一種方法，能夠使JavaScript和XML異步的方法
最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據並更新部分網頁內容。

使用AJAX時需要使用如下知識點：
XMLHttpRequest 對象 (異步的與服務器交換數據)
JavaScript/DOM (信息顯示/交互)
CSS (給數據定義樣式)
XML (作爲轉換數據的格式)

其實AJAX 就是JavaScript 的一個方法，點擊按鈕或者其它事件，執行這個方法，這個方法只會改動頁面的一部分內容，不會修改整個頁面。

XMLHttpRequest

XMLHttpRequest 是 AJAX 的核心。

XMLHttpRequest 對象用於在後臺與服務器交換數據。可以通過XMLHttpRequest：

在不重新加載頁面的情況下更新網頁
在頁面已加載後從服務器請求數據
在頁面已加載後從服務器接收數據
在後臺向服務器發送數據

創建一個 XMLHttpRequest 對象

所有現代瀏覽器（IE7+、Firefox、Chrome、Safari 和 Opera）都有內建的 XMLHttpRequest 對象。

XMLHttpRequest 對象提供了對 HTTP 協議的完全的訪問，包括做出 POST 和 HEAD 請求以及普通的 GET 請求的能力。XMLHttpRequest 可以同步或異步地返回 Web 服務器的響應，並且能夠以文本或者一個 DOM 文檔的形式返回內容。

儘管名爲 XMLHttpRequest，它並不限於和 XML 文檔一起使用：它可以接收任何形式的文本文檔。

XMLHttpRequest 對象是名爲 AJAX 的 Web 應用程序架構的一項關鍵功能。

創建 XMLHttpRequest 對象的語法：

xmlhttp=new XMLHttpRequest();

舊版本的Internet Explorer（IE5和IE6）中使用 ActiveX 對象：

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

屬性

readyState
HTTP 請求的狀態.當一個 XMLHttpRequest 初次創建時，這個屬性的值從 0 開始，直到接收到完整的 HTTP 響應，這個值增加到 4。

5 個狀態中每一個都有一個相關聯的非正式的名稱，下表列出了狀態、名稱和含義：

狀態	名稱	描述
0	Uninitialized	初始化狀態。XMLHttpRequest 對象已創建或已被 abort() 方法重置。
1	Open	open() 方法已調用，但是 send() 方法未調用。請求還沒有被髮送。
2	Sent	Send() 方法已調用，HTTP 請求已發送到 Web 服務器。未接收到響應。
3	Receiving	所有響應頭部都已經接收到。響應體開始接收但未完成。
4	Loaded	HTTP 響應已經完全接收。

readyState 的值不會遞減，除非當一個請求在處理過程中的時候調用了 abort() 或 open() 方法。每次這個屬性的值增加的時候，都會觸發 onreadystatechange 事件句柄。

responseText
目前爲止爲服務器接收到的響應體（不包括頭部），或者如果還沒有接收到數據的話，就是空字符串。

如果 readyState 小於 3，這個屬性就是一個空字符串。當 readyState 爲 3，這個屬性返回目前已經接收的響應部分。如果 readyState 爲 4，這個屬性保存了完整的響應體。

如果響應包含了爲響應體指定字符編碼的頭部，就使用該編碼。否則，假定使用 Unicode UTF-8。

responseXML
對請求的響應，解析爲 XML 並作爲 Document 對象返回。

status
由服務器返回的 HTTP 狀態代碼，如
200 表示成功，
404 表示 “Not Found” 錯誤。
當 readyState 小於 3 的時候讀取這一屬性會導致一個異常。

statusText
這個屬性用名稱而不是數字指定了請求的 HTTP 的狀態代碼。也就是說，當狀態爲 200 的時候它是 “OK”，當狀態爲 404 的時候它是 “Not Found”。和 status 屬性一樣，當 readyState 小於 3 的時候讀取這一屬性會導致一個異常。

事件句柄

onreadystatechange
每次 readyState 屬性改變的時候調用的事件句柄函數。當 readyState 爲 3 時，它也可能調用多次。

方法

abort()
取消當前響應，關閉連接並且結束任何未決的網絡活動。

這個方法把 XMLHttpRequest 對象重置爲 readyState 爲 0 的狀態，並且取消所有未決的網絡活動。例如，如果請求用了太長時間，而且響應不再必要的時候，可以調用這個方法。

getAllResponseHeaders()
把 HTTP 響應頭部作爲未解析的字符串返回。

如果 readyState 小於 3，這個方法返回 null。否則，它返回服務器發送的所有 HTTP 響應的頭部。頭部作爲單個的字符串返回，一行一個頭部。每行用換行符 “\r\n” 隔開。

getResponseHeader()
返回指定的 HTTP 響應頭部的值。其參數是要返回的 HTTP 響應頭部的名稱。可以使用任何大小寫來制定這個頭部名字，和響應頭部的比較是不區分大小寫的。

該方法的返回值是指定的 HTTP 響應頭部的值，如果沒有接收到這個頭部或者 readyState 小於 3 則爲空字符串。如果接收到多個有指定名稱的頭部，這個頭部的值被連接起來並返回，使用逗號和空格分隔開各個頭部的值。

open()
初始化 HTTP 請求參數，例如 URL 和 HTTP 方法，但是並不發送請求。

send()
發送 HTTP 請求，使用傳遞給 open() 方法的參數，以及傳遞給該方法的可選請求體。

setRequestHeader()
向一個打開但未發送的請求設置或添加一個 HTTP 請求。

XMLHttpRequest.open()

初始化 HTTP 請求參數

open(method, url, async, username, password)

參數	作用
method 參數：	用於請求的 HTTP 方法。值包括 GET、POST 和 HEAD。
url 參數：	是請求的主體。大多數瀏覽器實施了一個同源安全策略，並且要求這個 URL 與包含腳本的文本具有相同的主機名和端口。
async 參數：	指示請求使用應該異步地執行。如果這個參數是 false，請求是同步的，後續對 send() 的調用將阻塞，直到響應完全接收。如果這個參數是 true 或省略，請求是異步的，且通常需要一個 onreadystatechange 事件句柄。
username 參數（可選）的，	爲 url 所需的授權提供認證資格。如果指定了，它們會覆蓋 url 自己指定的任何資格。
password 參數（可選）爲	url 所需的授權提供認證資格。如果指定了，它們會覆蓋 url 自己指定的任何資格。

說明
這個方法初始化請求參數以供 send() 方法稍後使用。它把 readyState 設置爲 1，刪除之前指定的所有請求頭部，以及之前接收的所有響應頭部，並且把 responseText、responseXML、status 以及 statusText 參數設置爲它們的默認值。當 readyState 爲 0 的時候（當 XMLHttpRequest 對象剛創建或者 abort() 方法調用後）以及當 readyState 爲 4 時（已經接收響應時），調用這個方法是安全的。當針對任何其他狀態調用的時候，open() 方法的行爲是爲指定的。

除了保存供 send() 方法使用的請求參數，以及重置 XMLHttpRequest 對象以便複用，open() 方法沒有其他的行爲。要特別注意，當這個方法調用的時候，實現通常不會打開一個到 Web 服務器的網絡連接。

XMLHttpRequest.send()

發送一個 HTTP 請求

send(body)

如果通過調用 open() 指定的 HTTP 方法是 POST 或 PUT，body 參數指定了請求體，作爲一個字符串或者 Document 對象。如果請求體不適必須的話，這個參數就爲 null。對於任何其他方法，這個參數是不可用的，應該爲 null（有些實現不允許省略該參數）。

說明
這個方法導致一個 HTTP 請求發送。如果之前沒有調用 open()，或者更具體地說，如果 readyState 不是 1，send() 拋出一個異常。否則，它發送一個 HTTP 請求，該請求由以下幾部分組成：

之前調用 open() 時指定的 HTTP 方法、URL 以及認證資格（如果有的話）。
之前調用 setRequestHeader() 時指定的請求頭部（如果有的話）。
傳遞給這個方法的 body 參數。
一旦請求發佈了，send() 把 readyState 設置爲 2，並觸發 onreadystatechange 事件句柄。

如果之前調用的 open() 參數 async 爲 false，這個方法會阻塞並不會返回，直到 readyState 爲 4 並且服務器的響應被完全接收。否則，如果 async 參數爲 true，或者這個參數省略了，send() 立即返回，並且正如後面所介紹的，服務器響應將在一個後臺線程中處理。

如果服務器響應帶有一個 HTTP 重定向，send() 方法或後臺線程自動遵從重定向。當所有的 HTTP 響應頭部已經接收，send() 或後臺線程把 readyState 設置爲 3 並觸發 onreadystatechange 事件句柄。如果響應較長，send() 或後臺線程可能在狀態 3 中觸發 onreadystatechange 事件句柄：這可以作爲一個下載進度指示器。最後，當響應完成，send() 或後臺線程把 readyState 設置爲 4，並最後一次觸發事件句柄。

XMLHttpRequest.setRequestHeader()

setRequestHeader(name, value)

name 參數是要設置的頭部的名稱。這個參數不應該包括空白、冒號或換行。

value 參數是頭部的值。這個參數不應該包括換行。

說明
setRequestHeader() 方法指定了一個 HTTP 請求的頭部，它應該包含在通過後續 send() 調用而發佈的請求中。這個方法只有當 readyState 爲 1 的時候才能調用，例如，在調用了 open() 之後，但在調用 send() 之前。

如果帶有指定名稱的頭部已經被指定了，這個頭部的新值就是：之前指定的值，加上逗號、空白以及這個調用指定的值。

如果 open() 調用指定了認證資格，XMLHttpRequest 自動發送一個適當的 Authorization 請求頭部。但是，你可以使用 setRequestHeader() 來添加這個頭部。類似地，如果 Web 服務器已經保存了和傳遞給 open() 的 URL 相關聯的 cookie，適當的 Cookie 或 Cookie2 頭部也自動地包含到請求中。可以通過調用 setRequestHeader() 來把這些 cookie 添加到頭部。XMLHttpRequest 也可以爲 User-Agent 頭部提供一個默認值。如果它這麼做，你爲該頭部指定的任何值都會添加到這個默認值後面。

有些請求頭部由 XMLHttpRequest 自動設置而不是由這個方法設置，以符合 HTTP 協議。這包括如下和代理相關的頭部：

Host
Connection
Keep-Alive
Accept-charset
Accept-Encoding
If-Modified-Since
If-None-Match
If-Range
Range

下面看一個例子：
需要注意的是，如果是本地文件，就是把本地當作服務器，我安裝的是wampserver，直接打開wampserver就好了

然後把文件放在wamp4/www文件夾中。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
  <script>
    //點擊按鈕，執行loadXMLDoc函數
    function loadXMLDoc()
    {
      var xmlhttp;     //XMLHttpRequest對象，JavaScript是一種弱類型語言
      if (window.XMLHttpRequest)
      {
        //  IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
        xmlhttp=new XMLHttpRequest();
      }
      else
      {
        // IE6, IE5 瀏覽器執行代碼
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function()//每次 readyState 屬性改變的時候調用的事件句柄函數
      {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)//當服務器發送的數據已經完全接受，且返回的HTTP狀態碼爲200時
        {
          document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//將myDiv 的文本設置爲服務器返回的數據
        }
      }
      /*
       初始化http 請求
       1.GET 表示從服務器讀取數據
       2.ajaxtest1.txt 表示從這個文件中讀取數據
       3.true ：async=ture，表示請求異步執行      
       */
      xmlhttp.open("GET","ajaxtest1.txt",true);

      //將open 的請求發送
      xmlhttp.send();
    }
  </script>
</head>
<body>
  <div id="myDiv"><h2>使用 AJAX 修改該文本內容</h2></div>
  <button type="button" onclick="loadXMLDoc()">修改內容</button>
</body>
</html>

ajaxtest1.txt

運行結果：

點擊按鈕後：

AJAX - PHP

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function showHint(str)
{
  var xmlhttp;
  if (str.length==0)
  { 
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
    xmlhttp=new XMLHttpRequest();
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }

  /*
    初始化http 請求
    1.GET 表示從服務器讀取數據
    2.ajaxtest1.txt 表示從這個文件中讀取數據請，向 URL 添加了一個參數 q （帶有輸入框的內容）
      將輸入框傳入的字符串str 也發送到服務器上，服務器接受後會自動在php文件中處理
    3.true ：async=ture，表示請求異步執行      
    */
  xmlhttp.open("GET","gethint.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

	<h3>在輸入框中嘗試輸入字母 a:</h3>
	<form action=""> 
	輸入姓名: <input type="text" id="txt1" onkeyup="showHint(this.value)" />
	</form>
	<p>提示信息: <span id="txtHint"></span></p> 

</body>
</html>

服務器接受發送過來的消息後,會在php 文件中進行處理，然後返回數據。

<?php
	// Fill up array with names
	$a[]="Anna";
	$a[]="Brittany";
	$a[]="Cinderella";
	$a[]="Diana";
	$a[]="Eva";
	$a[]="Fiona";
	$a[]="Gunda";
	$a[]="Hege";
	$a[]="Inga";
	$a[]="Johanna";
	$a[]="Kitty";
	$a[]="Linda";
	$a[]="Nina";
	$a[]="Ophelia";
	$a[]="Petunia";
	$a[]="Amanda";
	$a[]="Raquel";
	$a[]="Cindy";
	$a[]="Doris";
	$a[]="Eve";
	$a[]="Evita";
	$a[]="Sunniva";
	$a[]="Tove";
	$a[]="Unni";
	$a[]="Violet";
	$a[]="Liza";
	$a[]="Elizabeth";
	$a[]="Ellen";
	$a[]="Wenche";
	$a[]="Vicky";
	
	//get the q parameter from URL
	$q=$_GET["q"];//獲取發送過來的消息
	
	//lookup all hints from array if length of q>0
	if (strlen($q) > 0)
	{
	  $hint="";
	  for($i=0; $i<count($a); $i++)
	  {
	    if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
	    {
	      if ($hint=="")
	      {
	        $hint=$a[$i];
	      }
	      else
	      {
	        $hint=$hint." , ".$a[$i];
	      }
	    }
	  }
	}
	
	// Set output to "no suggestion" if no hint were found
	// or to the correct values
	if ($hint == "")
	{
	  $response="no suggestion";
	}
	else
	{
	  $response=$hint;
	}
	
	//output the response
	echo $response;
?>

AJAX - XML

先看一個xml 文件

<!--  Edited by XMLSpy®  -->
<CATALOG>
    <CD>
        <TITLE>Empire Burlesque</TITLE>
        <ARTIST>Bob Dylan</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>Columbia</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1985</YEAR>
    </CD>
    <CD>
        <TITLE>Hide your heart</TITLE>
        <ARTIST>Bonnie Tyler</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS Records</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1988</YEAR>
    </CD>
    <CD>
        <TITLE>Greatest Hits</TITLE>
        <ARTIST>Dolly Parton</ARTIST>
        <COUNTRY>USA</COUNTRY>
        <COMPANY>RCA</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1982</YEAR>
    </CD>
    <CD>
        <TITLE>Still got the blues</TITLE>
        <ARTIST>Gary Moore</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Virgin records</COMPANY>
        <PRICE>10.20</PRICE>
        <YEAR>1990</YEAR>
    </CD>
    <CD>
        <TITLE>Eros</TITLE>
        <ARTIST>Eros Ramazzotti</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>BMG</COMPANY>
        <PRICE>9.90</PRICE>
        <YEAR>1997</YEAR>
    </CD>
    <CD>
        <TITLE>One night only</TITLE>
        <ARTIST>Bee Gees</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Polydor</COMPANY>
        <PRICE>10.90</PRICE>
        <YEAR>1998</YEAR>
    </CD>
    <CD>
        <TITLE>Sylvias Mother</TITLE>
        <ARTIST>Dr.Hook</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>CBS</COMPANY>
        <PRICE>8.10</PRICE>
        <YEAR>1973</YEAR>
    </CD>
    <CD>
        <TITLE>Maggie May</TITLE>
        <ARTIST>Rod Stewart</ARTIST>
        <COUNTRY>UK</COUNTRY>
        <COMPANY>Pickwick</COMPANY>
        <PRICE>8.50</PRICE>
        <YEAR>1990</YEAR>
    </CD>
    <CD>
        <TITLE>Romanza</TITLE>
        <ARTIST>Andrea Bocelli</ARTIST>
        <COUNTRY>EU</COUNTRY>
        <COMPANY>Polydor</COMPANY>
        <PRICE>10.80</PRICE>
        <YEAR>1996</YEAR>
    </CD>
</CATALOG>

看一下AJAX 如何與xml 交互：
loadXMLDoc() 函數創建 XMLHttpRequest 對象，添加當服務器響應就緒時執行的函數，並將請求發送到服務器。
當服務器響應就緒時，會構建一個 HTML 表格，從 XML 文件中提取節點（元素），最後使用 XML 數據的填充 id=“demo” 的表格元素：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
  var xmlhttp;
  var txt,x,i;
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執行代碼
    xmlhttp=new XMLHttpRequest();
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      xmlDoc=xmlhttp.responseXML;//服務器的響應是xml，而且需要xml對象進行解析
      txt="";
      x=xmlDoc.getElementsByTagName("ARTIST");//獲取xml 文件中爲ARTIST 的一項內容
      //將x轉換爲txt
      for (i=0;i<x.length;i++)
      {
        txt=txt + x[i].childNodes[0].nodeValue + "<br>";
      }
      document.getElementById("myDiv").innerHTML=txt;
    }
  }
  xmlhttp.open("GET","cd_catalog.xml",true);
  xmlhttp.send();
}
</script>
</head>

<body>

<h2>我收藏的 CD :</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">獲取我的 CD</button>
 
</body>
</html>

AJAX - 數據庫

ajax連接數據庫需要用到php，可以參考這個網站：
https://www.runoob.com/php/php-ajax-intro.html

AJAX入門詳解

目錄

簡介

XMLHttpRequest

創建一個 XMLHttpRequest 對象

屬性

事件句柄

方法

XMLHttpRequest.open()

XMLHttpRequest.send()

XMLHttpRequest.setRequestHeader()

AJAX - PHP

AJAX - XML

AJAX - 數據庫

AJAX入門詳解

jQuery 初入門

ECharts -Media Query

ECharts 事件處理

操作系統 --進程詳解

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結