首先,在認識Ajax之前,我們來了解一下同步和異步
在Ajax沒被發現之前:有一個很長很多信息要填的表單,有姓名,編號,工作內容,聯繫方式,地址,郵箱等等,當你填完後,點擊提交,等待了好幾分鐘,它給你返回一個郵箱重複了,你把郵箱改好了之後,再提交,又等了好幾分鐘,它給你返回聯繫方式格式錯誤。—–這就是同步請求:每按一次提交,客戶端就發送一次請求(內含你填的信息)給服務器,服務器就返回信息給客戶端, 同樣是上面的例子,當Ajax出現之後,你填寫郵箱的時候,如果重複了,它會提示:郵箱重複,而不用刷新整個頁面,這就是異步請求:我們需要改變某一塊的內容而不影響其他內容,可以對網頁局部的信息進行刷新。
接着,Ajax是什麼?
AJAX = Asynchronous JavaScript and XML(異步的 JavaScript 和 XML)。
AJAX 不是新的編程語言,而是一種使用現有標準的新方法。
AJAX 是與服務器交換數據並更新部分網頁的藝術,在不重新加載整個頁面的情況下。
我們怎樣學習Ajax?
發送Ajax請求需要的技術不多:HTML+CSS把頁面做好,利用JS就可以很好地學習Ajax。下面由我們來看看Ajax請求的步驟。
①建立一個Ajax對象
var xmlhttp=new XmlHttpRequest();
②發送請求
xmlhttp.open(method,url,async);其中method是請求方法,分爲Get和Post兩種。url是接收請求頁面的地址,async:true表示異步,false表示同步,默認是true。
然後,GET方法:xmlhttp.send();
POST方法:
xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);xmlhttp.send(param);其中param是要傳遞的參數。POST方法是要設置HTTP請求頭的。
③接收響應
xmlhttp.responseText :返回的是String類型,而我們通常是利用JSON來接收的。
④我們怎樣判斷請求發送成功呢?
readyState:存有 XMLHttpRequest 的狀態。從 0 到 4 發生變化。
0: 請求未初始化
1: 服務器連接已建立
2: 請求已接收
3: 請求處理中
4: 請求已完成,且響應已就緒
當請求被髮送到服務器時,我們需要執行一些基於響應的任務。
每當 readyState 改變時,就會觸發 onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態信息。
通常我們是這樣判斷的:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//code....
}
}
下面我們來看看一個簡單的實例
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function load()
{
var xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET","test.txt",true);
xmlhttp.send();
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
}
</script>
<title>Ajax例子</title>
</head>
<body>
<div id="myDiv"><h2>使用 AJAX 獲取內容</h2></div>
<button type="button" onclick="load()">獲取文檔裏的內容</button>
</body>
</html>
同目錄下的test.txt文件
歡迎來到羅堅元的博客。
其實Ajax並沒有那麼難,上手也是很簡單的,但是它還是有很多新鮮的信息需要我們去學習的。上面的只是JS原生的ajax請求代碼,而在開發中我們經常利用JS框架來幫助我們更好的寫Ajax請求,關於Jquery框架Ajax請求的文章請繼續瀏覽我的博客。
更多精彩內容等待你的瀏覽—By:羅堅元博客