当前位置：首页 > news >正文

day37（事件轮询机制 ajaxGet执行步骤与案例（五个步骤） ajax属性 PHP返回JSON对象（两种））

news 2025/9/12 7:45:14

一.事件轮询机制

1. 无论同步还是异步代码都要经过主线程编译，同步代码开始排在执行栈(主线程)上，异步代码开    始存放在任务队列中
2. 主线程优先执行同步代码，同步代码必须前一行执行完，后一行才能执行；当异步代码完成等待状态，会通知主线程，当主线程执行完所有代码块后，会执行等待结束的异步代码
3. 当执行异步代码时，有微则先微，无微则宏
而异步任务又分为宏任务（macro-task）与微任务（micro-task）：宏任务大概包括：script（整块代码）、setTimeout、setInterval、I/O、UI交互事件、setImmediate（node环境）微任务大概包括：new promise().then(回调)、MutationObserver(html5新特新)、Object.observe(已废弃)、process.nextTick（node环境）

二.ajaxGet执行步骤（五个步骤）

执行步骤：1.创建 XMLHttpRequest对象：let xhr = new XMLHttpRequest();2.调用xhr.open("发请求的方式post/get","服务器地址",是否异步true/false)：xhr.open("get","3.ajax.txt",true);3.发送请求：xhr.send()4.xhr.onreadystatechange事件：xhr.onreadystatechange = function(){....}5.if(xhr.status==200 && xhr.readyState==4)
html:<div>嘤嘤嘤</div><button>异步交互</button>
script:let oDiv = document.querySelector("div");let oBtn = document.querySelector("button");oBtn.onclick = function(){let xhr = new XMLHttpRequest();-------------------创建 XMLHttpRequest对象xhr.open("get","3.ajax.txt",true);----调用xhr.open("发请求的方式post/get","服务器地址",是否异步true/false);xhr.send();---------------------xhr.send()发送请求xhr.onreadystatechange = function(){-------------4.等 ---> xhr.onreadystatechange事件if(xhr.status==200 && xhr.readyState==4){--------------5.听 ---> xhr.responseText 对面给说的内容fun(xhr.responseText);}}}function fun(resText){oDiv.innerHTML = resText;}

三.ajaxGet案例（三个重要点）

    1.in_array(目标对象,数组): 在数组中找目标对象，找到返回下标，找不到返回undefined2.echo在参与ajax的时候，代表返回响应的关键字，语法为：echo 响应的内容3.get的传参方式，是将请求参数携带在url上（url?key1=value1&key2=value2...）html：<input type="text"><span></span>script：let oInput = document.querySelector("input");let oSpan = document.querySelector("span");oInput.onblur = function(){let xhr = new XMLHttpRequest();xhr.open("get",`4.ajaxGet.php?userName=${oInput.value}`,true);--------get的传参方式，是将请求参数携带在url上xhr.send();xhr.onreadystatechange = function(){if(xhr.status==200 && xhr.readyState==4){fun(xhr.responseText);}}}function fun(resText){oSpan.innerHTML = resText;↓↓↓↓↓↓-----------------------------优化:前后端分离（后端尽量不要返回描述性质的字符串，尽可能返回状态码，比如0和1）if(resText == "1"){oSpan.innerHTML = "不能注册";}else{oSpan.innerHTML = "可以注册";}}php：<?php$arr = ["坤坤","凯凯","谦谦","凢凢"];---------------此处使用数组模拟数据库，省略了后端连数据库的代码$name = $_GET["userName"];if(in_array($name,$arr)){echo "1";}else{echo "0";}
?>

四.ajax属性

1.集纳onreadystatechange：通过readystate的改变去触发，只有2,3,4会触发readystate:五个状态0:刚new出来xhr对象1:调用完open方法2:调用了send方法，发送请求给服务器3:服务器接收到了请求4:服务器根据请求完成解析，准备返回响应内容status:http协议的状态200 请求响应成功404 检查url是否有问题5xx 后端服务器问题
2.readystate5个   status3个xhr.open("get/post大小写都可以","url|url?key1=vaue1...",true/false);xhr.send(get无参|post的请求参数:key1=value1&key2=value2);let xhr = new XMLHttpRequest();console.log(xhr.readyState);--------------------此处xhr.readyState值为0xhr.open("get","3.ajax.txt",true);console.log(xhr.readyState);--------------------此处xhr.readyState值为1xhr.send();onreadystatechange：通过readystate的改变去触发，只有2,3,4会触发readystate:五个状态0:刚new出来xhr对象1:调用完open方法2:调用了send方法，发送请求给服务器3:服务器接收到了请求4:服务器根据请求完成解析，准备返回响应内容status:http协议的状态200 请求响应成功404 检查url是否有问题5xx 后端服务器问题xhr.responseText：所做的所有一切，就是为了得到它xhr.onreadystatechange = function(){console.log(xhr.readyState);if(xhr.readyState==4 && xhr.status==200){fun(xhr.responseText);}}function fun(resText){console.log(resText);}

五.php返回JSON对象（两种）

<?php方式1：返回json形式字符串echo '{"1":"老王","2":"小明","3":"马好奇"}';方式2：返回键值对数组$arr = ["1"=>"老王","2"=>"小明","3"=>"小马哥"];echo json_encode($arr);-------------------------------该函数json_encode()将键值对数组转换为json字符串
?>