原生JS利用XMLHttpRequest实现无刷新获取PHP函数返回数据

• 开始
  • JavaScript

function a(){
    var xhr=new XMLHttpRequest();
    xhr.addEventListener("load",b);
    xhr.open("GET","/main.php?id=1");
    xhr.send();
    function end(){console.log(xhr.response);};
};

1.创建 XMLHttpRequest 组件

var xhr=new XMLHttpRequest();

2.创建事件监听器

xhr.addEventListener("load",b);

其中， addEventListener ()函数可填参数如下。

*.addEventListener(type, listener, options);

type
表示监听事件类型的字符串。事件目标可以是一个文档上的元素 Element,Document和Window或者任何其他支持事件的对象。
listener
当所监听的事件类型触发时，会接收到一个事件通知（实现了 Event 接口的对象）对象。listener 必须是一个实现了 EventListener 接口的对象，或者是一个函数。有关回调本身的详细信息，请参阅The event listener callback 
options 可选
一个指定有关 listener 属性的可选参数对象。可用的选项如下：
capture:  Boolean，表示 listener 会在该类型的事件捕获阶段传播到该 EventTarget 时触发。
once:  Boolean，表示 listener 在添加之后最多只调用一次。如果是 true， listener 会在其被调用之后自动移除。
passive: Boolean，设置为true时，表示 listener 永远不会调用 preventDefault()。如果 listener 仍然调用了这个函数，客户端将会忽略它并抛出一个控制台警告。查看 使用 passive 改善的滚屏性能 了解更多.
signal：AbortSignal，该 AbortSignal 的 abort() 方法被调用时，监听器会被移除。

3.初始化 XMLHttpRequest 组件

xhr.open("GET","/main.php?id=1")

此函数共有5个参数可设置，但最常用就是前三个。

第一个定义请求的方式，可选「GET」、「POST」、「PUT」、「DELETE」

第二个定义需要请求的地址。

第三个使用布尔值定义是否使用异步请求。默认为True，即使用异步进行数据请求。

4.发送请求

xhr.send();

5.设置预处理函数，接收请求后返回的数据。这里用控制台打印返回结果。

function end(){console.log(xhr.response);};