工具标签

PHP 表单 PHP 表单验证 PHP 表单 - 必需字段表单验证邮件和URL PHP 完整表单实例 PHP $_GET 变量 PHP $_POST 变量

PHP 多维数组 PHP 日期 PHP 包含 PHP 文件 PHP 文件上传 PHP Cookie PHP 会话 php 电子邮件 PHP 安全电子邮件 PHP 错误 PHP异常 PHP 过滤器 PHP 高级过滤器 PHP JSON

PHP MySQL 简介 PHP MySQL 连接 PHP MySQL 创建数据库 PHP MySQL 创建数据表 PHP MySQL 插入数据 PHP MySQL 插入多条数据 PHP MySQL 预处理语句 PHP MySQL 读取数据 PHP MySQL 哪里 PHP MySQL 排序依据 PHP MySQL 更新 PHP MySQL 删除 PHP ODBC

PHP XML

PHP XML 外移 XML文档对象模型 XML简单XML

PHP 与 AJAX

AJAX 简介阿贾克斯PHP AJAX 数据库 AJAX XML AJAX 实时搜索 AJAX RSS 阅读器 AJAX 投票

首页

后端开发

PHP

php完全自学手册

阿贾克斯PHP

工具标签

PHP 教程

PHP 教程 PHP 简介 PHP 安装 PHP 语法 PHP 变量 PHP 回显/打印 PHP 数据类型 PHP 常量 PHP 字符串 PHP 运算符 PHP 如果...否则 PHP开关 PHP 数组 PHP 数组排序 PHP 超级全局变量 PHP While 循环 PHP For 循环 PHP 函数 PHP魔术常量 PHP 命名空间 PHP 面向对象 PHP EOF(heredoc) PHP类型比较

PHP 表单

PHP 表单 PHP 表单验证 PHP 表单 - 必需字段表单验证邮件和URL PHP 完整表单实例 PHP $_GET 变量 PHP $_POST 变量

PHP 高级教程

PHP 多维数组 PHP 日期 PHP 包含 PHP 文件 PHP 文件上传 PHP Cookie PHP 会话 php 电子邮件 PHP 安全电子邮件 PHP 错误 PHP异常 PHP 过滤器 PHP 高级过滤器 PHP JSON

PHP 7 新特性

PHP 数据库

PHP XML

PHP XML 外移 XML文档对象模型 XML简单XML

PHP 与 AJAX

AJAX 简介阿贾克斯PHP AJAX 数据库 AJAX XML AJAX 实时搜索 AJAX RSS 阅读器 AJAX 投票

PHP 参考手册

PHP 数组 PHP 日历 PHP 卷曲 PHP 日期 PHP目录 PHP 错误 PHP文件系统 PHP过滤器 PHP FTP PHP HTTP PHP Libxml PHP邮件 PHP 数学 PHP杂项 PHP MySQLi PHP PDO PHP 简单XML PHP 字符串 PHP XML PHP 邮编 PHP 时区 PHP 图像处理 PHP RESTful PHP PCRE PHP 可用的函数

阿贾克斯PHP

阅读 450447

更新时间 2016-09-11

AJAX 简介

AJAX 数据库

PHP - AJAX 与 PHP

AJAX 被用于创建交互性更强的应用程序。

AJAX PHP 实例

下面的实例将演示当用户在输入框中键入字符时，网页如何与 Web 服务器进行通信：

实例

尝试在输入框中输入一个名字，如：Anna:

返回值:

实例解释 - HTML 页面

当用户在上面的输入框中键入字符时，会执行 "showHint()" 函数。该函数由 "onkeyup" 事件触发：

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

源代码解释：

如果输入框是空的（str.length==0），该函数会清空 txtHint 占位符的内容，并退出该函数。

如果输入框不是空的，那么 showHint() 会执行以下步骤：

创建 XMLHttpRequest 对象
创建在服务器响应就绪时执行的函数
向服务器上的文件发送请求
请注意添加到 URL 末端的参数（q）（包含输入框的内容）

PHP 文件

上面这段通过 JavaScript 调用的服务器页面是名为 "gethint.php" 的 PHP 文件。

"gethint.php" 中的源代码会检查姓名数组，然后向浏览器返回对应的姓名：

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

解释：如果 JavaScript 发送了任何文本（即 strlen($q) > 0），则会发生：