ajax如何使用

發(fā)布時間：2020-12-03 13:30:19 來源：億速云閱讀：139 作者：小新欄目：web開發(fā)

這篇文章給大家分享的是有關ajax如何使用的內容。小編覺得挺實用的，因此分享給大家做個參考。一起跟隨小編過來看看吧。

1.先搭建一個后臺環(huán)境吧？比如php

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

我將PHPStudy安裝到了D盤，所以進入D盤找到phpstudy文件夾里面的WWW文件夾

WWW文件夾就相當于我們電腦上的服務器了，以后寫的所有東西，全部放到WWW文件夾中。

在我們的WWW文件夾下面創(chuàng)建兩個文件，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:

<h2>請輸入姓名：</h2>
<input type="text" id="name">
<button onclick="submit()">提交</button>
<div id="text"></div>

javascript:

function submit(){
        
        var name=document.getElementById('name').value
               var text=document.getElementById('text')
        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),你將會發(fā)現(xiàn)，命令將會被執(zhí)行多次。這個時候，就要稍微的改一下代碼了：(原因，在文章后面你會找到)

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

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

ajax的優(yōu)勢

在我們的第一個例子當中，是通過submit按鈕提交到php后臺，然后再進行數(shù)據(jù)的處理操作。

這種操作呢，有一個弊端，就是需要把一整頁的數(shù)據(jù)同時提交到后臺。

舉個栗子

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

如果使用ajax技術呢？我們可以將數(shù)據(jù)逐條的提交到后臺，也可以隨時隨地的提交。比如說，你填寫完昵稱，后臺立馬告訴你昵稱被用，OK，改了就是嘍~。

AJAX的使用

1.創(chuàng)建AJAX

  var XHR=new XMLHttpRequest();

2.向服務器發(fā)送請求

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

open里面有三個參數(shù)，分別為數(shù)據(jù)傳輸方式，傳輸文件，是否異步

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

3.GET vs POST

一句話：get更快，post更強

4.服務器響應 —— 你把值傳過去了，咋也得傳回來點什么吧？

ajax如何使用

XHR.responseText;
XHR.responseXML;

5.響應事件——什么時候才能返回數(shù)據(jù)嘞？

onreadystatechange 事件
兩個屬性：
readyState
status

每當 readyState 改變時，就會觸發(fā) onreadystatechange 事件。
readyState 屬性存有 XMLHttpRequest 的狀態(tài)信息。

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

ajax如何使用

感謝各位的閱讀！關于ajax如何使用就分享到這里了，希望以上內容可以對大家有一定的幫助，讓大家可以學到更多知識。如果覺得文章不錯，可以把它分享出去讓更多的人看到吧！

向AI問一下細節(jié)

ajax如何使用

猜你喜歡

最新資訊

相關推薦

相關標簽