PHP与AJAX - 爱码网

一.基础
1.ajax是什么？
ajax = Asynchronous JavaScript and XML (异步的JavaScript和XML)
ajax不是编程语言，ajax是一种用于创建快速动态网页的技术。
2.ajax有什么特点？
传统的网页如果需要更新，必须重载整个页面，ajax可以实现局部刷新的效果，即向服务器
请求部分页面所需数据更新网页内容，这样可以减轻服务器的负担。
二.实践
下面例子实现的是员工信息的查询和创建，其中服务端用的是PHP语言实现的，此处没有使用数
据库服务，员工信息存在数组中;ajax用了两种方式实现，一种是jQuery，一种是原生方式。

jQuery方式实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php&ajax</title>
    <style type="text/css">
        body,input,button,select,h1{
            font-size: 30px;
            line-height: 1.2;
        }
        div{
            width: 690px;
            margin: auto;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div>
        <h1>员工查询</h1>
        <label>请输入员工编号</label>
        <input type="text" id="keyword"/>
        <button id="search">查询</button>
        <p id="searchResult"></p>

        <h1>员工新建</h1>
        <label>请输入员工编号</label>
        <input type="text" id="number"/><br>
        <label>请输入员工姓名</label>
        <input type="text" id="name"/><br>
        <label>请输入员工性别</label>
        <select id="sex">
            <option>男</option>
            <option>女</option>
        </select><br>
        <label>请输入员工职位</label>
        <input type="text" id="job"/>
        <button id="save">保存</button>
        <p id="createResult"></p>
    </div>
<!-- 引入百度的静态资源库 -->
<script src="http://apps.bdimg.com/libs/jquery/1.11.1/jquery.js"></script>
<script>
    // jquery封装的Ajax请求 GET
    $(document).ready(function(){
        $("#search").click(function(){
            $.ajax({
                type:"GET",
                url:"ajax.php?number="+$("#keyword").val(),
                dataType:"json",
                success:function(data){
                    if (data.success) {
                        $("#searchResult").html(data.msg);
                    }else{
                        $("#searchResult").html("出现错误："+data.msg);
                    }
                },
                error:function(jqXHR){
                    alert("发生错误："+jqXHR.status);
                },
            });
        });
    });
    // jquery封装的Ajax请求 GET
    $(document).ready(function(){
        $("#save").click(function(){
            $.ajax({
                type:"POST",
                url:"ajax.php",
                dataType:"json",
                data:{
                    name:$("#name").val(),
                    number:$("#number").val(),
                    sex:$("#sex").val(),
                    job:$("#job").val(),
                },
                success:function(data){
                    if(data.success){
                        $("#createResult").html(data.msg);
                    }else{
                        $("#createResult").html("出现错误："+data.msg);
                    }
                },
                error:function(jqXHR){
                    alert("发生错误："+jqXHR.status);
                }
            });
        });
    });
</script>
</body>
</html>

原生代码实现

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>php&ajax</title>
    <style type="text/css">
        body,input,button,select,h1{
            font-size: 30px;
            line-height: 1.2;
        }
        div{
            width: 690px;
            margin: auto;
            margin-top: 100px;
        }
    </style>
</head>
<body>
    <div>
        <h1>员工查询</h1>
        <label>请输入员工编号</label>
        <input type="text" id="keyword"/>
        <button id="search">查询</button>
        <p id="searchResult"></p>

        <h1>员工新建</h1>
        <label>请输入员工编号</label>
        <input type="text" id="number"/><br>
        <label>请输入员工姓名</label>
        <input type="text" id="name"/><br>
        <label>请输入员工性别</label>
        <select id="sex">
            <option>男</option>
            <option>女</option>
        </select><br>
        <label>请输入员工职位</label>
        <input type="text" id="job"/>
        <button id="save">保存</button>
        <p id="createResult"></p>
    </div>
<script>
    //原生js写的Ajax请求
    document.getElementById("search").onclick = function(){
        //发送Ajax查询请求并处理
        var request = new XMLHttpRequest();
        request.open("GET","ajax.php?number="+document.getElementById("keyword").value);
        request.send();
        //监听readystate对象是否发生变化
        request.onreadystatechange=function(){
            if(request.readyState === 4){
                if (request.status === 200) {
                    var data = JSON.parse(request.responseText);
                    if (data.success) {
                        document.getElementById("searchResult").innerHTML = data.msg;
                    }else{
                        document.getElementById("searchResult").innerHTML = \'出现错误:\'+data.msg;
                    }
                }else{
                    alert("发生错误："+request.status);
                }
            }
        }
    }

    document.getElementById("save").onclick = function(){
        //发送Ajax查询请求并处理
        var request = new XMLHttpRequest();
        request.open("POST","ajax.php");
        var data = "name="+document.getElementById("name").value
                    +"&number="+document.getElementById("number").value
                    +"&sex="+document.getElementById("sex").value
                    +"&job="+document.getElementById("job").value
        request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        request.send(data);
        console.log(data);
        //监听readystate对象是否发生变化
        request.onreadystatechange=function(){
            if(request.readyState === 4){
                if (request.status === 200) {
                    var data = JSON.parse(request.responseText);
                    if (data.success) {
                        document.getElementById("createResult").innerHTML = data.msg;
                    }else{
                        document.getElementById("createResult").innerHTML = \'出现错误:\'+data.msg;
                    }
                }else{
                    alert("发生错误："+request.status);
                }
            }
        }
    }
</script>
</body>
</html>

PHP代码（ajax.php）

<?php
//设置页面内容是HTML 编码格式是utf-8
header("Content-Type:application/json;charset=utf-8");
//定义一个多维数组，存放员工信息
$staff = array(
    array("name" => "洪七公", "number" => "101", "sex" => "男", "job" => "总经理"),
    array("name" => "老顽童", "number" => "102", "sex" => "男", "job" => "董事长"),
    array("name" => "欧阳锋", "number" => "103", "sex" => "男", "job" => "工程师"),
);
//判断如果是get请求，则调用搜索函数；如果是post请求，则调用新建函数
if ($_SERVER[\'REQUEST_METHOD\'] == \'GET\') {
    search();
} elseif ($_SERVER[\'REQUEST_METHOD\'] == \'POST\') {
    create();
}
/**
 * 通过员工编号搜索员工
 **/
function search()
{
    if (!isset($_GET[\'number\']) || empty($_GET[\'number\'])) {
        show(-1, \'参数错误\');
        return;
    }
    global $staff;
    $number = $_GET[\'number\'];
    $result = \'没有找到员工\';
    foreach ($staff as $value) {
        if (in_array($number, $value)) {
            $result = \'姓名:\' . $value[\'name\'] . \',性别:\' . $value[\'sex\'] . \',编号:\' . $value[\'number\'] . \',职位:\' . $value[\'job\'];
            break;
        }
    }
    show(1, $result);
    return;
}
/**
 * 新建员工信息
 **/
function create()
{
    $name   = !empty($_POST[\'name\']) ? $_POST[\'name\'] : \'\';
    $sex    = !empty($_POST[\'sex\']) ? $_POST[\'sex\'] : \'\';
    $number = !empty($_POST[\'number\']) ? $_POST[\'number\'] : \'\';
    $job    = !empty($_POST[\'job\']) ? $_POST[\'job\'] : \'\';
    if (empty($name) || empty($sex) || empty($number) || empty($job)) {
        show(-1, \'信息不全\');
    } else {
        $res = $name . \' 的信息保存成功！\';
        show(1, $res);
    }
    return;
}
/**
 * json形式输出展示信息
 * @param $code
 * @param $msg
 **/
function show($code = \'\', $msg = \'\')
{
    if ($code === 1) {
        echo \'{"success":true,"msg":"\' . $msg . \'"}\';
    } else {
        echo \'{"success":false,"msg":"\' . $msg . \'"}\';
    }
    return;
}

三.总结
Ajax虽然不是编程语言，但是Ajax技术的实现还是需要用js脚本编写的，
所以编写脚本的时候，还是要注意JavaScript的语法规则，避免出现一些低级错误