原生jsAjax操作過程：
頭部代碼：
<body>
<!--展示商品類型的列表-->
<ul id="classType"></ul>
</body><script>
var _ct=document.getElementById("classType");
// 第一步 創建對象
var _http;
if(window.XMLHttpRequest){
_http=new XMLHttpRequest();
}else{
_http=new ActiveXObject("Microsoft.XMLHTTP");
}
// 第二步 打開接口的鏈接 併發送請求
_http.open("get","http://datainfo.duapp.com/shopdata/getclass.php");
_http.send();
// _http.setRequestHeader("Content-type")
// 第三步 獲取數據 DOM渲染到頁面上
/*onreadystatechange 異步對象*/
_http.onreadystatechange=function (){
if(_http.readyState==4 && _http.status==200){
var _content=_http.responseText; //接受數據
console.log(_content);
var _jsonArr=JSON.parse(_content); //將字符串轉化爲json對象
console.log(_jsonArr); //一個數組
for(var i=0;i<_jsonArr.length;i++){
var _li=document.createElement("li");
_li.textContent=_jsonArr[i].className;
_ct.appendChild(_li);
}
}
}
</script> 操作步驟：
1. 創建異步對象
2. 打開和服務器的連接，發送請求
3. 獲取數據，DOM操作進行渲染
總結：
通過核心的異步對象XMLHttpRequest發送異步請求
從服務器請求數據並通過DOM操作進行數據處理
大家在寫大項目的時候，可以運用一下，一些圖片或價格都有可以用Ajax，上面的接口地址可以自己在網頁裏找，一般是找公司後端要。