AJAX get() 和 post() 方法

Posted 2021-01-22 Heson

• GET - 从指定的资源请求数据
• POST - 向指定的资源提交要处理的数据

GET 基本上用于从服务器获得（取回）数据。注释：GET 方法可能返回缓存数据。

POST 也可用于从服务器获取数据。不过，POST 方法不会缓存数据，并且常用于连同请求一起发送数据。

ajax_GET发起请求步骤

1、实例化AJAX对象

var ajaxObj = new XMLHttpRequest();

2、第二步：设置发送请求的参数

  //参数1：发送请求的方式
        //参数2：发送请求的url（包括数据）
        //参数3：异步（true）/同步（false）
        ajaxObj.open("GET","1ajax_get.php?name=sfk&age=不知道",true);

3、发送请求

ajaxobj.send();

4、监听ajax状态变化

        ajaxObj.onreadystatechange = function () {
            //第五步：判断是否成功
            //（1）网络状态值，成功为4
            //0——（未初始化）还没有调用send()
            //1——（正在载入）已经调用send()，正在发送请求
            //2——（载入完成）已经接收全部内容
            //3——（交互）解析内容
            //4——（完成）内容解析完成，可以返回数据

            //（2）状态码，成功为200
            if(ajaxObj.readyState == 4 && ajaxObj.status == 200){
                //第六步：接收返回数据
                // console.log(JSON.parse(ajaxObj.responseText));
                console.log(ajaxObj.responseText);
                //JSON.parse：字符串转json
                //JSON.stringify：json转字符串

                // var newDiv =  document.createElement("div");
                // newDiv.innerhtml = ajaxObj.responseText;
                // document.body.appendChild(newDiv);
            }
        }

后台php代码

//超级全局变量$_GET是系统提供的一个关联数组
//用于放 前端通过get请求传递过来的数据
$userName = $_GET["name"];
$userAge = $_GET["age"];
//json_encode：数组转json格式的字符串
//json_decode：json格式的字符串转数组
echo json_encode(array(
    "n"=>$userName,
    "a"=>$userAge
));

注意：get请求传递数据的方式，在请求的url后拼接？数据&数据

ajax_POST发起请求步骤

POST请求与GET请求相比多了个请求头，参数的发送方式也不同

        var ajaxObj = new XMLHttpRequest();
        ajaxObj.open("POST","2ajax_post.php",true);
        //设置请求头
        //注意：需要设置在open和send中间
        //application/x-www-form-urlencoded:被编码为名称/值对。这是标准的编码格式
        //multipart/form-data:被编码为一条消息
        //text/plain:以纯文本形式编码
        ajaxObj.setRequestHeader("CONTENT-TYPE","application/x-www-form-urlencoded");
        ajaxObj.send("name=gg&address=地球");
        ajaxObj.onreadystatechange = function () {
            if(ajaxObj.readyState == 4 && ajaxObj.status == 200){
                console.log(JSON.parse(ajaxObj.responseText));
            }
        }
        //POST传参:在send中进行传递参数

后台php代码

//超级全局变量  $_POST
//接收post请求传递的参数
$userName = $_POST["name"];
$userAddress = $_POST["address"];

//返回给前端json格式的字符串
echo json_encode(array(
    "n"=>$userName,
    "a"=>$userAddress
));