在php中關(guān)于ajax的使用實(shí)例講解

本篇文章為大家展示了在php中關(guān)于ajax的使用實(shí)例講解，代碼簡(jiǎn)明扼要并且容易理解，絕對(duì)能使你眼前一亮，通過(guò)這篇文章的詳細(xì)介紹希望你能有所收獲。

從事成都西信服務(wù)器托管，服務(wù)器租用，云主機(jī)，網(wǎng)絡(luò)空間，國(guó)際域名空間，CDN，網(wǎng)絡(luò)代維等服務(wù)。

一、總結(jié)

1、多復(fù)習(xí)：代碼都挺簡(jiǎn)單的，就是需要復(fù)習(xí)，要多看

2、ajax原理：ajax就是部分更新頁(yè)面，其實(shí)還在的html頁(yè)面監(jiān)聽(tīng)到事件后，然后傳給服務(wù)器進(jìn)行操作，這里用的是get方式來(lái)傳值到服務(wù)器，

3、ajax和全頁(yè)面更新的區(qū)別：ajax和全頁(yè)面更新的區(qū)別是全頁(yè)面更新返回的是整個(gè)頁(yè)面，而ajax只返回的是修改部分的數(shù)據(jù)，而且主要是通過(guò)window對(duì)象的XMLHttpRequest對(duì)象來(lái)實(shí)現(xiàn)的

4、實(shí)現(xiàn)ajax的步驟：實(shí)現(xiàn)ajax服務(wù)器端就是返回部分?jǐn)?shù)據(jù)，頁(yè)面端就是新建對(duì)象然后執(zhí)行這個(gè)對(duì)象的幾個(gè)函數(shù)，a、創(chuàng)建對(duì)象 b、onreadystatechange c、open d、send

二、ajax和php

AJAX 被用于創(chuàng)建交互性更強(qiáng)的應(yīng)用程序。

ajax php實(shí)例

在php中關(guān)于ajax的使用實(shí)例講解

實(shí)例解釋HTML頁(yè)面：

當(dāng)用戶(hù)在上面的輸入框中鍵入字符時(shí)，會(huì)執(zhí)行 "showHint()" 函數(shù)。該函數(shù)由 "onkeyup" 事件觸發(fā)：

<html>
<head>
<script>
function showHint(str)
{
    if (str.length==0)
    { 
        document.getElementById("txtHint").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest)
    {
        // IE7+, Firefox, Chrome, Opera, Safari 瀏覽器執(zhí)行的代碼
        xmlhttp=new XMLHttpRequest();
    }
    else
    {    
        //IE6, IE5 瀏覽器執(zhí)行的代碼
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","gethint.php?q="+str,true);
    xmlhttp.send();
}
</script>
</head>
<body>

<p><b>在輸入框中輸入一個(gè)姓名:</b></p>
<form> 
姓名: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>返回值: <span id="txtHint"></span></p>

</body>
</html>

源代碼解釋?zhuān)?/p>

如果輸入框是空的（str.length==0），該函數(shù)會(huì)清空 txtHint 占位符的內(nèi)容，并退出該函數(shù)。

如果輸入框不是空的，那么 showHint() 會(huì)執(zhí)行以下步驟：

1、創(chuàng)建 XMLHttpRequest 對(duì)象

2、創(chuàng)建在服務(wù)器響應(yīng)就緒時(shí)執(zhí)行的函數(shù)

3、向服務(wù)器上的文件發(fā)送請(qǐng)求

4、請(qǐng)注意添加到 URL 末端的參數(shù)（q）（包含輸入框的內(nèi)容）

注意點(diǎn)：

1、標(biāo)簽文本域置空：第8行，標(biāo)簽文本域置空

2、添加函數(shù)：第21行，給新建的XMLHttpRequest對(duì)象添加函數(shù)，這個(gè)函數(shù)就是接受從服務(wù)器那里傳來(lái)的數(shù)據(jù)，

3、服務(wù)器接受的ajax返回?cái)?shù)據(jù)：第25行，responseText可能是XMLHttpRequest對(duì)象的屬性

4、get傳值：第28行，get方式傳值，？后面接參數(shù)，=號(hào)連接鍵和值

5、onkeyup事件：第37行，onkeyup 事件會(huì)在鍵盤(pán)按鍵被松開(kāi)時(shí)發(fā)生。

6、標(biāo)簽js傳參中的this的應(yīng)用：第37行，標(biāo)簽中的this對(duì)象指的就是標(biāo)簽本身

php文件

上面這段通過(guò) JavaScript 調(diào)用的服務(wù)器頁(yè)面是名為 "gethint.php" 的 PHP 文件。

"gethint.php" 中的源代碼會(huì)檢查姓名數(shù)組，然后向?yàn)g覽器返回對(duì)應(yīng)的姓名：

<?php
// 將姓名填充到數(shù)組中
$a[]="Anna";
$a[]="Brittany";
$a[]="Cinderella";
$a[]="Diana";
$a[]="Eva";
$a[]="Fiona";
$a[]="Gunda";
$a[]="Hege";
$a[]="Inga";
$a[]="Johanna";
$a[]="Kitty";
$a[]="Linda";
$a[]="Nina";
$a[]="Ophelia";
$a[]="Petunia";
$a[]="Amanda";
$a[]="Raquel";
$a[]="Cindy";
$a[]="Doris";
$a[]="Eve";
$a[]="Evita";
$a[]="Sunniva";
$a[]="Tove";
$a[]="Unni";
$a[]="Violet";
$a[]="Liza";
$a[]="Elizabeth";
$a[]="Ellen";
$a[]="Wenche";
$a[]="Vicky";

//從請(qǐng)求URL地址中獲取 q 參數(shù)
$q=$_GET["q"];

//查找是否由匹配值， 如果 q>0
if (strlen($q) > 0)
{
    $hint="";
    for($i=0; $i<count($a); $i++)
    {
        if (strtolower($q)==strtolower(substr($a[$i],0,strlen($q))))
        {
            if ($hint=="")//是否是第一個(gè)
            {
                $hint=$a[$i];
            }
            else
            {
                $hint=$hint." , ".$a[$i];
            }
        }
    }
}

// 如果沒(méi)有匹配值設(shè)置輸出為 "no suggestion" 
if ($hint == "")
{
    $response="no suggestion";
}
else
{
    $response=$hint;
}

//輸出返回值
echo $response;
?>

解釋?zhuān)喝绻?JavaScript 發(fā)送了任何文本（即 strlen($q) > 0），則會(huì)發(fā)生：

查找匹配 JavaScript 發(fā)送的字符的姓名如果未找到匹配，則將響應(yīng)字符串設(shè)置為 "no suggestion"如果找到一個(gè)或多個(gè)匹配姓名，則用所有姓名設(shè)置響應(yīng)字符串把響應(yīng)發(fā)送到 "txtHint" 占位符

注意點(diǎn)：

1、$_GET[]：第35行，超全局變量$_GET[]的使用

2、strlen()：第38行，strlen函數(shù)的使用

3、數(shù)據(jù)連接：第43-52行，找所以前面包含傳入?yún)?shù)的數(shù)據(jù)

4、字符串連接：第51行，點(diǎn)變量用于字符連接

5、算法邏輯：整個(gè)算法邏輯就是，用從頁(yè)面?zhèn)魅脒^(guò)來(lái)的參數(shù)找適合的東西返回到頁(yè)面去

上述內(nèi)容就是在php中關(guān)于ajax的使用實(shí)例講解，你們學(xué)到知識(shí)或技能了嗎？如果還想學(xué)到更多技能或者豐富自己的知識(shí)儲(chǔ)備，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道。

文章題目：在php中關(guān)于ajax的使用實(shí)例講解
新聞來(lái)源：http://bm7419.com/article26/pcdgjg.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供響應(yīng)式網(wǎng)站、用戶(hù)體驗(yàn)、網(wǎng)站策劃、網(wǎng)站制作、外貿(mào)建站、網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶(hù)投稿、用戶(hù)轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話(huà)：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容