標籤：window stat tab 字串 利用 mode 系統 title select
一、貼dome，ajax三大步
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script> // alert(window.ActiveXObject); window.onload=function(){ var btn=document.querySelector(‘input‘); btn.onclick=function(){ console.log(1) /***一、執行個體化Ajax對象***************************/ var xhr=getXhr(); /**二、資料提交***********************************/ /*************1.使用open()+send()方法 get***************************/ // 以get形式 xhr.open("get","06Ajax.php?act=json&user=kn",true); //open() 提交資料 xhr.send(); //1).send() 不能省略 //2).get資料在url上發送 //3).post 必須加要求標頭 /*************2.使用open()+send()方法 post***************************/ // 以post形式 // xhr.open("post","http://test.com/06Ajax.php?act=json",true); //無法跨域訪問 /* xhr.open("post","06Ajax.php?act=json",true); //open() 提交url xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send("user=kn&paw=123");*/ /**三、資料接收***********onreadystatechang()***************************/ //本質上就2種資料 xml和字串 //1、字串 xhr.onreadystatechange = function(){ // 保證伺服器端響應的資料發送完畢 if(xhr.readyState == 4){ // 保證這次請求必須是成功的 if(xhr.status == 200){ // 接收伺服器端的資料 var json = xhr.responseText;//擷取資料 json格式的字串 console.log(json);//‘{"act":"json","user":"kn"}‘ /* * 使用eval()函數進行轉換 * * 使用"()"將其包裹,eval()函數強制將其轉換為JSON格式(javascript代碼) * * 不使用"()"將其包裹,eval()函數將其識別為一個空的代碼塊 */ var data = eval("("+json+")");// console.log(data);//{"act":"json","user":"kn"} } } } console.log(xhr); } } // 定義建立XMLHttpRequest對象的函數 function getXhr(){ // 聲明XMLHttpRequest對象 var xhr; // 根據不同瀏覽器建立 if(window.XMLHttpRequest){ // 其他瀏覽器 xhr = new XMLHttpRequest(); }else{ // IE瀏覽器(8及之前) xhr = new ActiveXObject("Microsoft.XMLHttp"); } // 返回XMLHttpRequest對象 return xhr; } </script></head><body> <input type="button" value="ajax"> </body></html>
二：ajax的意義
1.什麼是AJAX?
AJAX全稱為“Asynchronous JavaScript and XML”（非同步JavaScript和XML），
不是一種新的程式設計語言，而是一種用於建立更好更快以及互動性更強的Web應用程式的技術。
它使用：
使用XHTML+CSS來標準化呈現；
使用XML和XSLT進行資料交換及相關操作；
使用XMLHttpRequest對象與Web伺服器進行非同步資料通訊；
使用Javascript操作Document Object Model進行動態顯示及互動；
使用JavaScript綁定和處理所有資料。
2.與傳統的web應用比較
通過在後台與伺服器進行少量資料交換，AJAX 可以使網頁實現非同步更新。這意味著可以在不重新載入整個網頁的情況下，對網頁的某部分進行更新。傳統的網頁（不使用 AJAX）如果需要更新內容，必須重載整個網頁頁面。 3.AJAX的工作原理XMLHttpRequest 對象方法描述
| 方 法 | 描 述 |
| abort() | 停止當前請求 |
| getAllResponseHeaders() | 把HTTP請求的所有響應首部作為鍵/值對返回 |
| getResponseHeader("header") | 返回指定首部的串值 |
| open("method","URL",[asyncFlag],["userName"],["password"]) | 建立對伺服器的調用。method參數可以是GET、POST或PUT。url參數可以是相對URL或絕對URL。這個方法還包括3個可選的參數，是否非同步，使用者名稱，密碼 |
| send(content) | 向伺服器發送請求 |
| setRequestHeader("header", "value") | 把指定首部設定為所提供的值。在設定任何首部之前必須先調用open()。設定header並和請求一起發送 (‘post‘方法一定要 ) |
XMLHttpRequest 對象屬性描述
| 屬 性 | 描 述 |
| onreadystatechange | 狀態改變的事件觸發程序，每個狀態改變時都會觸發這個事件處理器，通常會調用一個JavaScript函數 |
| readyState | 請求的狀態。有5個可取值：0 = 未初始化，1 = 正在載入，2 = 已載入，3 = 互動中，4 = 完成 |
| responseText | 伺服器的響應，返回資料的文本。 |
| responseXML | 伺服器的響應，返回資料的相容DOM的XML文檔對象 ，這個對象可以解析為一個DOM對象。 |
| responseBody | 伺服器返回的主題（非文字格式設定） |
| responseStream | 伺服器返回的資料流 |
| status | 伺服器的HTTP狀態代碼（如：404 = "檔案末找到" 、200 ="成功" ，等等） |
| statusText | 伺服器返回的狀態文本資訊 ，HTTP狀態代碼的相應文本（OK或Not Found（未找到）等等） |
4.AJAX的優缺點
(1).AJAX的優點
<1>.無重新整理更新資料。
AJAX最大優點就是能在不重新整理整個頁面的前提下與伺服器通訊維護資料。這使得Web應用程式更為迅捷地響應使用者互動，並避免了在網路上發送那些沒有改變的資訊，減少使用者等待時間，帶來非常好的使用者體驗。
<2>.非同步與伺服器通訊。
AJAX使用非同步方式與伺服器通訊，不需要打斷使用者的操作，具有更加迅速的響應能力。最佳化了Browser和Server之間的溝通，減少不必要的資料轉送、時間及降低網路上資料流量。
<3>.前端和後端Server Load Balancer。
AJAX可以把以前一些伺服器負擔的工作轉嫁到用戶端，利用用戶端閑置的能力來處理，減輕伺服器和頻寬的負擔，節約空間和寬頻租用成本。並且減輕伺服器的負擔，AJAX的原則是“按需取資料”，可以最大程度的減少冗餘請求和響應對伺服器造成的負擔，提升網站效能。
<4>.基於標準被廣泛支援。
AJAX基於標準化的並被廣泛支援的技術，不需要下載瀏覽器外掛程式或者小程式，但需要客戶允許JavaScript在瀏覽器上執行。隨著Ajax的成熟，一些簡化Ajax使用方法的程式庫也相繼問世。同樣，也出現了另一種輔助程式設計的技術，為那些不支援JavaScript的使用者提供替代功能。
<5>.介面與應用分離。
Ajax使WEB中的介面與應用分離（也可以說是資料與呈現分離），有利於分工合作、減少非技術人員對頁面的修改造成的WEB應用程式錯誤、提高效率、也更加適用於現在的發布系統。
(2).AJAX的缺點
<1>.AJAX幹掉了Back和History功能，即對瀏覽器機制的破壞。
在動態更新頁面的情況下，使用者無法回到前一個頁面狀態，因為瀏覽器僅能記憶記錄中的靜態頁面。一個被完整讀入的頁面與一個已經被動態修改過的頁面之間的差別非常微妙；使用者通常會希望單擊後退按鈕能夠取消他們的前一次操作，但是在Ajax應用程式中，這將無法實現。
後退按鈕是一個標準的web網站的重要功能，但是它沒法和js進行很好的合作。這是Ajax所帶來的一個比較嚴重的問題，因為使用者往往是希望能夠通過後退來取消前一次操作的。那麼對於這個問題有沒有辦法？答案是肯定的，用過Gmail的知道，Gmail下面採用的Ajax技術解決了這個問題，在Gmail下面是可以後退的，但是，它也並不能改變Ajax的機制，它只是採用的一個比較笨但是有效辦法，即使用者單擊後退按鈕訪問記錄時，通過建立或使用一個隱藏的IFRAME來重現頁面上的變更。（例如，當使用者在Google Maps中單擊後退時，它在一個隱藏的IFRAME中進行搜尋，然後將搜尋結果反映到Ajax元素上，以便將應用程式狀態恢複到當時的狀態。）
但是，雖然說這個問題是可以解決的，但是它所帶來的開發成本是非常高的，並與Ajax架構所要求的快速開發是相背離的。這是Ajax所帶來的一個非常嚴重的問題。
一個相關的觀點認為，使用動態網頁面更新使得使用者難於將某個特定的狀態儲存到收藏夾中。該問題的解決方案也已出現，大部分都使用URL片斷標識符（通常被稱為錨點，即URL中#後面的部分）來保持跟蹤，允許使用者回到指定的某個應用程式狀態。（許多瀏覽器允許JavaScript動態更新錨點，這使得Ajax應用程式能夠在更新顯示內容的同時更新錨點。）這些解決方案也同時解決了許多關於不支援後退按鈕的爭論。
<2>.AJAX的安全問題。
AJAX技術給使用者帶來很好的使用者體驗的同時也對IT企業帶來了新的安全威脅，Ajax技術就如同對企業資料建立了一個直接通道。這使得開發人員在不經意間會暴露比以前更多的資料和伺服器邏輯。Ajax的邏輯可以對用戶端的安全掃描技術隱藏起來，允許駭客從遠端伺服器上建立新的攻擊。還有Ajax也難以避免一些已知的安全弱點，諸如跨網站腳步攻擊、SQL注入攻擊和基於Credentials的安全性漏洞等等。
<3>.對搜尋引擎支援較弱。
對搜尋引擎的支援比較弱。如果使用不當，AJAX會增大網路資料的流量，從而降低整個系統的效能。
ajax 原理----初級篇
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
