同步请求和异步请求| 学习笔记

简介: 快速学习同步请求和异步请求。

开发者学堂课程【Ajax 前端开发入门与实战同步请求和异步请求】学习笔记,与课程紧密联系,让用户快速学习知识。

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


同步请求和异步请求

 

1、将Ajax请求改为同步请求。

xhr.open(get’,’./server/checkUsername.php?username='+uname,false)

这样做的话,会有两个问题。

第一:界面会卡顿,卡顿多长时间,取决于网络速度。

第二:xhr.onreadystatechange 的回调将不会被执行,需要修改代码后才能获取到数据,将回调去除即可。

username.onblur = function(){

var usernameValue = username.value;

//将 usernameValue 提交给服务器,有服务器进行唯一性的校验

//1.创建对象,兼容处理

var xhr = null;

if(window.XMLHttpRequest)

xhr = new XMLHttpRequest();

}else {

xhr = new ActiveXObject(“Microsoft.XMLHTTP");

}

//2.准备发送

xhr.open("get",”./server/checkUsername.php?uname= +

usernameValue,false);//false,用户是操作不了界面的,这是同步与异步的区别

//3.执行发送

xhr.send(null);

//制定回调函数

//xhr.onreadystatechange = function(){

if(xhr.readyState ==4)(

if(xhr.status == 200)

var result = xhr.responseText;

varusername_result =document.querySelector(“#username_result");

if(result == "ok"){

username_result.innerText = "用户可以使用";

}else{

username_result.innerText = "用户已经被注册";

}

}

}

}

同步请求网页模拟网速慢的情况下

<?php

//用户名输入后网络延迟5秒的时间后再输入

sleep(5);

$username = $_GET["uname"];

if($username ==’zhangsan’){

echo "error";

} else{

echo "ok";

}

?>

补充知识:

image.png

网页展示:

image.png

输入用户名,等待5s后才可操作下一步,此时是同步的请求,这是 true 和 false 之间的区别,true 是同步,false 是异步。

相关文章
|
8月前
|
JSON 前端开发 JavaScript
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(三)
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(三)
|
8月前
|
缓存 JSON 前端开发
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(二)
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(二)
|
8月前
|
XML 数据采集 Web App开发
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)(一)
AJAX(GET POST请求、 jQuery axios 发送请求、跨域--cors、请求超时、网络异常、放弃请求、重复发送请求)
|
10月前
|
JSON 前端开发 数据格式
axios完成 ajax请求的发送
axios完成 ajax请求的发送
|
10月前
|
前端开发 JavaScript 应用服务中间件
JQury实现ajax异步请求
JQury实现ajax异步请求
|
前端开发
ajax没有响应问题
ajax没有响应问题
ajax没有响应问题
|
存储
Ajax-14:请求重复发送问题
Ajax-14:请求重复发送问题
95 0
Ajax-14:请求重复发送问题
nodejs4.x框架能收到异步回调请求不能正常解析数据
说明:      目前商户遇到nodejs基于express3.x框架return_url、notify_url能收到通知并解析数据。针对嫁接到express4.x框架能收到异步请求,req.body为空,无法解析异步数据。
374 0
|
安全 Android开发
网络请求
●网络请求 OkHttp (Square出品,一个Http与Http/2的客户端) Retrofit (Square出品,类型安全的Http客户端) Volley (Google推出的Android异步网络请求框架和图片加载框架,使用的App...
711 0
|
前端开发 数据格式 JSON

热门文章

最新文章