day37(事件轮询机制 ajaxGet执行步骤与案例(五个步骤) ajax属性 PHP返回JSON对象(两种))-CSDN博客
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |
一.事件轮询机制
1. 无论同步还是异步代码都要经过主线程编译同步代码开始排在执行栈(主线程)上异步代码开 始存放在任务队列中
2. 主线程优先执行同步代码同步代码必须前一行执行完后一行才能执行当异步代码完成等待状态会通知主线程当主线程执行完所有代码块后会执行等待结束的异步代码
3. 当执行异步代码时有微则先微无微则宏
而异步任务又分为宏任务macro-task与微任务micro-task
宏任务大概包括script整块代码、setTimeout、setInterval、I/O、UI交互事件、setImmediatenode环境
微任务大概包括new promise().then(回调)、MutationObserver(html5新特新)、Object.observe(已废弃)、process.nextTicknode环境
二.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(目标对象,数组): 在数组中找目标对象找到返回下标找不到返回undefined
2.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值为0
xhr.open("get","3.ajax.txt",true);
console.log(xhr.readyState);--------------------此处xhr.readyState值为1
xhr.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字符串
?>
阿里云国内75折 回扣 微信号:monov8 |
阿里云国际,腾讯云国际,低至75折。AWS 93折 免费开户实名账号 代冲值 优惠多多 微信号:monov8 飞机:@monov6 |