PHP - AJAX vs. PHP

There is no AJAX server.

AJAX is a technology that runs in the browser. It uses asynchronous data transfer between the browser and the web server, allowing the web page to request a small amount of information from the server instead of the entire page.

AJAX is a web browser technology that is independent of web server software.

AJAX PHP Example

The following example will demonstrate how the web page behaves when the user types characters in the input box. Communicate with the web server:

Instance

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

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>PHP中文网(php.cn)</title>
     <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","ajax_php.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 code explanation:

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

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

· Create an XMLHttpRequest object

· Create a function to be executed when the server response is ready

· Send a request to the file on the server

· Please pay attention to the parameter (q) added to the end of the URL (including the content of the input box)

The above paragraph passes The server page called by JavaScript is a PHP file named "ajax_php.php".

The source code in "ajax_php.php" checks the name array and returns the corresponding name to the browser:

ajax_php.php file

<?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;
 ?>

Run the program and try it

Explanation: If JavaScript sends any text (i.e. strlen($q) > 0), what will happen is:

1. Find names that match the characters sent by JavaScript

2. If no match is found, set the response string to "no suggestion"

3. If one or more matching names are found, then Set response string with all names

4. Send response to "txtHint" placeholder

PHP Ajax cross-domain problem solution

If your asynchronous request needs to cross domain, you can check out: PHP Ajax cross-domain problem solution.

Continuing Learning

new file

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>PHP中文网(php.cn)</title> <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","ajax_php.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>

submit Reset Code

Automatic operation

PHP - AJAX vs. PHP

ElementaryImperial CMS enterprise imitation website tutorial

ElementaryNewbies with zero foundation in WordPress build personal blogs and corporate websites

ElementaryUltimate CMS zero-based website building instruction video

ElementaryFront-end project-Shangyou [HTML/CSS/JS technology comprehensive practice]

IntermediateVue3.0 from 0 to build a universal backend management system project practice

ElementaryZero-based front-end course [Vue advanced learning and practical application]

ElementaryWEB front-end tutorial [HTML5+CSS3+JS]

ElementaryQuick introduction to apipost

IntermediateVue3+TypeScript practical tutorial-enterprise-level project practice

ElementaryLet's briefly talk about starting a business in PHP

IntermediateVUE e-commerce project (front-end & back-end dual project actual combat)

ElementaryApipost practical application [api, interface, automated testing, mock]