js AJAX 代码 原生GET/POST方法

   var submit=document.getElementById('submit');
    submit.onclick =function () {
        var username=document.getElementById('username');
        var password=document.getElementById('password');
        //1.新的申请

        var xhr=new XMLHttpRequest();

        //2 设置监听
        xhr.onreadystatechange=function () {
            if (xhr.readyState==4 && xhr.status==200){
                alert('yes');
                var tip=document.getElementById('ha');
                var text=JSON.parse(xhr.responseText);
                tip.innerHTML='获得的返回内容是:'+text[0].title;
            }
        }

        //3、设置URl
        var url='check.php?username='+username.value+'password='+password.value;
        xhr.open('get',url,true)
        //4、发送

        xhr.send(null);

上面是get的形式提交的 浏览请求，另外还有post形式提交的  方法如下

   //获取按钮元素
    var submit=document.getElementById('submit');
    submit.onclick =function () {  // 按钮点击并回调函数
        //获取文本信息
        var username=document.getElementById('username');
        var password=document.getElementById('password');
        
        // 开始执行ajax 1234/12345
        //1.新的申请
        var xhr=new XMLHttpRequest();
        //2 设置监听
        xhr.onreadystatechange=function () {
            if (xhr.readyState==4 && xhr.status==200){
                alert('yes');
                var tip=document.getElementById('ha');
                var text=JSON.parse(xhr.responseText);
                tip.innerHTML='获得的返回内容是:'+text[0].title;
            }
        }

        //3、设置URl
        var url='check.php';
        var data='username='+username.value+'&password='+password.value;
        xhr.open('post',url,true)
        //4、 设置头部 在发送数据
        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
        xhr.send(data);

        //使原有按钮功能失效
        return false
    }

post和 get的的区别 除了url方面的不同 还有就是 POST 要在发送之前写头部信息，并且send不能填写null而要填写数据。至于如何发送json格式的数据  日后分享

继续分享

json格式

js前端 两个注意点

一是数据得用函数转换

data=JSON.stringify({"username":username.value,"password":username.value});

二是头部信息也要修改

xhr.setRequestHeader("Content-type","application/json");

PHP后端是这样使用的

$json_raw = file_get_contents("php://input");
//接收json
$json_data = json_decode($json_raw); //解析json为对象格式
//调用
$a=$json_data->username;
print_r($a);