1. 程式人生 > >Ajax基礎知識一。

Ajax基礎知識一。

說明 true 數據文件 window change res get 字符串 ref

了解Ajax對他的的基本內容進行一個悠閑的了解。

之前一直對Ajax不了解,在大學中也沒有好好地學習一番,一直沒有運用到實踐中。現在學習基本的知識,填補一下那片海中的Ajax概念。

以下為整理總結的內容。

1.Ajax向服務器發送請求:
使用XMLHttpRequest 對象的open()和send()方法;
open(method,url,async),method:表示請求的類型有GET和POST

url:文件在服務器上的位置。async:true(異步)或者false(同步)

send(String):將請求發送到服務器,string僅用於POST請求
2.Ajax創建對象XMLHTTPRequest
var xmlhttp;
if(windows.XMLHttpRequest){
//適應瀏覽器:IE7+,firefox,chrome,Opera,Safari
xmlhttp = new XMLHttpRequest();
}else{
xmlhttp = new ActiveXobject("Microsoft.xmlHTTP");
//適應瀏覽器IE6,IE5
}
3.Ajax獲取服務器響應
responseText:獲得字符串形式的響應數據

function loadXMLDoc()
{
var xmlhttp;
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
//Ajax創建的對象xmlhttp獲取的是字符型數據responseText;
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/ajax/test1.txt",true);//獲取數據異步
xmlhttp.send();//將s上述open的get請求,文件位置,異步發送到服務器。
}

responseXML,獲取XMl形式的響應數據:
4.AJAX - onreadystatechange事件
XMLHttpRequest對象具有的三個重要屬性:
onreadystatechange:存儲函數,每當readyState屬相變化時候,就會調用帶函數
readyState:描述XMLHttprequest的狀態0:請求初始化,1:服務器建立連接,2:請求以接收,3:請求處理中,4:請求已完成,且響應已就緒
status:200 表示ok,

當 readyState 等於 4 且狀態為 200 時,表示響應已就緒:

xmlhttp.onreadystatechange = function(){
if(xmlhttp.readyState==4 && xmlhttp.status == 200){
document.getElementById("myDiv").innerHTML = xmlhttp.responseText;//獲取id = ‘myDiv’的dom,發送responseText的請求類型
}
}

當存在多個Ajax任務時候買簡歷標準函數來調用它。

var xmlhttp;//首先定義Ajax對象。
// 這裏是ajaxde 數據請求響應函數
function loadXMLDoc(url,cfunc)
{
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=cfunc;
xmlhttp.open("GET",url,true);
xmlhttp.send();//發送請求
}
//簡歷標磚函數,調用Ajax請求,點擊“myFunction”
function Myfunction(){
loadXMLDOC(“/ajax/test.txt”,function(){ //調用Ajax請求,包含數據文件位置和所需要處理的任務
//設置Ajax請求狀態
if(xmlhttp.readyState ==4 && xmlhttp == 200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;//說明是myDiv的DOM發送的Ajax字符請求
}
}
)

}

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="myFunction()">通過 AJAX 改變內容</button>

Ajax基礎知識一。