本文主要和大家分享js實現Ajax的實例代碼，希望能幫助到大家。
實現Ajax的核心步驟：
1.定義對象；
2.打開鏈接；
3.發送數據；
4.處理響應狀態；
5.進行DOM渲
1.為什么要定義對象？
XMLHttpRequest對象是Ajax的基礎，它的作用是：被使用在后臺中，實現客戶端與服務器之間的數據交換。
所以：
"
var xhr;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Micorsoft.XMLHTTP');
//在IE5和IE6中只有 ActiveXObject('Micorsoft.XMLHTTP') 能夠實現數據交互
}
"
"
<body>
<ul id="showCon">
</ul>
<script type="text/javascript">
var oU = document.getElementById("showCon");
//1.創建對象
var xhr;
//做兼容
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{ //IE5 IE6
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
//
console.log(xhr.readyState);//0
//2.打開連接
xhr.open("GET","http://datainfo.duapp.com/shopdata/getclass.php");
//
console.log(xhr.readyState);//1
//3.發送請求（數據）
xhr.send();
//4.獲取到數據，渲染頁面
xhr.onreadystatechange = function(){
//
console.log(xhr.readyState);
if(xhr.readyState == 4 && xhr.status == 200){
//
console.log(xhr.responseText);
var t = xhr.responseText;
//get方法獲取的是:字符串.我們需要將其轉換成JSON數據進行操作
var data1 = JSON.parse(t);
//字符串====>json數據!!!!!!!!!!
//json====>字符串
JSON.stringify(data1)
for(var i = 0;i < data1.length;i++){ //因為這里獲得的是一個數組，所以首選的是for循環
var oLi = document.createElement("li");
oLi.textContent = data1[i].className;
//每一個對象下面的className值====>創建的每一個li元素
oU.appendChild(oLi);
}
//
注意點:
//
1.字符串===>json
//
2.獲取每一個對象里的className的值
//
|--第一步:想到利用for循環得到data1中的每一個元素
//
|--第二步:因為ul中,沒有li元素,所以需要進行DOM元素創建;(其實這里可以直接想到:既然創建,必定要進行"添加")
//
|--第三步:把轉換之后的 對象[i].className ====> 對應創建的li
//
|--第四步:把賦過值得li追加到ul中
}
}
</script>
</body>
"相關推薦：
Javascript實現Ajax異步請求實例詳解
原生Javascript實現Ajax異步請求
jQuery實現Ajax 驗證用戶名唯一性
以上就是js實現Ajax的實例代碼的詳細內容，更多請關注php中文網其它相關文章！