ajax请求数据库的原理

get请求：请求是是小数据，参数在url里显示，安全性能低。
post请求：请求的是大数据，参数在虚拟载体里，安全性能高。

    <script type="text/javascript">
    window.onload = function(){
        var btn = document.getElementById('btn');
        btn.onclick = function(){
            var uname = document.getElementById('username').value;
            var pw = document.getElementById('password').value;

//ajax请求数据库的四个步骤：
// 1、创建XMLHttpRequest对象
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();    //标准浏览器
            }else{
                xhr = new ActiveXObject("Microsoft.XMLHTTP");    //IE6
            }
            // readyState=0表示xhr对象创建完成
            console.log(xhr.readyState + '----------1-----------');
// 2、准备发送请求
            /*
            参数一：请求方式（get获取数据；post提交数据）
            参数二：请求地址
            参数三：同步或者异步标志位，默认是true表示异步，false表示同步
            
            post请求参数通过send传递，不需要通过encodeURI()转码
            必须设置请求头信息
            */
            var param = 'username='+uname+'&password='+pw;
            //xhr.open('get','get.php?'+encodeURI(param),true);//将数据提取出来，然后进行转码。
            //get方式请求。路径中将数据转码，防止乱码
            xhr.open( 'post', 'post.php', true );

// 3、执行发送动作
            xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //xhr.send(null);   
            //当通过get方式请求时，发送时不需要传参数，也不需要请求头部。
            xhr.send(param);//post请求参数在这里传递，并且不需要转码

// 4、指定回调函数
            // readyState=1表示已经发送了请求
            console.log(xhr.readyState + '----------2-----------');
            // 该函数调用的条件就是readyState状态发生变化（不包括从0变为1）
            xhr.onreadystatechange = function(){
    /*
        readyState参数为:
            2 浏览器已经收到了服务器响应的数据
            3 正在解析数据
            4 数据已经解析完成，可以使用了
    */
                console.log(xhr.readyState + '----------3-----------');
        // 4表示服务器返回的数据已经可以使用了，但是这个数据不一定是正常的
                if(xhr.readyState == 4){
// http的常见状态码
    /*
        200表示响应成功
        404没有找到请求的资源
        500服务器端错误
    */
//200表示服务器返回的数据是正常的，不是200的话表示数据是错误的
                    if(xhr.status == 200){
                        // 这里的200表示数据是正常的
                        alert(xhr.responseText);
                        // xhr.responseXML
                    }
                }
            }
            
        }
    }
    </script>

//get.php  内容
<?php 
    $uname = $_GET['username'];
    $pw = $_GET['password'];

    if($uname == 'admin' && $pw == '123'){
        echo 1;
    }else{
        echo $uname;
    }
 ?>

//post.php  内容
<?php 
    $uname = $_POST['username'];
    $pw = $_POST['password'];

    if($uname == 'admin' && $pw == '123'){
        echo 1;
    }else{
        echo $uname;
    }
 ?>

转载于:https://my.oschina.net/u/3321349/blog/858451