本文實例分析了JS實現Ajax的方法。分享給大家供大家參考，具體如下：
一、什么是Ajax
不刷新的情況下讀取數據或提交數據
（最早出現ajax：谷歌地圖，拖動一下出現一片新的視野）
應用：用戶注冊、在線聊天、微博
特性：只能從服務器上去讀取數據（所以我們需要配置自己的服務器程序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原理
HTTP請求方法
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(); } } } };};更多關于JavaScript相關內容感興趣的讀者可查看本站專題：《JavaScript中ajax操作技巧總結》、《JavaScript切換特效與技巧總結》、《JavaScript查找算法技巧總結》、《JavaScript動畫特效與技巧匯總》、《JavaScript錯誤與調試技巧總結》、《JavaScript數據結構與算法技巧總結》、《JavaScript遍歷算法與技巧總結》及《JavaScript數學運算用法總結》
希望本文所述對大家JavaScript程序設計有所幫助。
新聞熱點
疑難解答
