Ajax的异步和同步

最新推荐文章于 2023-06-23 16:08:14 发布

Re_view

最新推荐文章于 2023-06-23 16:08:14 发布

阅读量143

点赞数

分类专栏： servlet 文章标签： Ajax的异步和同步

本文链接：https://blog.csdn.net/Re_view/article/details/99059864

版权

servlet 专栏收录该内容

28 篇文章 0 订阅

订阅专栏

使用Ajax的过程

Ajax访问原理
Ajax的基本使用流程
Ajax的状态吗
Ajax的异步和同步
Ajax的请求
Ajax的响应数据类型
json
Ajax的封装
Ajax案例

概念

同步：当发送请求后，还有要打印的语句，那么先执行打印语句，再继续执行等待响应结果
异步：当发送请求后，还有要打印的语句，那么继续执行等待响应结果，同时开启一个子线程执行打印语句

代码举例

ajax.open(method,urL,async,username,password)
async：设置同步代码执行还是异步代码执行
true代表异步，默认是异步，false代表同步
举例：
ajax.open(“get”,“ajax”,true);
默认第三个参数是true，代表默认异步；改成false就是同步

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript">
	function getData(){		
		//创建ajax引擎对象
			var ajax;
			if(window.XMLHttpRequest){//火狐
				ajax=new XMLHttpRequest();
			}else if(window.ActiveXObject){//ie
				ajax=new ActiveXObject("Msxml2. XMLHTTP");
			}
		
			//复写onreadystatement函数
			ajax.onreadystatechange=function(){
				//判断Ajax状态吗
				if(ajax.readyState==4){
					//判断响应状态吗
					if(ajax.status==200){
						//获取响应内容
						var result=ajax.responseText;
						//处理响应内容
							//获取元素对象
							var showdiv=document.getElementById("showdiv");
							showdiv.innerHTML=result;
					}else if(ajax.status==404){
						//获取元素对象
						var showdiv=document.getElementById("showdiv");
						showdiv.innerHTML="请求资源不存在";
					}else if(ajax.status==500){
						//获取元素对象
						var showdiv=document.getElementById("showdiv");
						showdiv.innerHTML="服务器繁忙";
					}
				}else{
					//获取元素对象
						var showdiv=document.getElementById("showdiv");
						showdiv.innerHTML="稍等...";
				}
			}
		//发送请求
		ajax.open("get","ajax",true);
		ajax.send(null);
		alert("哈哈");
	}
</script>
<style type="text/css">
	#showdiv{
		border:solid 1px;
		width:200px;
		height:100px; 
	}
</style>
</head>
<body>
	<h3>欢迎登录</h3>
	<hr>
	<input type="button" value="测试 " onclick="getData()"/>
	<div id="showdiv"></div>
</body>
</html>