JavaScript

最新推荐文章于 2023-07-01 14:16:13 发布

270年前

最新推荐文章于 2023-07-01 14:16:13 发布

阅读量135

点赞数

文章标签： js javascript

本文链接：https://blog.youkuaiyun.com/weixin_49344258/article/details/108521026

版权

https://www.w3school.com.cn/js/index.asp

1.JavaScript异步编程[JavaScript AJAX]

什么时候用异步编程

在前端编程中（甚至后端有时也是这样），当一个事件没有结束时，界面将无法处理其他请求。现在有一个按钮，如果我们设置他的onclick事件为一个死循环，那么当这个按钮按下，整个网页都会失去响应。

为了避免这个情况的发生，我们常常用子线程来完成一些可能消耗时间足够长以至于被用户察觉的事情，比如读取一个大文件或者发出一个网络请求。因为子线程独立于主线程，所有即使出现阻塞也不会影响主线程的运行。但是子线程有一个局限：一旦发射之后就会与主线程失去同步，我们无法确定它的结束，如果结束之后需要处理一些失去，比如处理来自服务器的信息，我们无法将他合并到主线程中去的。

为了解决这个问题，JavaScript中的异步操作函数往往通过回调函数来实现异步任务的结果处理。JavaScript中的异步操作时通过回调函数，将异步操作函数的执行结果重新合并到主程序的执行顺序上来。

实例代码：

	//定义HttpRequest
		var xmlhttp;
		//创建HttpRequest
		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;
			}
		 }
		};

总结步骤：

1.创建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"）