（2020-09-10）javascript_9

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”）

3.向服务器发送请求

          3.1open（method，URl，async）

                method：请求的类型：GET还是 POST

                  async：true（异步）或false（同步）

           3.2send（）/send（string）

send（）-----------------------向服务器发送请求（用于GET）

send（string）---------------向服务器发送请求（用于POST）

                                         

xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
xhttp.send("fname=Bill&lname=Gates");