原生Ajax的簡單使用:XMLHttpRequest物件,方法,屬性,HelloWorld,資料格式
簡介
Ajax被認為是(Asynchronous JavaScript and XML的縮寫）。
現在，允許瀏覽器與伺服器通訊而無須重新整理當前頁面的技術都被叫做Ajax.
不用重新整理整個頁面便可與伺服器通訊的辦法：
1.Flash
2.Java applet
3.框架：如果使用一組框架構造了一個網頁，可以只更新其中一個框架，而不必驚動整個頁面
4.隱藏的iframe
5.XMLHttpRequest：該物件是對JavaScript的一個擴充套件，可使網頁與伺服器進行通訊。
是建立 Ajax 應用的最佳選擇。實際上通常把 Ajax 當成 XMLHttpRequest 物件的代名詞
Ajax並不是一項新技術，它實際上是幾種技術，
每種技術各盡其職，以一種全新的方式聚合在一起
伺服器端語言：
伺服器需要具備向瀏覽器傳送特定資訊的能力。Ajax與伺服器端語言無關。
XML (eXtensible Markup Language，可擴充套件標記語言) 是一種描述資料的格式。
Aajx 程式需要某種格式化的格式來在伺服器和客戶端之間傳遞資訊，XML 是其中的一種選擇
XHTML（eXtended Hypertext Markup Language,使用擴充套件超媒體標記語言）和
CSS（Cascading Style Sheet,級聯樣式單）標準化呈現；
DOM（Document Object Model,文件物件模型）實現動態顯示和互動；
使用XMLHTTP元件XMLHttpRequest物件進行非同步資料讀取
使用JavaScript繫結和處理所有資料
AJAX不是完美的技術。使用AJAX，它的一些缺陷不得不權衡一下：
由 Javascript 和 AJAX 引擎導致的瀏覽器的相容
頁面區域性重新整理，導致後退等功能失效。
對流媒體的支援沒有FLASH、Java Applet好。
一些手持裝置（如手機、PDA等）支援性差。
XMLHttpRequest物件
XMLHttpRequest 最早是在IE5中以ActiveX元件的形式實現的。非 W3C 標準.
建立XMLHttpRequest物件（由於非標準所以實現方法不統一）
Internet Explorer把XMLHttpRequest實現為一個ActiveX物件
其他瀏覽器（Firefox、Safari、Opera…）把它實現為一個本地的JavaScript物件。
XMLHttpRequest在不同瀏覽器上的實現是相容的，
所以可以用同樣的方式訪問XMLHttpRequest例項的屬性和方法，
而不論這個例項建立的方法是什麼。
建立
為了每次寫Ajax的時候都節省一點時間，可以把物件檢測的內容打包成一個可複用的函式,
說明：對window.XMLHttpRequest的呼叫會返回一個物件或null，
if語句會把呼叫返回的結果看作是true或false
（如果返回物件則為true，返回null則為false）。
如果XMLHttpRequest物件存在，則把 xhr 的值設為該物件的新例項。
如果不存在，就去檢測 ActiveObject 的例項是否存在，
如果答案是肯定的，則把微軟 XMLHTTP 的新例項賦給 xhr
XMLHttpRequest的方法
XMLHttpRequest的屬性
HelloWorld
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
window.onload=function()
{
//1.獲取a節點,並且為其新增onclick響應函式
document.getElementsByTagName("a")[0].onclick=function()
{
//3.建立一個XMLHttpRequest物件
var request =new XMLHttpRequest();
//4.準備傳送請求的資料url,這裡加上時間戳避免瀏覽器快取結果
var url=this.href + "?time="+new Dare();
var method="GET";
//5.呼叫XMLHttpRequest物件的open方法
request.open(method, url);
//6.呼叫XMLHttpRequest物件的send方法
request.send(null);
//7.為XMLHttpRequest物件新增onreadystatechange響應函式
request.onreadystatechange =function()
{
if(request.readyState==4)
{
if(request.status==200 || request.status==304)
{
alert(request.responseText);
}
}
}
//8.判斷響應是否完成:XMLHttpRequest物件的readyState屬性值為4的時候
//9.判斷響應是否可用:XMLHttpRequest物件的status的屬性為200
//10.將響應結果顯示出來
//2.取消a節點的預設行為
return false;
}
}
</script>
</head>
<body>
<a href="HelloWorld.txt">Hello Ajax</a>
</body>
</html>
利用XMLHttpRequest 例項與伺服器進行通訊包含以下3個關鍵部分：
onreadystatechange 事件處理函式
open 方法
send 方法
傳送請求
onreadystatechange:
該事件處理函式由伺服器觸發，而不是使用者
在 Ajax 執行過程中，伺服器會通知客戶端當前的通訊狀態。
這依靠更新 XMLHttpRequest 物件的 readyState 來實現。
改變 readyState 屬性是伺服器對客戶端連線操作的一種方式。
每次 readyState 屬性的改變都會觸發 readystatechange 事件
open(method, url, asynch)
XMLHttpRequest 物件的 open 方法允許程式設計師用一個Ajax呼叫向伺服器傳送請求。
method：請求型別，類似 “GET”或”POST”的字串。
若只想從伺服器檢索一個檔案，而不需要傳送任何資料，
使用GET(可以在GET請求裡通過附加在URL上的查詢字串來傳送資料，
不過資料大小限制為2000個字元)。
若需要向伺服器傳送資料，用POST。
在某些情況下，有些瀏覽器會把多個XMLHttpRequest請求的結果快取在同一個URL。
如果對每個請求的響應不同，就會帶來不好的結果。
在此將時間戳追加到URL的最後，就能確保URL的唯一性，從而避免瀏覽器快取結果。
url：路徑字串，指向你所請求的伺服器上的那個檔案。可以是絕對路徑或相對路徑。
asynch：表示請求是否要非同步傳輸，預設值為true。
指定true，在讀取後面的指令碼之前，不需要等待伺服器的相應。
指定false，當指令碼處理過程經過這點時，會停下來，一直等到Ajax請求執行完畢再繼續執行。
send(data)：
open 方法定義了 Ajax 請求的一些細節。send 方法可為已經待命的請求傳送指令
data：將要傳遞給伺服器的字串。
若選用的是 GET 請求，則不會傳送任何資料， 給 send 方法傳遞 null 即可：request.send(null);
當向send()方法提供引數時，要確保open()中指定的方法是POST，
如果沒有資料作為請求體的一部分傳送，則使用null.
setRequestHeader(header,value)
當瀏覽器向伺服器請求頁面時，它會伴隨這個請求傳送一組首部資訊。
這些首部資訊是一系列描述請求的後設資料(metadata)。
首部資訊用來宣告一個請求是 GET 還是 POST。
Ajax 請求中，傳送首部資訊的工作可以由 setRequestHeader該完成
引數header： 首部的名字; 引數value：首部的值。
如果用 POST 請求向伺服器傳送資料，
需要將 “Content-type” 的首部設定為 “application/x-www-form-urlencoded”.
它會告知伺服器正在傳送資料，並且資料已經符合URL編碼了。
該方法必須在open()之後才能呼叫
接收相應
用 XMLHttpRequest 的方法可向伺服器傳送請求。
在 Ajax 處理過程中，XMLHttpRequest 的如下屬性可被伺服器更改：
readyState
status
responseText
responseXML
readyState
readyState 屬性表示Ajax請求的當前狀態。它的值用數字代表。
0 代表未初始化。 還沒有呼叫 open 方法
1 代表正在載入。 open 方法已被呼叫，但 send 方法還沒有被呼叫
2 代表已載入完畢。send 已被呼叫。請求已經開始
3 代表互動中。伺服器正在傳送響應
4 代表完成。響應傳送完畢
每次 readyState 值的改變，都會觸發 readystatechange 事件。
如果把 onreadystatechange 事件處理函式賦給一個函式，
那麼每次 readyState 值的改變都會引發該函式的執行。
readyState 值的變化會因瀏覽器的不同而有所差異。
但是，當請求結束的時候，每個瀏覽器都會把 readyState 的值統一設為 4
status
伺服器傳送的每一個響應也都帶有首部資訊。
三位數的狀態碼是伺服器傳送的響應中最重要的首部資訊，
並且屬於超文字傳輸協議中的一部分。
常用狀態碼及其含義：
404 沒找到頁面(not found)
403 禁止訪問(forbidden)
500 內部伺服器出錯(internal service error)
200 一切正常(ok)
304 沒有被修改(not modified)
在 XMLHttpRequest 物件中，伺服器傳送的狀態碼都儲存在 status 屬性裡。
通過把這個值和 200 或 304 比較，可以確保伺服器是否已傳送了一個成功的響應
responseText
XMLHttpRequest 的 responseText 屬性包含了從伺服器傳送的資料。
它是一個HTML,XML或普通文字，這取決於伺服器傳送的內容。
當 readyState 屬性值變成 4 時, responseText 屬性才可用，表明 Ajax 請求已經結束。
responseXML
如果伺服器返回的是 XML， 那麼資料將儲存在 responseXML 屬性中。
只用伺服器傳送了帶有正確首部資訊的資料時， responseXML 屬性才是可用的。
MIME 型別必須為 text/xml
responseXML
如果伺服器返回的是 XML， 那麼資料將儲存在 responseXML 屬性中。
只用伺服器傳送了帶有正確首部資訊的資料時， responseXML 屬性才是可用的。
MIME 型別必須為 text/xml
資料格式
從伺服器端接收資料的時候，那些資料必須以瀏覽器能夠理解的格式來傳送。
伺服器端的程式語言只能以如下 3 種格式返回資料：
XML
JSON
HTML
一個一個看
HTML
HTML 由一些普通文字組成。如果伺服器通過 XMLHttpRequest
傳送 HTML， 文字將儲存在 responseText 屬性中。
不必從 responseText 屬性中讀取資料。它已經是希望的格式，可以直接將它插入到頁面中。
插入 HTML 程式碼最簡單的方法是更新這個元素的 innerHTML 屬性。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>People at Clearleft</title>
<style type="text/css">
@import url("clearleft.css");
</style>
<script type="text/javascript">
window.onload=function()
{
var aNodes=document.getElementsByTagName("a");
for(var i=0;i<aNodes.length;i++)
{
aNodes[i].onclick= function()
{
var request=new XMLHttpRequest();
var method="GET";
var url=this.href;
request.open(method, url);
request.send(null);
request.onreadystatechange =function()
{
if(request.readyState==4)
{
if(request.status==200 ||request.status==304)
{
document.getElementById("details").innerHTML=request.responseText;
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li>
<a href="files/andy.html">Andy</a>
</li>
<li>
<a href="files/richard.html">Richard</a>
</li>
<li>
<a href="files/jeremy.html">Jeremy</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>
XML
優點：
XML 是一種通用的資料格式。
不必把資料強加到已定義好的格式中，而是要為資料自定義合適的標記。
利用 DOM 可以完全掌控文件。
缺點：
如果文件來自於伺服器，就必須得保證文件含有正確的首部資訊。
若文件型別不正確，那麼 responseXML 的值將是空的。
當瀏覽器接收到長的 XML 檔案後， DOM 解析可能會很複雜
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>People at Clearleft</title>
<style type="text/css">
@import url("clearleft.css");
</style>
<script type="text/javascript">
window.onload=function()
{
var aNodes=document.getElementsByTagName("a");
for(var i=0;i<aNodes.length;i++)
{
aNodes[i].onclick= function()
{
var request=new XMLHttpRequest();
var method="GET";
var url=this.href;
request.open(method, url);
request.send(null);
request.onreadystatechange =function()
{
if(request.readyState==4)
{
if(request.status==200 ||request.status==304)
{
var result =request.responseXML;
var name=result.getElementsByTagName("name")[0].firstChild.nodeValue;
var website=result.getElementsByTagName("website")[0].firstChild.nodeValue;
var email=result.getElementsByTagName("email")[0].firstChild.nodeValue;
var anode=document.createElement("a");
anode.appendChild(document.createTextNode(name));
anode.href="mailto:"+email;
var h2=document.createElement("h2");
h2.appendChild(anode);
var anode2=document.createElement("a");
anode2.appendChild(document.createTextNode(website));
anode2.href=website;
var detailnode=document.getElementById("details");
detailnode.innerHTML="";
detailnode.appendChild(h2);
detailnode.appendChild(anode2);
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li>
<a href="files/andy.xml">Andy</a>
</li>
<li>
<a href="files/richard.xml">Richard</a>
</li>
<li>
<a href="files/jeremy.xml">Jeremy</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>
JSON
JSON（JavaScript Object Notation）一種簡單的資料格式，比xml更輕巧。
JSON是JavaScript原生格式，
這意味著在JavaScript中處理JSON資料不需要任何特殊的API或工具包。
JSON的規則很簡單：物件是一個無序的“‘名稱/值’對”集合。
一個物件以“{”（左括號）開始，“}”（右括號）結束。
每個“名稱”後跟一個“:”（冒號）；“‘名稱/值’對”之間使用“,”（逗號）分隔。
JSON 用冒號(而不是等號)來賦值。每一條賦值語句用逗號分開。
整個物件用大括號封裝起來。可用大括號分級巢狀資料。
物件描述中儲存的資料可以是字串，數字或者布林值。
物件描述也可儲存函式，那就是物件的方法。
解析 JSON
JSON 只是一種文字字串。它被儲存在 responseText 屬性中
為了讀取儲存在 responseText 屬性中的 JSON 資料，
需要根據 JavaScript 的 eval 語句。
函式 eval 會把一個字串當作它的引數。
然後這個字串會被當作 JavaScript 程式碼來執行。
因為 JSON 的字串就是由 JavaScript 程式碼構成的，所以它本身是可執行的
例如
var json=eval("("+jsonResponse+")");
JSON提供了json.js包，下載http://www.json.org/json.js後，
使用parseJSON()方法將字串解析成 JS 物件
例如
var json=jsonResponse.parseJSON();
優點：
作為一種資料傳輸格式，JSON 與 XML 很相似，但是它更加靈巧。
JSON 不需要從伺服器端傳送含有特定內容型別的首部資訊。
缺點：
語法過於嚴謹
程式碼不易讀
eval 函式存在風險
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> <head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>People at Clearleft</title>
<style type="text/css">
@import url("clearleft.css");
</style>
<script type="text/javascript">
window.onload=function()
{
var aNodes=document.getElementsByTagName("a");
for(var i=0;i<aNodes.length;i++)
{
aNodes[i].onclick= function()
{
var request=new XMLHttpRequest();
var method="GET";
var url=this.href;
request.open(method, url);
request.send(null);
request.onreadystatechange =function()
{
if(request.readyState==4)
{
if(request.status==200 ||request.status==304)
{
var result =request.responseText;
var object=eval("("+result+")");
var name=object.person.name;
var website=object.person.website;
var email=object.person.email;
var anode=document.createElement("a");
anode.appendChild(document.createTextNode(name));
anode.href="mailto:"+email;
var h2=document.createElement("h2");
h2.appendChild(anode);
var anode2=document.createElement("a");
anode2.appendChild(document.createTextNode(website));
anode2.href=website;
var detailnode=document.getElementById("details");
detailnode.innerHTML="";
detailnode.appendChild(h2);
detailnode.appendChild(anode2);
}
}
}
return false;
}
}
}
</script>
</head>
<body>
<h1>People</h1>
<ul>
<li>
<a href="files/andy.js">Andy</a>
</li>
<li>
<a href="files/richard.js">Richard</a>
</li>
<li>
<a href="files/jeremy.js">Jeremy</a>
</li>
</ul>
<div id="details"></div>
</body>
</html>
相關文章
- ajax建立XMLHttpRequest物件XMLHTTP物件
- AJAX 建立 XMLHttpRequest物件XMLHTTP物件
- XMLHttpRequest responseText屬性XMLHTTP
- XMLHttpRequest withCredentials 屬性XMLHTTP
- XMLHttpRequest timeout 屬性XMLHTTP
- XMLHttpRequest responseText 屬性XMLHTTP
- 根據JavaScript中原生的XMLHttpRequest實現jQuery的AjaxJavaScriptXMLHTTPjQuery
- JavaScript物件的資料屬性與訪問器屬性JavaScript物件
- 為XHR物件所有方法和屬性提供鉤子 全域性攔截AJAX物件
- 深入理解物件的資料屬性與訪問器屬性物件
- 如何將資料庫中json格式的列值對映到java物件的屬性中資料庫JSONJava物件
- JavaScript訪問物件的屬性和方法JavaScript物件
- jQuery事件物件event的屬性和方法jQuery事件物件
- 理解Python中的類物件、例項物件、屬性、方法Python物件
- 使用joinjs繪製流程圖（二）-Paper物件的屬性和方法JS流程圖物件
- 在分頁物件資料上追加屬性物件
- 自定義元件-資料、方法、屬性元件
- HTML DOM之document物件的屬性和方法HTML物件
- js訪問物件屬性的2個方法JS物件
- 一、訪問物件屬性和方法的操作物件
- 使用原生 cookieStore 方法，讓 Cookie 操作更簡單Cookie
- XMLHttpRequest 物件概述XMLHTTP物件
- ajax屬性 data--------------20160705
- Object物件的屬性Object物件
- GObject的物件屬性GoObject物件
- JavaScript內建物件屬性及方法大全JavaScript物件
- PHP + Laravel 的簡單應用教程 — ajax 的使用PHPLaravel
- 理解 JavaScript 物件的屬性JavaScript物件
- JSON格式資料屬性必須用雙引號包裹JSON
- line-height與vertical-align：簡單的屬性不簡單
- js物件屬性JS物件
- 基於json資料格式實現的簡單資料庫——jsonDBJSON資料庫
- 19 ##### 屬性方法案例-資料分頁
- day10_物件導向（屬性丶方法）①物件
- Ajax 提交表單資料
- 萬億級資料的方法，簡單易懂！
- 資料複雜性和簡單
- 019、Vue3+TypeScript基礎，使用watch監視物件資料時，如何監控整個物件或單獨監控物件某個屬性VueTypeScript物件