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

一.事件轮询机制

javascript 复制代码
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执行步骤(五个步骤)

javascript 复制代码
执行步骤:
    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案例(三个重要点)

javascript 复制代码
    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属性

javascript 复制代码
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对象(两种)

javascript 复制代码
<?php
    方式1:返回json形式字符串
    echo '{"1":"老王","2":"小明","3":"马好奇"}';

    方式2:返回键值对数组
    $arr = ["1"=>"老王","2"=>"小明","3"=>"小马哥"];
    
    echo json_encode($arr);-------------------------------该函数json_encode()将键值对数组转换为json字符串
?>
相关推荐
丁总学Java17 分钟前
微信小程序,点击bindtap事件后,没有跳转到详情页,有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
会发光的猪。1 小时前
如何在vscode中安装git详细新手教程
前端·ide·git·vscode
Mephisto.java2 小时前
【大数据学习 | kafka高级部分】kafka的kraft集群
大数据·sql·oracle·kafka·json·hbase
Mephisto.java2 小时前
【大数据学习 | kafka高级部分】kafka的文件存储原理
大数据·sql·oracle·kafka·json
YUJIANYUE2 小时前
PHP将指定文件夹下多csv文件[即多表]导入到sqlite单文件
jvm·sqlite·php
别拿曾经看以后~2 小时前
【el-form】记一例好用的el-input输入框回车调接口和el-button按钮防重点击
javascript·vue.js·elementui
我要洋人死2 小时前
导航栏及下拉菜单的实现
前端·css·css3
川石课堂软件测试3 小时前
性能测试|docker容器下搭建JMeter+Grafana+Influxdb监控可视化平台
运维·javascript·深度学习·jmeter·docker·容器·grafana