Ajax的基本流程

最新推荐文章于 2022-08-02 20:30:03 发布

原创最新推荐文章于 2022-08-02 20:30:03 发布 · 427 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#Ajax的基本流程

servlet 专栏收录该内容

28 篇文章

订阅专栏

ajax的概念

局部刷新技术。不是一门新技术，是多种技术的组合。是浏览器端的技术

ajax的作用

实现在当前结果页中显示其他请求的响应内容

ajax的基本流程

创建ajax引擎对象
复写onreadystatement函数
判断ajax状态码
判断响应状态码
获取响应内容(响应内容的格式)
处理响应内容(js操作文档结构)
发送请求

<%@ 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="服务器繁忙";
					}
				}
			}
		//发送请求
		ajax.open("get","ajax");
		ajax.send(null);
	}
</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>

代码解析：

对于发送请求是get方式:

ajax.open("请求方式","请求地址");
ajax.send(请求数据");//请求数据，用get方式拼到url后面，不在send里写入

对于发送请求时post方式，把请求数据写入send中
总结：
get请求
get的请求实体拼接在URL后面，？隔开，键值对

//获取用户请求数据
		var uname=document.getElementById("uname").value;
		var data="name="+uname;
		ajax.open("get","ajax?"+data);
				ajax.send(null);

post请求
有单独的请求实体

ajax.open("post", "url");
ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
ajax.send("name=张三&pwd=123");

ajax.status可以返回每次请求的状态码
onreadystatechange 是监听函数

ajax状态码由readyState表示：0,1,2,3,4
4: 表示响应内容被成功接收

readyState值	含义
0	表示XMLHttpRequest已建立，但还未初始化，这时尚未调用open方法
1	表示open方法已经调用，但未调用send方法（已创建，未发送）
2	表示send方法已经调用，其他数据未知
3	表示请求已经成功发送，正在接受数据
4	表示数据已经成功接收