细节完善_考虑同步异步情况| 学习笔记

简介: 快速学习细节完善_考虑同步异步情况。

开发者学堂课程【Ajax 前端开发入门与实战细节完善_考虑同步异步情况】学习笔记,与课程紧密联系,让用户快速学习知识。

课程地址:https://developer.aliyun.com/learning/course/595/detail/8535


细节完善_考虑同步异步情况 


把 myAjax 分装方法测试一遍之后发现没问题,接下来细节完善。

先看 function myAjax(type,url,params,datatype,callback) 先看 params ,对于params 来说如果它是 get 请求的话会与url进行一个拼接,但是如果没有传递params,那么 params 默认值是什么?

默认值为 null,当一个 null 与字符串进行拼接会得到 null--->?null 对与后面?null明显不是想得的结果。

Function myAjax(type,url,params,datatype,callback){

//1 2 3 4

var xhr =null;

if(window.XMLHttpRequest){

xhr = new XMLHttpRequest();

}else{

xhr = new ActionXObject(“Microsoft.XMLHTTP”);

}

//null--->?null

if(type == “get”){

url +=”?” + params;

}

所以对于某些请求没有仓促的情况下怎么样不传递 params ,接着在作为字符拼接时需要做一个条件判断,判断 params 只有在存在的情况下,才需要做一个与 url 的拼接,除此之外如果 params 存在并且不等于空的字符串,这是对 params 进行的条件判断。

//null--->?null

if(type == “get”){

if(params && params != “”){

url += “?” +params;

}

}

xhr.open(type,url,true);

if(type == “get”){

xhr.send(null);

myAjax 方法是很多人进行调用的,所以考虑多些不是坏事。

function myAjax(type,url,params,datatype,callback) 中 datatype,如果 datatype不传递问题也不大,因为不传递 datatype 他就不满足第一个条件,不满足这个条件它一定会到最后一个 else 中,所以对于 datatype 不需要考虑他的异常情况。

if(datatype == “json”){

result = xhr.responsText;

result = JSON.parse(result);

}else if)(datatype == “xml”){

result = xhr.responseXML;

}else{

result = xhr.responseText;

}

if(){

最后一个参数 callback,callback 有时也会忘了传递或者不传递,但如果 callback 不传递,那么 callback 支持一个 null,那支持一个 null 的方法调用,这里面必然会出现错误,所以为了考虑周全,这里必须判断 callback 存在的情况下,需要把callback 进行一个方法的调用,因为 callback 传递进来的一定是个方法。

if(datatype == “json”){

result = xhr.responsText;

result = JSON.parse(result);

}else if)(datatype == “xml”){

result = xhr.responseXML;

}else{

result = xhr.responseText;

}

if(callback){

callback(result);

}

这就是考虑的两个细节,

1. 对于 get 请求来讲,作为字符串拼接时要保证 params 是存在的。

2.callback 方法调用时保证 callback 是存在的。

接着可以考虑同步或者异步的请求,现在统一把他作为一个异步请求,

如:xhr.open(type,url,true);

if(type == “get”){

xhr.send(null);

}else if(type == “post”)

作为一个比较通用的方法需要把情况考虑周全,由调用者来决定这个请求是同步的还是异步的,这里需要创建一个新的参数 async,也就如 function myAjax(type,url,params,datatype,callback),接着把 async 放到 xhr.open(type,url,async);

由调用者来决定他是同步还是异步,一旦把这个参数给传递过来,这里面的值就会有两种情况,一种为 true 一种为 false ,如果为 true 那他是异步走原来的逻辑就可以,但如果他是同步的话,这里需要做一个条件判断,如果 sync 他是一个异步请求,async 加上一个 a 是异步,如果是异步就写和异步相同的逻辑,需要做一个

onreadyystatechange 一个事件的监听,

if(async){

xhr,onreadstatechange = function(){

if(xhr.readyState == 4){

if(xhr.status == 200){

var result = null;

if(datatype == “json”){

result = xhr.responseText;

result = JSON.parse(result);

}

if(callback){

callback(result);

}

}

}

};

}

接着看一下 else 情况,else 是一个同步的请求,那不需要对 xhr 进行一个onreadystatechange 监听,直接获取想要的数据,把代码复制到后面。

最后在 username 传入最后一个参数 false

myAjax(Type,url,params,datatype,function(result){

var username_result =document.querySelector(“#username_result”);

if(result == “ok”){

username_result.innerText = “用户名可以使用”;

}else{

username_result.innerText = ”用户名已被注册”;

}

},false);

};

后面两个请求同一位置也需要传入 true,接下来就简单测试,当输入用户名卡死页面中,原因是在 checkUsername 给他睡了5秒种,当他请求时服务器没返回

那么代码就会一直卡死在:xhr.send(params); 的 send 方法中。

这就是三个细节的优化和操作。

目录
打赏
0
0
0
0
216
分享
相关文章
深入理解Dockerfile:构建镜像的详细解释与常用命令(下)
Docker 是一种流行的容器化平台,可将应用程序和其依赖项打包到一个独立的、可移植的容器中。Dockerfile 是构建 Docker 镜像的文本文件,它包含了一系列的指令和配置,用于定义镜像的构建过程。本文将深入解释 Dockerfile 的工作原理,并介绍常用的 Dockerfile 指令和构建命令,以帮助读者更好地理解和使用 Docker。
277 0
Video-T1:视频生成实时手术刀!清华腾讯「帧树算法」终结闪烁抖动
清华大学与腾讯联合推出的Video-T1技术,通过测试时扩展(TTS)和Tree-of-Frames方法,显著提升视频生成的连贯性与文本匹配度,为影视制作、游戏开发等领域带来突破性解决方案。
140 4
Video-T1:视频生成实时手术刀!清华腾讯「帧树算法」终结闪烁抖动
使用DataWorks Notebook实现智能图片标注,给你的图片加个“注释”
本文介绍如何使用DataWorks Notebook结合视觉识别模型RAM和自然语言处理模型BERT实现多模态图片标注,为智能内容生成和多模态数据分析的广泛应用提供支持。
阿里云服务器详细介绍_ECS云服务器优势_云服务器问题解答FAQ
阿里云服务器ECS是一种安全可靠的云计算服务,具备弹性伸缩、高性能及易用性等特点。提供多样化的实例规格,如经济型e、通用算力型u1、计算型c7等,满足不同业务需求。用户可根据业务规模选择合适的计算架构、存储类型及付费模式(包年包月、按量付费等),同时享受专有网络VPC、快照备份及丰富的镜像类型支持。此外,ECS支持免费试用,帮助企业与个人快速上手。
Spring之国际化:i18n
【1月更文挑战第17天】 一、i18n概述 二、Java国际化 三、Spring6国际化 1、MessageSource接口 2、使用Spring6国际化
299 1
一个功能丰富的SQL审核查询平台
一个功能丰富的SQL审核查询平台
157 2
超级好用的C++实用库之网络
超级好用的C++实用库之网络
130 0
同等参数中最强,在苹果15Pro上也能运行!谷歌又“卷”出了端侧小模型 Gemma 2 2B...
在AI技术快速演进的背景下,谷歌推出的Gemma 2 2B模型以其小巧体积和卓越性能引起关注。这款仅20亿参数的轻量级语言模型通过知识蒸馏技术,展现出超越大型模型的能力,在Chatbot Arena测试中获得1130分,超过了GPT-3.5-Turbo等竞争对手。Gemma 2 2B不仅性能出众,还能在多种硬件上高效运行,特别适合本地设备。此外,它的开源特性及易于使用的特性降低了AI应用门槛。伴随Gemma 2 2B发布的还有ShieldGemma和Gemma Scope,前者用于过滤有害内容,后者则提高了模型的透明度和可解释性,共同推动AI技术的负责任发展。
255 2
蓝易云 - Ubuntu18.04交叉编译curl-7.61.0
这样,curl就被交叉编译并安装到了/usr/arm-linux-gnueabihf目录下。你可以将其拷贝到目标机器上进行使用。
317 2
AI助理

你好,我是AI助理

可以解答问题、推荐解决方案等

登录插画

登录以查看您的控制台资源

管理云资源
状态一览
快捷访问