老友记之PHP7留言板开发（Ajax异步提交）

前言

这节教程算是这个专辑的重中之重吧。随着前端技术的不断迭代更新，网站很多功能的实现都转移到前端去实现，2018年第一季度编程语言排名来看，JavaScript仍然是最受欢迎的编程语言。所以想要深入学习js，那么Ajax是必不可少的。

在前面课程讲过js验证，课件代码是在老友记之PHP7留言板开发（JS验证）基础上改动，只需加入ajax异步操作部分即可轻松完成。

需要注意的是，这里不再详细讲解什么是XMLHttpRequest对象，为什么要用它等等，相信你再能运用的情况下再去深入了解它会印象更加深刻，这里就尽可能的少一些文字类的应试教学并能达到学会效果。

打开编辑器开始动手吧！

Ajax异步的核心部分讲解

// 第一步 创建 XMLHttpRequest 对象，为了更容易理解，变量就用ajax
var ajax = new XMLHttpRequest();

// 第二步 初始化一个Ajax请求，url参数是远程请求地址ajax.php
ajax.open('POST', url, true); // 这里用到post提交留言，所以用post方式提交给服务器
// ajax.open('GET', url, true); // get方式请求服务器

// 第三步 发送请求；如果该请求是异步模式(默认)，该方法会立刻返回。
ajax.send(inputdata);

// 第四步 发送请求总该要知道有没收到吧，这里就需要用到Ajax的事件监听器onreadystatechange 
ajax.onreadystatechange = function(){
    // 这里判断服务器是否有数据响应，如果有则做些你要处理的逻辑，比如提示用户操作成功
}

上面四步骤还理解不了的话，可以认为是第一步找个朋友A发邮件，第二步给这位A朋友写信件内容并封装写上地址贴邮票，第三步投递邮件，过了一阵（当然网络通的情况下立即有响应的），第四步收到A朋友的回信了，很开心。接下来就可以根据回信内容做事啦，比如见（网）面（约）...

好了就到这里，下面是完整代码。

HTML+JS页面代码

    
        
        
        
        
        
        
    
    
        
        
        

            

                
留言板
                
FEEDBACK
            
            

                

                    

                         
                        
                    
                    
                    
                
            
        
    

PHP代码（ajax.php）

 0){
    // 如果入库成功，这里可以处理其他想要的逻辑
    echo 1;
    exit;  // 退出程序，使其不再往下执行代码
}
// 这是错误的时候返回0
echo 0;
exit;

记得动手练习哦！欢迎下面评论区涂鸦！~