這次帶給大家JS實作Ajax方法詳解，JS實作Ajax方法的注意事項有哪些，以下就是實戰案例，一起來看一下。
一、什麼是Ajax
不刷新的情況下讀取資料或提交資料
#（最早出現ajax：Google地圖，拖曳一下出現一片新的視野）
應用程式：用戶註冊、線上聊天、微博
特性：只能從伺服器上去讀取資料（所以我們需要設定自己的伺服器程式AMP）
二、使用Ajax
#1.基礎：請求並顯示靜態TXT檔案
btn.onclick=function(){
ajax('abc.txt',function(str){
alert(str);
});
}①Ajax裡面檔案的編碼要和頁面的編碼一致
②快取、阻止快取（好處大於缺點，所以不能什麼時候都清緩存）
快取能幫助我們加速網路訪問，所謂緩存，就是伺服器上這個文件，它只讀一次，第二次就從你的硬碟、快取裡直接去拿，而不是真的透過網路來請求
#有時候我們需要阻止快取（例如伺服器上東西變化了，但客戶端請求來的還是原來的東西），辦法如下，加時間戳：
ajax('abc.txt?t='+new Date().getTime(),function(str){});
//new Date().getTime()为现在的毫秒数，用户绝对不可能在1毫秒内点两次，所以每次请求的t都不一样2.動態資料：請求Js（或json）檔案
Ajax從伺服器上讀取的所有東西都是以文字的形式（字串）存在的，如何轉換？
eval（）計算字串裡的值
ajax('abc.txt',function(str){
var arr=eval(str);
alert(arr);
});範例：分頁
<ul id="list"> </ul> <a href="#"></a> <a href="#"></a> <a href="#"></a>
window.onload=function(){
var oUl=getElementById("list");
var aBtn=getElementsByTagName("a");
var i;
for(i=0;i<aBtn.length;i++){
aBtn[i].index=i;
aBtn[i].onclick=function(){
ajax('page'+(this.index+1)+'.txt',function(str){
var aData=eval(str);
oUl.innerHTML='';
for(i=0;i<aData.length:i++){
var oLi=document.createElement("li");
oLi.innerHTML='<strong>'+aData[i].user+'</strong><i>'+aData[i].pass+'</i>';
oUl.appendChild(oLi);
}
});
};
}
};三、Ajax原理
1.GET--用於取得資料（如瀏覽貼子） 把資料放在URL（網址）裡面來提交 安全性低、容量低、方便分享（將網址發給別人）
2.POST--用於上傳資料（如使用者註冊） 把資料放在不是URL的地方 安全性普通、容量幾乎無限、不方便分享
#四、封裝一個自己的Ajax函數
1.建立Ajax
2.連線伺服器
3.發送請求
4.接收返回
function ajax(url,fnSucc,fnFaild){
//1.创建
var oAjax=null;
if(window.XMLHttpRequest){ //对ie6来说，直接用XMLHttpRequest是不存在的会出错
oAjax=new XMLHttpRequest(); //ie6以上
}else{
oAjax=new ActiveXObject("Microsoft.XMLHTTP"); //ie6
}
//2.连接服务器，open(方法，url，是否异步)
oAjax.open('GET'，url，true);
//3.发送请求
oAjax.send();
//4.接收返回 OnReadyStateChange
oAjax.onreadystatechange=function(){ //onreadystatechange事件
if(oAjax.readyState==4){ //readyState属性：请求状态 4是完成（完成不代表成功）
if(oAjax.status==200){ //status属性：请求结果 200代表成功
fnSucc(oAjax.responseText); //responseText属性：服务器发回给我们的内容
}
else{
if(fnFaild){
fnFaild();
}
}
}
};
};相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！
推薦閱讀：
以上是JS實作Ajax方法詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！
