不使用XMLHttpRequest對象實現Ajax效果的方法小結

2024-09-01 08:26:43

字體：大中小

來源：轉載

供稿：網友

本文實例講述了不使用XMLHttpRequest對象實現Ajax效果的方法。，具體如下：

前言：

我以前接觸Ajax的時候，只是用Jquery的api來實現Ajax效果，對其并沒有細細研究，最近在學習Ajax的原理，會不定時的發布關于Ajax的文章，希望大家關注！

Ajax原理：

在頁面不刷新的情況下，利用XMLHttpRequest發送HTTP請求。

主題：

但是不依靠XMLHttpRequest對象，也是可以實現Ajax效果的，我們可以用Js實現對后臺服務器的請求，同時不帶來頁面的刷新或跳轉。我總結了幾種方法，會有實例來說明如何使用的。

方法：

（1）利用204 No Content狀態碼，當瀏覽器收到204時，頁面不作跳轉
（2）利用圖片加載的特性來完成請求
（3）利用iframe的特性

1、利用204狀態碼

原理：

當服務器發送響應狀態碼204時，表示沒有內容，如果是瀏覽器的話，頁面不會發生改變

案例：

無刷新投票程序，在一個頁面點擊投票按鈕，會請求服務器向一個文本文件中新增一票，但是頁面不發生改變。

文件結構圖：

這里寫圖片描述

01-vote.html文件：

主要就是一個表單，一個按鈕，按鈕的鏈接為要請求的鏈接

<!DOCTYPE html><html><head>  <meta charset="utf-8">  <meta http-equiv="X-UA-Compatible" content="IE=edge">  <title>無刷新投票界面</title>  <link rel="stylesheet" href=""></head><body>  <h1>無刷新投票界面</h1>  <img src="./lin.jpg"/>  <p>    <a href="./01-vote.php" rel="external nofollow" >投票</a>  </p></body></html>

01-vote.php文件：

模擬投票效果，讀取文本文件中的內容，給文本文件中的數字加1，然后重新寫回文件

<?php/** * 投票程序 * @author webbc */$number = file_get_contents('./01-vote-res.txt');//讀取文件內容$number++;//加1file_put_contents('./01-vote-res.txt',$number);//重寫到文件中//服務器發送響應頭204，前端不會響應，使前端達到ajax效果header('HTTP/1.1 204 No Content');?>

效果圖：

這里寫圖片描述