我是AJAX（異步的JavaScript 和 XML）

文章目錄

1.AJAX是什麼

五個步驟

先祝大家週六快樂哈，但是夏天的下午坐在教室是真的困困困 (:3[▓▓] (:3[▓▓▓▓▓▓▓▓▓] (¦3[▓▓]

1.AJAX是什麼

AJAX 不是新的編程語言，而是一種使用現有標準的新方法。
AJAX 最大的優點是在不重新加載整個頁面的情況下，可以與服務器交換數據並更新部分網頁內容。
AJAX 不需要任何瀏覽器插件，但需要用戶允許JavaScript在瀏覽器上執行。

創建XMLHttpRequest對象,也就是創建一個異步調⽤用對象
創建⼀一個新的HTTP請求,並指定該HTTP請求的⽅方法,URL及驗證信息
設置響應HTTP請求狀態變化的函數
發送HTTP請求.
獲取異步調⽤用返回的數據
使⽤用JavaScript和DOM實現局部刷新

AJAX是基於現有的Internet標準，並且聯合使用它們：

XMLHttpRequest 對象 (異步的與服務器交換數據)
JavaScript/DOM (信息顯示/交互)
CSS (給數據定義樣式)
XML (作爲轉換數據的格式)

AJAX應用程序與瀏覽器和平臺無關的！
優點

不需要插件的⽀持，原⽣ js 就可以使⽤
⽤戶體驗好（不需要刷新⻚⾯就可以更新數據）
減輕服務端和帶寬的負擔

缺點：

ajax不不⽀支持瀏覽器器back按鈕。
安全問題 AJAX暴暴露露了了與服務器交互的細節。
對搜索引擎的⽀支持⽐比較弱。
破壞了了程序的異常機制。

五個步驟

1.創建對象
2.初始化請求
3.設置http頭信息
4.指定回調函數
5.發送請求

var xhr =null;//創建對象
 if(window.XMLHttpRequest){ xhr = new XMLHttpRequest();
  }else{ 
        xhr = new ActiveXObject("Microsoft.XMLHTTP"); 
  }     xhr.open(“方式”,”地址”,”標誌位”);//初始化請求
        xhr.setRequestHeader(“”,””);//設置http頭信息
        xhr.onreadystatechange =function(){}//指定回調函數 
        xhr.send();//發送請求

2.創建XMLHttpRequest對象

XMLHttpRequest 用於在後臺與服務器交換數據。這意味着可以在不重新加載整個網頁的情況下，對網頁的某部分進行更新。
創建 XMLHttpRequest 對象的語法：

variable=new XMLHttpRequest();

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

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

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script type="text/javascript">
		//創建愛你XMLHttpRequest對象
		function createXMLHttpRequest(){
			var xhr=null;
			if (window.ActiveXOBject){//IE瀏覽器創建方式
				xhr=new ActiveXOBject("Microsoft.XMLHTTP");
			}else if(window.XMLHttpRequest){//非ie瀏覽器或IE7以上版本
				xhr=new XMLHttpRequest();
			}
			if(!(xhr)){//異常，創建對對象失敗
				window.alert("創建XMLHttpRequest異常");
			}
			return xhr;
		}


	</script>
</head>
<body>
	
</body>
</html>

3.向服務器發送請求

如需將請求發送到服務器，我們使用 XMLHttpRequest 對象的 open() 和 send() 方法
第一個open方法其實是配置ajax必要的信息，第二個send纔是真正的發起請求到服務器

xmlhttp.open(“GET”,“ajax_info.txt”,true);
xmlhttp.send();

同步or異步?

false同步執行，程序會暫停在那兒等待結果返回
true異步執行，不阻礙後續代碼的執行

同步：阻塞的 -張三叫李四去喫飯，李四一直忙得不停，張三一直等着，直到李四忙完兩個人一塊去喫飯 =瀏覽器向服務器請求數據，服務器⽐較忙，瀏覽器一直等着（⻚面白屏），直到服務器返回數據，瀏覽器才能顯示頁面

異步：⾮阻塞的 -張三叫李四去喫飯，李四在忙，張三說了一聲然後自己就去喫飯了，李四忙完後自己去喫 =瀏覽器向服務器請求數據，服務器比較忙，瀏覽器可以自如的幹原來的事情（顯示頁面），服務器返回數據的時候通知瀏覽器一聲，瀏覽器把返回的數據再渲染到⻚面，局部更新

這樣就會導致瀏覽器出現假死狀態，影響界面的加載。所以這個屬性基本上不推薦使用了，爲了解決這個問題，現代瀏覽器都是通過Promise Api來進行操作。

get or post？

GET：⼀般⽤用於信息獲取，使⽤用URL傳遞參數，對url地址的長度有限制，對所發送信息的數量量也有限制，⼀般在2000個字符，有的瀏覽器器是8000個字符

請求的參數都暴露在url地址中，如果傳遞中文參數需要自己進行編碼操作，安全性比較低

POST：⼀般⽤用於提交數據，沒有數據長度的限制，對所發送的信息沒有限制，提交的數據內容都存在於http請求體中，數據不會暴露在url地址中

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

⽆法使用緩存⽂件（更新服務器上的⽂件或數據庫）
向服務器發送大量數據（POST 沒有數據量限制）
發送包含未知字符的用戶輸⼊時，POST 比 GET 更穩定也更可靠

一個簡單的 GET 請求：

xmlhttp.open("GET","請求地址",true);
xmlhttp.send();

加粗樣式一個簡單 POST 請求：

xmlhttp.open("POST","請求地址",true);
xmlhttp.send();

如果需要像 HTML 表單那樣 POST 數據，使用 setRequestHeader() 來添加 HTTP 頭。
然後在 send() 方法中規定希望發送的數據

4.服務器響應

如需獲得來自服務器的響應使用 XMLHttpRequest 對象的 responseText 或 responseXML 屬性

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

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

如果來自服務器的響應是 XML，而且需要作爲 XML 對象進行解析，使用 responseXML 屬性
請求 cd_catalog.xml 文件，並解析響應：

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;

5.onreadystatechange 事件

當請求被髮送到服務器時，我們需要執行一些基於響應的任務。
每當 readyState 改變時，就會觸發 onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態信息。
在 onreadystatechange 事件中，我們規定當服務器響應已做好被處理的準備時所執行的任務。

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


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

注意： onreadystatechange 事件被觸發 4 次（0 - 4）, 分別是： 0-1、1-2、2-3、3-4，對應着 readyState 的每個變化。
使用回調函數

回調函數是一種以參數形式傳遞給另一個函數的函數。

如果你的網站上存在多個 AJAX 任務，那麼應該爲創建 XMLHttpRequest 對象編寫一個標準的函數，併爲每個 AJAX 任務調用該函數。

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

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

下面是整理的一些AJAX的面試題，還有一點點就看完了再堅持一會會也要下課了 (:3[▓▓] (:3[▓▓▓▓▓▓▓▓▓] (¦3[▓▓]

6.AJAX常見問題彙總

1.如何解決跨域問題
理理解跨域的概念：協議、域名、端⼝口都相同才同域，否則都是跨域

出於安全考慮，服務器器不不允許ajax跨域獲取數據，但是可以跨域獲取⽂文件內容

所以基於這⼀一點，可以動態創建script標籤，使⽤用標籤的src屬性訪問js⽂文件的形式獲取js腳本，並且這個js腳本中的內容是函數調⽤，該函數調⽤的參數是服務器器返回的數據，爲了獲取這里的參數數據，需要事先在頁面中定義回調函數，在回調函數中處理服務器返回的數據，這就是解決跨域問題的主流解決⽅方案

2.頁面編碼和被請求的資源編碼如果不一致如何處理？

對於ajax請求傳遞的參數，如果是get請求方式，參數如果傳遞中文，在有些瀏覽器會亂碼，不同的瀏覽器對參數編碼的處理⽅方式不同

所以對於get請求的參數需要使用 encodeURIComponent函數對參數進行編碼處理，後臺開發語⾔言都有相應的解碼api。

對於post請求不需要進行編碼

3.異步加載的方式

異步加載的⽅方案：動態插入 script 標籤
通過 ajax 去獲取 js 代碼，然後通過 eval 執⾏
script 標籤上添加 defer 或者 async 屬性
創建並插⼊ iframe，讓它異步執⾏ js

4.解釋jsonp的原理理，以及爲什什麼不不是真正的ajax
Jsonp並不是⼀種數據格式，而json是一種數據格式，
jsonp是⽤用來解決跨域獲取數據的⼀種解決⽅案，具體是通過動態創建script標籤，然後通過標籤的src屬性獲取js文件中的js腳本
該腳本的內容是⼀個函數調用，參數就是服務器返回的數據
爲了處理這些返回的數據，需要事先在頁面定義好回調函數，本質上使用的並不是ajax技術

5.什麼是Ajax和JSON，它們的優缺點。
Ajax是全稱是asynchronous JavaScript andXML，即異步JavaScript和xml，用於在Web⻚面中實現異步數據交互，實現⻚面局部刷新。

優點：可以使得頁面不重載全部內容的情況下加載局部內容，降低數據傳輸量，避免用戶不斷刷新或者跳轉頁面，提⾼用戶體驗
缺點：不能回退, 對搜索引擎不友好；要實現ajax下的前後退功能成本較⼤；可能造成請求數的增加跨域問題限制；

JSON是⼀一種輕量級的數據交換格式，ECMA的⼀一個子集
優點：輕量級、易於人的閱讀和編寫，便於機器（JavaScript）解析，⽀持複合數據類型（數組、對象、字符串、數字）

6.http常見的狀態碼有那些？分別代表是意思？
200 - 請求成功
301 - 資源（⽹頁等）被永久轉移到其它URL
404 - 請求的資源（⽹頁等）不存在
500 - 內部服務器器錯誤

7.、⼀個頁面從輸入 URL 到頁面加載顯示完成，這個過程中都發⽣了什麼？

分爲4個步驟：

當發送⼀一個 URL 請求時，不管這個 URL 是 Web ⻚面的 URL 還是 Web ⻚面上每個資源的 URL，瀏覽器都會開啓⼀個線程來處理這個請求，同時在遠程 DNS 服務器上啓動⼀個 DNS 查詢。這能使瀏覽器獲得請求對應的 IP 地址。
瀏覽器與遠程 Web 服務器通過 TCP 三次握⼿手協商來建⽴⼀個 TCP/IP 連接。該握手包括⼀個同步報文，⼀個同步-應答報文和⼀個應答報文，這三個報文在瀏覽器和服務器之間傳遞。該握手⾸先由客戶端嘗試建立起通信，⽽後服務器應答並接受客戶端的請求，後由客戶端發出該請求已經被接受的報文。
一旦 TCP/IP 連接建立，瀏覽器器會通過該連接向遠程服務器器發送 HTTP 的 GET 請求。遠程服務器找到資源並使⽤ HTTP 響應返回該資源，值爲 200 的 HTTP 響應狀態表示⼀個正確的響應
此時，Web 服務器器提供資源服務，客戶端開始下載資源。

8.減低⻚面加載時間的方法

1、壓縮css、js⽂文件
2、合併js、css⽂文件，減少http請求
3、外部js、css⽂文件放在底下
4、減少dom操作，儘可能⽤用變量量替代不必要的dom操作

9.、爲什⽤用多個域名來存儲⽹站資源會更有效？
確保用戶在不同地區能用快的速度打開網站，其中某個域名崩潰用戶也能通過其他域名訪問網站，並且不同的資源放到不同的服務器上有利於減輕單臺服務器的壓⼒

10.ajax請求時，如何解釋json數據
使⽤用eval() 或者JSON.parse() 鑑於安全性考慮，推薦使⽤用JSON.parse()更更靠譜，對數據的安全性更更好。
11、javascript的本地對象，內置對象和宿主對象
本地對象爲獨⽴立於宿主環境的ECMAScript提供的對象，包括Array Object RegExp等可以new實例例化的對象
內置對象爲Gload，Math 等不不可以實例例化的(他們也是本地對象，內置對象是本地對象的⼀一個⼦子集) 宿主對象爲所有的非本地對象，所有的BOM和DOM對象都是宿主對象，如瀏覽器⾃自帶的 document,window 等對象

我是AJAX（異步的JavaScript 和 XML）

文章目錄

1.AJAX是什麼

五個步驟

2.創建XMLHttpRequest對象

3.向服務器發送請求

同步or異步?

get or post？

4.服務器響應

5.onreadystatechange 事件

6.AJAX常見問題彙總

web前端開發筆記整理（五）

LIUNX自測基礎命令測驗題目+考覈點（三）

Js_Data對象，定時器,腳本化css

jQuery實現tab欄切換（附上代碼）

web前端開發筆記整理（四）

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

linux以太網驅動總結