PHP之与Ajax那些事儿

最新推荐文章于 2021-12-28 20:09:43 发布

沁柠

最新推荐文章于 2021-12-28 20:09:43 发布

阅读量1.1k

点赞数 1

本文链接：https://blog.csdn.net/weixin_45846241/article/details/106728777

版权

PHP

PHP 即 “超文本预处理器”，是一种通用开源脚本语言。PHP是在服务器端执行的脚本语言，与C语言类似，是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法。利于学习，使用广泛，主要适用于Web开发领域。

Ajax

AJAX = Asynchronous JavaScript And XML（异步 JavaScript 及 XML）
AJAX 是 Asynchronous JavaScript And XML 的首字母缩写。
AJAX 并不是一种新的编程语言，而仅仅是一种新的技术，它可以创建更好、更快且交互性更强的 web 应用程序。
AJAX 使用 JavaScript 在 web 浏览器与 web 服务器之间来发送和接收数据。
通过在幕后与 web 服务器交换数据，而不是每当用户作出改变时重载整个 web 页面，AJAX 技术可以使网页更迅速地响应。

ajax原理
ajax就是部分更新页面，其实还在的html页面监听到事件后，然后传给服务器进行操作，这里用的是get方式来传值到服务器。

ajax和全页面更新的区别
ajax和全页面更新的区别是全页面更新返回的是整个页面，而ajax只返回的是修改部分的数据，而且主要是通过window对象的XMLHttpRequest对象来实现的。

实现ajax的步骤
实现ajax服务器端就是返回部分数据，页面端就是新建对象然后执行这个对象的几个函数，1）、创建对象
2）、onreadystatechange
3）、open
4）、send

PHP与Ajax

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

实例
以下实例：展示了前台页面如何与后台服务器实现交互的过程（ps：数据是模拟的）
在这里插入图片描述
HTML页面：
当用户在上面的输入框中输入字符时会触发 “onkeyup” 事件：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .container{
            position: relative;
            width: 300px;
            margin: auto;
        }
        #suggests{
            position: absolute;
            top: 100%;
            left: 0;
            margin: 0;
            padding: 0;
            border: 1px solid #aaa;
            list-style: none;
            width: 260px;
            display: none;
        }
        #suggests.active{
            display: block;
        }
        #suggests li{
            line-height: 2em;
            padding: 0 10px;
            cursor: pointer;
        }
        #suggests li:hover{
            background-color: #eee;
        }
    </style>
</head>
<body>
    <div class="container">
        <input type="text" id="kw"><button>搜索一下</button>
        <ul id="suggests">
            <li>php</li>
            <li>python</li>
        </ul>
    </div>

    <script>
        // 拿到input框
        var oKw = document.getElementById('kw');
        // 绑定事件
        oKw.onkeyup = function(){
            // 拿到输入的值
            var k = this.value;
            // 判断输入的值不为空
            if(!k){
                suggests.classList.remove('active');
                return;
            }
            // 创建对象  
            var xhr = new XMLHttpRequest();
            // 绑定事件
            xhr.onreadystatechange = function(){
                // 判断请求是否成功
                if(xhr.readyState == 4 && xhr.status == 200){
                    doresponce(xhr);
                }
            }
            // 调用open方法 get方式传值 带参数
            xhr.open('GET','search.php?kw=' + k);
            // 调用send方法
            xhr.send(null);
        }
        // 请求成功所要执行的函数
        function doresponce(xhr){
            if(xhr.responseText){
                suggests.innerHTML = xhr.responseText;
                suggests.classList.add('active');
            }else{
                suggests.classList.remove('active');
            }
        }
    </script>
</body>
</html>

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

<?php
    header('Content-Type:text/html');
    //引入数据
    require('data.php');

    @$kw = $_REQUEST['kw'] or die('<li>缺少查询数据</li>');

    foreach($group as $book){
        echo "<li>$book[q]</li>";
    }
?>

模拟数据
由上面这段代码能看出来引入的数据名为 “data.php”的PHP文件，因此模拟的数据就放在这个文件中

<?php
    $group = [
        ["type"=>"sug","sa"=>"s_1","q"=>"ph值是什么"],
        ["type"=>"sug","sa"=>"s_2","q"=>"photoshop"],
        ["type"=>"sug","sa"=>"s_3","q"=>"ph值"],
        ["type"=>"sug","sa"=>"s_4","q"=>"photo"],
        ["type"=>"sug","sa"=>"s_5","q"=>"ph试纸"],
        ["type"=>"sug","sa"=>"s_6","q"=>"phone"],
        ["type"=>"sug","sa"=>"s_7","q"=>"phideon辉昂价格"],
        ["type"=>"sug","sa"=>"s_8","q"=>"ph值大于7是酸性还是碱性"],
        ["type"=>"sug","sa"=>"s_9","q"=>"physical"],
        ["type"=>"sug","sa"=>"s_10","q"=>"php从入门到放弃"],
        ["type"=>"sug","sa"=>"s_11","q"=>"java大全"],
        ["type"=>"sug","sa"=>"s_12","q"=>"JavaScript权威指南"],
        ["type"=>"sug","sa"=>"s_13","q"=>"java葵花宝典"],
        ["type"=>"sug","sa"=>"s_14","q"=>"你不知道的JavaScript"],
        ["type"=>"sug","sa"=>"s_15","q"=>"高性能的JavaScript"]
    ];
?>

沁柠

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
PHP之与Ajax那些事儿

PHPPHP 即 “超文本预处理器”，是一种通用开源脚本语言。PHP是在服务器端执行的脚本语言，与C语言类似，是常用的网站编程语言。PHP独特的语法混合了C、Java、Perl以及 PHP 自创的语法。利于学习，使用广泛，主要适用于Web开发领域。AjaxAJAX = Asynchronous JavaScript And XML（异步 JavaScript 及 XML）AJAX 是 Asynchronous JavaScript And XML 的首字母缩写。AJAX 并不是一种新的编程语言，而
复制链接

扫一扫