php examples to explain the use of ajax

A summary

1, multi-Review: Code came easy, is the need to review, to see more

2, ajax principle: ajax update is part of the page, in fact, still listening to the html page after the event, and then passed to the server to operate, here it is the way to get to the server by value,

3, ajax and the difference between full-page update: ajax and the difference between full-page update is a full-page update returns the entire page, ajax only return is to modify the data portion, and mainly achieved through the XMLHttpRequest object window object

4, to achieve ajax steps of: the server is implemented ajax return part of the data, and page end is performed several new objects for this object, a, to create the object b, onreadystatechange c, open d, send

Two, ajax and php

AJAX is used to create more interactive applications.

ajax php example

Examples explained HTML page:

When the user types characters in the input box above, will perform "showHint ()" function. This function is triggered by the "onkeyup" event:

<html>
<head>
<script>
function showHint(str)
{
    if (str.length==0)
    { 
        document.getElementById("txtHint").innerHTML="";
        return;
    }
    if (window.XMLHttpRequest)
    {
        // IE7+, Firefox, Chrome, Opera, Safari 浏览器执行的代码
        xmlhttp=new XMLHttpRequest();
    }
    else
    {    
        //IE6, IE5 浏览器执行的代码
        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>在输入框中输入一个姓名:</b></p>
<form> 
姓名: <input type="text" onkeyup="showHint(this.value)">
</form>
<p>返回值: <span id="txtHint"></span></p>
 
</body>
</html>

Source explanation:

If the input field is empty (str.length == 0), this function will clear the contents txtHint placeholder, and exit the function.

If the input box is not empty, then showHint () performs the following steps:

1, create XMLHttpRequest object

2, create a function that executes when the server response is ready

3, sends a request to a file on the server

4, note added to the (content contains the input field) parameter in the URL ends (q)

Notes :

1, the label text field blanking: line 8, the label text field blanking

2, add a function: Line 21, to add a new XMLHttpRequest object function, which is to accept the data coming from the server there,

3, the server returns the data received ajax: line 25, may be the responseText property of the XMLHttpRequest object

4, get traditional values: Line 28, get way to pass values? Followed by the parameter value = number linkages and

5, onkeyup Event: line 37, onkeyup event occurs when the keyboard key is released.

6, the label js parameter passing in this application: line 37, this refers to the object tag is the tag itself

php file

Above this server page called by the JavaScript is called "gethint.php" PHP file.

"Gethint.php" source code checks array of names, and then return the corresponding name to the browser:

<?php
// 将姓名填充到数组中
$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";
 
//从请求URL地址中获取 q 参数
$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=="")//是否是第一个
            {
                $hint=$a[$i];
            }
            else
            {
                $hint=$hint." , ".$a[$i];
            }
        }
    }
}
 
// 如果没有匹配值设置输出为 "no suggestion" 
if ($hint == "")
{
    $response="no suggestion";
}
else
{
    $response=$hint;
}
 
//输出返回值
echo $response;
?>

Explanation: If JavaScript to send any text (i.e., strlen ($ q)> 0), occurs:

Find the name of the character matching JavaScript sent if no match is found, if it finds one or more matching names, with all the names will be set up in response to the string response string is set to "no suggestion" the response to the "txtHint" placeholder symbol

Notes :

1 $_GET[]: line 35, the superglobal $ _GET [] use

2, strlen(): line 38, using the function strlen

3, the data connection: a first line 43-52, so the front to find data into parameters comprising

4, string concatenation: line 51, connected to the character for variable point

5, algorithm logic: the algorithm logic is that by passing over parameters from page to find the right things to return to the page

php examples to explain the use of ajax

Characteristic "marble T-slot platform," Marble T-slot platform

Guess you like