JavaScript_基础简介9

最新推荐文章于 2024-08-19 15:13:57 发布

H之一

最新推荐文章于 2024-08-19 15:13:57 发布

阅读量271

点赞数

分类专栏： JavaScript 前端文章标签： javascript

本文链接：https://blog.csdn.net/H_zhiyi/article/details/108527996

版权

前端同时被 2 个专栏收录

39 篇文章 0 订阅

订阅专栏

JavaScript

27 篇文章 0 订阅

订阅专栏

1. JavaScript 异步编程 [javascript AJAX]
简单来理解就是：同步按你的代码顺序执行，异步不按照代码顺序执行，异步的执行效果更高.
在这里插入图片描述
什么时候用异步编程
在前端编程中（甚至后端有时也是这样）,当一个事件没有结束时，界面将无法处理其他请求。现在有一个按钮，如果我们设置它的 onclick 事件为一个死循环，那么当这个按钮按下，整个网页将失去响应。
为了避免这种情况的发生，我们常常用子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情，比如读取一个大文件或者发出一个网络请求。因为子线程独立于主线程，所以即使出现阻塞也不会影响主线程的运行。但是子线程有一个局限：一旦发射了以后就会与主线程失去同步，我们无法确定它的结束，如果结束之后需要处理一些事情，比如处理来自服务器的信息，我们是无法将它合并到主线程中去的。
为了解决这个问题，JavaScript 中的异步操作函数往往通过回调函数来实现异步任务的结果处理。JavaScript 中的异步操作是通过回调函数，将异步操作函数的执行结果重新合并到主程序的执行顺序上来。
实例代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript">
			//定义 HttpRequest
			var xmlhttp
			//创建xmlhttp;
			if(window.XMLHttpRequest){
				//IE7+,Firefox,Chrome,opera,safari 浏览器执行代码
				xmlhttp=new XMLHttpRequest();
				
			}else{
				//IE6,IE5 浏览器执行代码
				xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
			}
			//定义一个被发送的请求连接
			var url="login?username="+username+"&password="+Password;
			//打开链接
			xmlhttp.open("GET",url,true);
			//发送
			xmlhttp.send();
			//请求发送以后的处理动作
			xmlhttp.onreadystatechange=function(){
				if(xmlhttp.readyState==4 && xmlhttp.status==200){
					//msg[String]---{"res":true}
					//         ---{"res":false,"msg":用户名密码错误！}
					var msg=xmlhttp.responseText;
					//将Json字符换装换成Json对象
					var obj = eval('('+msg+')');
					if(obj.res){
						//跳转到success.html
						//在同当前窗口中打开窗口
						window.location.href="success.html";
						//在另外新建窗口中打开窗口
						//window.open("success.html","blank");
					}else{
						//显示错误提示
						document.getElementById("error").innerHTML=obj.msg;
					}
				}
			}
		</script>
	</head>
	<body>
	</body>
</html>

总结步骤:

创建HttpRequest对象
我们需要判断浏览器，不同的浏览器创建这个HttpRequest对象的时候，是使用的对象不同
window.XMLHttpRequest-----IE7+, Firefox, Chrome, Opera, Safari 浏览器— XMLHttpRequest
----IE5,IE6浏览器------ActiveXObject(“Microsoft.XMLHTTP”);
2.请求发送以后的处理动作
XMLHttpRequest 对象属性

属性	描述
onreadystatechange	定义当 readyState 属性发生变化时被调用的函数
readyState	保存 XMLHttpRequest 的状态。 0：请求未初始化 1：服务器连接已建立 2：请求已收到 3：正在处理请求 4：请求已完成且响应已就绪

responseText	以字符串返回响应数据
responseXML	以 XML 数据返回响应数据
status	返回请求的状态号 200: "OK" 403: "Forbidden" 404: "Not Found" 如需完整列表请访问 Http 消息参考手册

statusText	返回状态文本（比如 “OK” 或 “Not Found”）

3.向服务器发送请求
3.1.open(method, url, async)
method：请求的类型：GET 还是 POST
url：服务器（文件）位置
async：true（异步）或 false（同步）
3.2 send()/send(string)

send()	向服务器发送请求（用于 GET）
send(string)	向服务器发送请求（用于 POST） xhttp.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”); xhttp.send(“fname=Bill&lname=Gates”);