PHP||不刷新页面前提下向服务器发送请求

前言

前面我们提到的form表单提交请求，其实实际上说白了就是浏览器和服务器间的请求和响应。
浏览器中获取HTML页面、请求后台页面等等都会向服务器发送请求报文；而服务器返回相应的相应报文。
请求报文：包括请求头、请求行、请求主体。其中请求主体内存放的就是我们要发送给服务器的数据。
相应报文：包括响应行、响应头、响应主体。其中响应主体的内容就是服务器要返回浏览器的内容。
HTTP协议：这种通过请求报文、响应报文的方式来进行数据交互就叫做HTTP协议。
想要查看报文信息除了通过抓包软件外，还可以直接在浏览器查看。具体步骤如下：

不刷新页面发送请求

我们在浏览网页时都有这种经历，当我们往下拖拽侧边滚动条的时候，又会出现一些信息，好像永远没有尽头。这其实是因为，每次我们拖拽滚动条，都会促使浏览器向服务器发送请求报文，而服务器接受到请求报文后会返回响应报文，从而浏览器又拿到一些新数据，循环往复。
那么，不刷新页面如何发送请求呢？一起看看吧！
1）写好源HTML页面和要提交到的PHP页面

2）创建一个异步对象
3）给该对象添加请求行、请求头和请求主体
具体代码如下：

<script>
   //获取提交按钮id
    var id = document.getElementById("idddd");
    //获取文本框id
    var text = document.getElementById("ttt");

    //给按钮添加一个单击事件
    id.onclick = function(){

        //新建一个异步对象
        var xhq = new XMLHttpRequest();

        //给对象添加请求行、请求头、和请求主体
        xhq.open('post', 'welcome.php');

        xhq.setRequestHeader('content-type', 'application/x-www-form-urlencoded');

        xhq.send('foodName='+text.innerText);
    }

    
</script>

4）测试
打开该HTML文件–》输入信息–》点击提交按钮—》F12查看报文请求和响应情况。

通过回调函数获取响应信息

此前，通过测试了解到，在不刷新页面的前提下，已经成功发送请求报文，但是现在响应报文信息只能按F12才能查看，显然对非计算机行业人员是不友好的。那么，接下来要做的就是提取响应报文的信息，并在当前浏览器页面显示给用户了。
这主要用到回调函数（代码如下）：

//回调函数，也是写在按钮点击事件内部
 xhq.onload = function(){
     alert(xhq.responseText);
 }