ajax入門教程之30分鐘實例演示-js教程-PHP中文網

首頁

web前端

js教程

ajax入門教程之30分鐘實例演示

云罗郡主

Jan 25, 2019 pm 01:15 PM

在所有的教學中，不管是網路上的資料還是書籍上。都說，想要學會ajax，需要提前學會html css javascript就行了，然後很多前端初學者們就開始學，結果發現照著例子寫了半天愣是沒啥反應，最終果斷放棄~【推薦教程：AJAX影片教學】

其實…你們沒有搭建後台環境啊，親~

1.先搭建一個後台環境吧？例如php

對於我們~前端的初學者來說，哪有這麼多精力時間去精學PHP啊，對吧？所以呢，推薦一個php環境搭建：phpstudy，只要下一步下一步的安裝就OK了。

我將PHPStudy安裝到了D盤，所以進入D盤找到phpstudy資料夾裡面的WWW資料夾

WWW資料夾就相當於我們電腦上的伺服器了，以後寫的所有東西，全部放到WWW資料夾。

在我們的WWW資料夾下面建立兩個文件，index.html和handle.php

#讓我們測試一下，在剛才新建的index.html中隨便寫點程式碼。打開瀏覽器，輸入localhost敲擊回車，如果能打開剛才寫的網頁，那麼就說明我們搭建成功

如果失敗，可能是端口衝突，也有可能是phpstudy木有運行~自己查一查調試一下

2.讓我們用PHP寫一個簡單的後台應用吧~

index.html
<body>
<form action="index.html" method="GET">
    <label for="name">姓名</label>
    <input type="text" id="name" name="name">
    <input type="submit" value="提交">
</form> 
</body>

不知道你們表單學的嘮樣，所以嘮叨兩句話：GET代表我們要使用的傳輸方式，對應的還有POST；

input標籤當中的id對應的是label標籤當中的for屬性；

input標籤當中的name屬性，一會要對接PHP使用;

handle.php

<meta charset="utf-8">
<!--其实我的这个写法有点取巧了,先凑合着看-->
<?php 
$student=array(
    array("name"=>"张三","sex"=>"男","age"=>"20"),
    array("name"=>"李丽","sex"=>"女","age"=>"19"),
    array("name"=>"王二","sex"=>"男","age"=>"21")
    );
$str="没有找到这个学生";
$name=$_GET["name"];
foreach ($student as $value) {
    if($value["name"]==$name){
        $str=$value["name"].",".$value["index"].",".$value["sex"].",".$value["age"];
        break;
    };
};
echo $str;
 ?>

3.換成Ajax的寫法！

index.html

html:

<h1 id="请输入姓名">请输入姓名：</h1>
<input type="text" id="name">
<button onclick="submit()">提交</button>
<div id="text"></div>

javascript:

function submit(){
        
        var name=document.getElementById(&#39;name&#39;).value
               var text=document.getElementById(&#39;text&#39;)
        var XHR=new XMLHttpRequest();
               XHR.open("GET","handle.php?name="+name);
               XHRsend();
               XHR.onreadystatechange=function(){
            text.innerHTML=XHR.responseText
        }

注意：

如果有人把原始碼中的 text. innerHTML=XHR.responseText 改成了 alert(XHR.responseTXT),你將會發現，指令將會被執行多次。這時候，就要稍微的改一下程式碼了：(原因，在文章後面你會找到)

   ......
    XHR.onreadystatechange=function(){
             if(XHR.readyState==4){alert(XHR.responseText)};
                                     }
   ......

4.例子已經成功了，那我們就正式進入學習吧~

# ajax的優勢

在我們的第一個例子當中，是透過submit按鈕提交到php後台，然後再進行資料的處理操作。

這種操作呢，有一個弊端，就是需要把一整頁的資料同時提交到後台。

舉個栗子

如果我們在一個網站進行註冊，填寫完了暱稱，密碼，性別，年齡等信息，提交過去之後，後台告訴你暱稱已被使用，OK我們將暱稱，密碼，性別，年齡等，通通重寫，等再次提交過去，又告訴你暱稱依然已被使用。這時候你取了一個非常非常LOW的名字，心想，這回不會再出問題了吧？結果提交過去之後，後台告訴你，你的密碼過短需再次重新填寫資訊。恩~放棄了吧！

如果使用ajax技術呢？我們可以將資料逐條的提交到後台，也可以隨時隨地的提交。比如說，你填寫完暱稱，後台立刻告訴你暱稱被用，OK，改了就是嘍~。

AJAX的使用

1.建立AJAX

  var XHR=new XMLHttpRequest();

2.向伺服器發送請求

XHR.open("GET","handle.php",true);
XHR.send();

open裡面有三個參數，分別為資料傳輸方式，傳輸文件，是否非同步

當我們的傳輸方式為POST的時候，就會用上send(),如果是GET方式，推薦在send裡面寫上參數null

3 .GET vs POST

一句話：get更快，post更強

4.伺服器回應－你把值傳過去了，咋也得傳回來點什麼吧？

ajax入門教程之30分鐘實例演示

XHR.responseText;
XHR.responseXML;

5.回應事件－什麼時候才能回傳資料嘞？

onreadystatechange 事件
两个属性：
readyState
status

每当 readyState 改变时，就会触发 onreadystatechange 事件。
readyState 属性存有 XMLHttpRequest 的状态信息。

XHR.onreadystatechange=function(){
                console.log(XHR.readyState)
                console.log(XHR.responseText)

ajax入門教程之30分鐘實例演示

以上是ajax入門教程之30分鐘實例演示的詳細內容。更多資訊請關注PHP中文網其他相關文章！

陳述

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

超越瀏覽器：現實世界中的JavaScriptApr 12, 2025 am 12:06 AM

JavaScript在現實世界中的應用包括服務器端編程、移動應用開發和物聯網控制：1.通過Node.js實現服務器端編程，適用於高並發請求處理。 2.通過ReactNative進行移動應用開發，支持跨平台部署。 3.通過Johnny-Five庫用於物聯網設備控制，適用於硬件交互。

使用Next.js（後端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:23 AM

我使用您的日常技術工具構建了功能性的多租戶SaaS應用程序（一個Edtech應用程序），您可以做同樣的事情。首先，什麼是多租戶SaaS應用程序？多租戶SaaS應用程序可讓您從唱歌中為多個客戶提供服務

如何使用Next.js（前端集成）構建多租戶SaaS應用程序Apr 11, 2025 am 08:22 AM

本文展示了與許可證確保的後端的前端集成，並使用Next.js構建功能性Edtech SaaS應用程序。前端獲取用戶權限以控制UI的可見性並確保API要求遵守角色庫

JavaScript：探索網絡語言的多功能性Apr 11, 2025 am 12:01 AM

JavaScript是現代Web開發的核心語言，因其多樣性和靈活性而廣泛應用。 1)前端開發：通過DOM操作和現代框架（如React、Vue.js、Angular）構建動態網頁和單頁面應用。 2)服務器端開發：Node.js利用非阻塞I/O模型處理高並發和實時應用。 3)移動和桌面應用開發：通過ReactNative和Electron實現跨平台開發，提高開發效率。

JavaScript的演變：當前的趨勢和未來前景Apr 10, 2025 am 09:33 AM

JavaScript的最新趨勢包括TypeScript的崛起、現代框架和庫的流行以及WebAssembly的應用。未來前景涵蓋更強大的類型系統、服務器端JavaScript的發展、人工智能和機器學習的擴展以及物聯網和邊緣計算的潛力。

神秘的JavaScript：它的作用以及為什麼重要Apr 09, 2025 am 12:07 AM

JavaScript是現代Web開發的基石，它的主要功能包括事件驅動編程、動態內容生成和異步編程。 1)事件驅動編程允許網頁根據用戶操作動態變化。 2)動態內容生成使得頁面內容可以根據條件調整。 3)異步編程確保用戶界面不被阻塞。 JavaScript廣泛應用於網頁交互、單頁面應用和服務器端開發，極大地提升了用戶體驗和跨平台開發的靈活性。