小編給大家分享一下不使用XMLHttpRequest對(duì)象如何實(shí)現(xiàn)Ajax效果，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

創(chuàng)新互聯(lián)專注于開福企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),商城建設(shè)。開福網(wǎng)站建設(shè)公司,為開福等地區(qū)提供建站服務(wù)。全流程按需設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

本文實(shí)例講述了不使用XMLHttpRequest對(duì)象實(shí)現(xiàn)Ajax效果的方法。分享給大家供大家參考，具體如下：

前言：

我以前接觸Ajax的時(shí)候，只是用Jquery的api來(lái)實(shí)現(xiàn)Ajax效果，對(duì)其并沒有細(xì)細(xì)研究，最近在學(xué)習(xí)Ajax的原理，會(huì)不定時(shí)的發(fā)布關(guān)于Ajax的文章，希望大家關(guān)注！

Ajax原理：

在頁(yè)面不刷新的情況下，利用XMLHttpRequest發(fā)送HTTP請(qǐng)求。

主題：

但是不依靠XMLHttpRequest對(duì)象，也是可以實(shí)現(xiàn)Ajax效果的，我們可以用Js實(shí)現(xiàn)對(duì)后臺(tái)服務(wù)器的請(qǐng)求，同時(shí)不帶來(lái)頁(yè)面的刷新或跳轉(zhuǎn)。我總結(jié)了幾種方法，會(huì)有實(shí)例來(lái)說(shuō)明如何使用的。

方法：

（1）利用204 No Content狀態(tài)碼，當(dāng)瀏覽器收到204時(shí)，頁(yè)面不作跳轉(zhuǎn)
（2）利用圖片加載的特性來(lái)完成請(qǐng)求
（3）利用iframe的特性

1、利用204狀態(tài)碼

原理：

當(dāng)服務(wù)器發(fā)送響應(yīng)狀態(tài)碼204時(shí)，表示沒有內(nèi)容，如果是瀏覽器的話，頁(yè)面不會(huì)發(fā)生改變

案例：

無(wú)刷新投票程序，在一個(gè)頁(yè)面點(diǎn)擊投票按鈕，會(huì)請(qǐng)求服務(wù)器向一個(gè)文本文件中新增一票，但是頁(yè)面不發(fā)生改變。

文件結(jié)構(gòu)圖：

01-vote.html文件：

主要就是一個(gè)表單，一個(gè)按鈕，按鈕的鏈接為要請(qǐng)求的鏈接

  
  
  
  


  
無(wú)刷新投票界面
  
  

    投票
  

01-vote.php文件：

模擬投票效果，讀取文本文件中的內(nèi)容，給文本文件中的數(shù)字加1，然后重新寫回文件

效果圖：

2、利用圖片加載的特性來(lái)完成http請(qǐng)求

原理：

當(dāng)我們點(diǎn)擊鏈接時(shí)，可以利用JS代碼來(lái)動(dòng)態(tài)設(shè)置某張圖片的src屬性為要請(qǐng)求的鏈接，這樣瀏覽器就會(huì)去請(qǐng)求該鏈接，而頁(yè)面也不會(huì)跳轉(zhuǎn)。

案例：

還是以上文中提到的投票程序?yàn)槔?/p>

文檔結(jié)構(gòu)圖：

02-vote.html文件：

首先給a標(biāo)簽設(shè)置一個(gè)單擊事件，然后利用JS創(chuàng)建一個(gè)圖片節(jié)點(diǎn)，設(shè)置其節(jié)點(diǎn)的src屬性為要請(qǐng)求的鏈接

  
  
  
  



  
無(wú)刷新投票界面
  
  

    投票
  

02-vote.php文件：

這個(gè)文件和01-vote.php的區(qū)別就是不再設(shè)置返回的狀態(tài)碼。

效果圖：

和1方法中的效果圖一樣，此處不再給出

3、利用iframe的特性

原理：

iframe元素會(huì)創(chuàng)建包含另外一個(gè)文檔的內(nèi)聯(lián)框架，什么意思？就是當(dāng)前瀏覽器訪問的頁(yè)面中會(huì)包含里一個(gè)頁(yè)面。當(dāng)我們要請(qǐng)求服務(wù)器的時(shí)候，可以讓這個(gè)內(nèi)部頁(yè)面去請(qǐng)求服務(wù)器，而主界面不會(huì)發(fā)生跳轉(zhuǎn)和刷新現(xiàn)象。

案例：

以用戶注冊(cè)為例

文件結(jié)構(gòu)圖：

01-reg.html文件：

主要是一個(gè)表單和一個(gè)iframe標(biāo)簽，并且設(shè)置了iframe標(biāo)簽為不可見：width="0" height="0" frameborder="0"

  
  
  
  


  
無(wú)刷新用戶注冊(cè)界面
  
  

  
    用戶名：

    郵箱：

    
  
  
  

01-reg.php文件：

接受Post數(shù)據(jù)，判斷是否有一個(gè)為空，如果有則在主界面顯示“信息不完整‘'，否則顯示“注冊(cè)成功”，由于是例子的原因，我這里就簡(jiǎn)單的進(jìn)行了寫判斷。

parent.document.getElementById("regres").innerHTML="信息不完整"';//在主界面輸出"信息不完整"
  exit;
}
echo '';//在主界面輸出"注冊(cè)成功"
?>

效果圖：

以上是“不使用XMLHttpRequest對(duì)象如何實(shí)現(xiàn)Ajax效果”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！