Ajax 三种方法实现留言板功能之 源生方法

Ajax 实现异步提交，在不刷新页面的情况下将数据发送到服务器进行处理，并返回被处理后的结果

Ajax原生 方法 使用XMLHttpRequest对象：

前台脚本：

<script>
    var btn = document.getElementById('submit');
    btn.onclick = function(){
        //获取内容
        var text = document.getElementById('text').value;
        //拼接字符串
        var data = 'content='+text;
        //创建XML请求对象
        var xhr = new XMLHttpRequest();
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4 && xhr.status == 200){
                //JSON.parse（text,function）将返回的json数据转化为对象
                var json = JSON.parse(xhr.responseText);
                if(json.status ==1){
                    alert('留言成功');
                    //创建节点
                    var li = document.createElement('li');
                    //设置class
                    // li.className('list-group-item');
                    // li.style.border = 'none';
                    var list = document.getElementsByTagName('ul')[1].getElementsByTagName('li');
                    li.innerHTML = '<span>发布者:'+json.name+'&nbsp;&nbsp;&nbsp;发布时间：'+json.create_time+'</span><br>' + '<p>' +
                            json.content +'</p>';
                    document.getElementsByTagName('ul')[1].insertBefore(li,list[0]);
                }
            }
        };
        xhr.open('POST','mess.php',true);
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.send(data);
        return false;
    }
</script>

后台脚本：

session_start();
$user_id = isset($_SESSION['user_id'])? $_SESSION['user_id']:'';
$content = $_POST['content'];
$create_time = time();
require "public/connect.php";
$sql = 'INSERT message SET user_id=:user_id,content=:content,create_time=:create_time';
$pdoStmt = $pdo->prepare($sql);
$pdoStmt->bindParam('user_id',$user_id);
$pdoStmt->bindParam('content',$content);
$pdoStmt->bindParam('create_time',$create_time);
if ($pdoStmt->execute()){
    echo json_encode(['status'=>1,'id'=>$user_id,'create_time'=>date('Y年 m月 d日 H时 i分 s秒',$create_time),'conent'=>$content]);
}else{
    echo json_encode(['status'=>0,'info'=>'留言失败']);
}

总结：1.基本步骤 ：

a.生成 XMLHttpRequest()对象，

b创建onreadystatechange事件 每次当readyState变化时都会触发该事件

c.xhr.open()获取整个php脚本对数据进行处理，设置请求头，xhr.sned(text)要被处理的数据

d.判断当前HTTP请求状态 1.初始化 2. 建立连接 3.处理中 4 .处理完毕 与xhr，status 200 时 加载成功

e.将已经获取到的请求文本通过 JSON.parse() 转换为对象

f.后台通过操作 json_encode() 使经过处理的数据 转化为json格式