笔记整理

PHP基础回顾之Ajax（八）

2018-09-23  本文已影响0人  桜花約束

AJAX
AJAX 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

AJAX与My SQL
实例解释 - HTML 页面。当用户在上面的下拉列表中选择某位用户时，会执行名为 "showSite()" 的函数。该函数由 "onchange" 事件触发。showSite() 函数会执行以下步骤：

  • 检查是否有网站被选择
  • 创建 XMLHttpRequest 对象
  • 创建在服务器响应就绪时执行的函数
  • 向服务器上的文件发送请求
  • 请注意添加到 URL 末端的参数（q）（包含下拉列表的内容）
//test.html 文件代码:
<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<script>
    function showSite(str)
    {
        if (str=="")
        {
            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","getsite_mysql.php?q="+str,true);
xmlhttp.send();
}
  </script>
  </head>
<body>
<form>
<select name="users" onchange="showSite(this.value)">
<option value="">选择一个网站:</option>
<option value="1">Google</option>
<option value="2">淘宝</option>
<option value="3">菜鸟教程</option>
<option value="4">微博</option>
<option value="5">Facebook</option>
</select>
</form>
<br>
<div id="txtHint"><b>网站信息显示在这里……</b></div> 
</body>
</html>



//getsite_mysql.php 文件代码******************************************
<?php
$q = isset($_GET["q"]) ? intval($_GET["q"]) : ''; 
if(empty($q)) {
    echo '请选择一个网站';
    exit;
} 
$con = mysqli_connect('localhost','root','123456');
if (!$con)
{
    die('Could not connect: ' . mysqli_error($con));
}
// 选择数据库
mysqli_select_db($con,"test");
// 设置编码，防止中文乱码
mysqli_set_charset($con, "utf8");

$sql="SELECT * FROM Websites WHERE id = '".$q."'";

$result = mysqli_query($con,$sql);

echo "<table border='1'>
<tr>
<th>ID</th>
<th>网站名</th>
<th>网站 URL</th>
<th>Alexa 排名</th>
<th>国家</th>
</tr>";

while($row = mysqli_fetch_array($result))
{
    echo "<tr>";
    echo "<td>" . $row['id'] . "</td>";
    echo "<td>" . $row['name'] . "</td>";
    echo "<td>" . $row['url'] . "</td>";
    echo "<td>" . $row['alexa'] . "</td>";
    echo "<td>" . $row['country'] . "</td>";
    echo "</tr>";
}
echo "</table>";

mysqli_close($con);
?>

//解释：当查询从 JavaScript 发送到 PHP 文件时，将发生：
//PHP 打开一个到 MySQL 数据库的连接
//找到选中的用户
//创建 HTML 表格，填充数据，并发送回 "txtHint" 占位符

AJAX 实时搜索
与传统的搜索相比，实时搜索具有很多优势：

  • 当键入数据时，就会显示出匹配的结果
  • 当继续键入数据时，对结果进行过滤
  • 如果结果太少，删除字符就可以获得更宽的范围
//HTML页面
<html>
<head>
<script>
    function showResult(str)
{
if (str.length==0)
{ 
    document.getElementById("livesearch").innerHTML="";
    document.getElementById("livesearch").style.border="0px";
    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("livesearch").innerHTML=xmlhttp.responseText;
        document.getElementById("livesearch").style.border="1px solid #A5ACB2";
    }
}
xmlhttp.open("GET","livesearch.php?q="+str,true);
xmlhttp.send();
}
</script>
</head>
<body>
<form>
<input type="text" size="30" onkeyup="showResult(this.value)">
<div id="livesearch"></div>
</form>
</body>
</html>

//PHP文件***************************************************************
<?php
$xmlDoc=new DOMDocument();
$xmlDoc->load("links.xml");
$x=$xmlDoc->getElementsByTagName('link');
// 从 URL 中获取参数 q 的值
$q=$_GET["q"];
// 如果 q 参数存在则从 xml 文件中查找数据
if (strlen($q)>0)
{
    $hint="";
    for($i=0; $i<($x->length); $i++)
{
    $y=$x->item($i)->getElementsByTagName('title');
    $z=$x->item($i)->getElementsByTagName('url');
    if ($y->item(0)->nodeType==1)
    {
        // 找到匹配搜索的链接
        if (stristr($y->item(0)->childNodes->item(0)->nodeValue,$q))
        {
            if ($hint=="")
            {
                $hint="<a href='" . 
                $z->item(0)->childNodes->item(0)->nodeValue . 
                "' target='_blank'>" . 
                $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
            }
            else
            {
                $hint=$hint . "<br /><a href='" . 
                $z->item(0)->childNodes->item(0)->nodeValue . 
                "' target='_blank'>" . 
                $y->item(0)->childNodes->item(0)->nodeValue . "</a>";
            }
        }
    }
}
}
// 如果没找到则返回 "no suggestion"
if ($hint=="")
{
    $response="no suggestion";
}
else
{
    $response=$hint;
}

// 输出结果
echo $response;
?>
//如果 JavaScript 发送了任何文本（即 strlen($q) > 0），则会发生：
//1、加载 XML 文件到新的 XML DOM 对象
//2、遍历所有的 <title> 元素，以便找到匹配 JavaScript 所传文本
//3、在 "$response" 变量中设置正确的 URL 和标题。如果找到多于一个匹配，所有的匹配都会添加到变量。
//4、如果没有找到匹配，则把 $response 变量设置为 "no suggestion"。

AJAX RSS 阅读器
RSS 阅读器，通过它，来自 RSS 的内容在网页不进行刷新的情况下被载入。当 RSS feed 的请求从 JavaScript 发送到 PHP 文件时，将发生：

  • 检查哪个 RSS feed 被选中
  • 创建一个新的 XML DOM 对象
  • 在 xml 变量中加载 RSS 文档
  • 从 channel 元素中提取并输出元素
  • 从 item 元素中提取并输出元素

AJAX 投票
通过它，投票结果在网页不进行刷新的情况下被显示。当所选的值从 JavaScript 发送到 PHP 文件时，将发生：

  • 获取 "poll_result.txt"(存储结果的文件) 文件的内容
  • 把文件内容放入变量，并向被选变量累加 1
  • 把结果写入 "poll_result.txt" 文件
  • 输出图形化的投票结果
上一篇 下一篇

猜你喜欢

热点阅读