AJAX新手必会

最新推荐文章于 2024-09-01 15:30:33 发布

zxha6868

最新推荐文章于 2024-09-01 15:30:33 发布

阅读量93

点赞数

文章标签： java ajax js

本文链接：https://blog.csdn.net/zxha6868/article/details/108331783

版权

AJAX

全局刷新和局部刷新

全局刷新：浏览器在得到服务器端返回的数据后只能展示得到的数据，不能同时展现浏览器以前的内容

局部刷新：浏览器在得到服务器端返回的数据后同时展示原有的数据和得到的数据

全局刷新和局部刷新的工作原理

全局刷新的工作原理

1.必须由浏览器负责将{请求协议包}推送到服务器

2.导致服务器端相应协议包直接推送到浏览器内存中

3.导致浏览器内存中原有的数据被覆盖

4.导致此时浏览器在执行展示数据时只能展示得到相应数据无法展示原有的数据

局部刷新的工作原理

1.必须禁止有浏览器想发送请求（不能使用超链接 form window location等）

2.有浏览器内存中的一个脚本对象代替浏览器将请求协议包发送服务器

3.导致服务器返回响应包直接推送到这个脚本上

4.导致脚本对象呗覆盖但是此时浏览器内存中绝大多数内容没有受到影响

5.开发人员从脚本对象上取出相应数据更新到浏览器中指定的标签中

6.此时浏览器展示数据时就可以既展示相应结果又同时展示原有的数据

AJAX客户端技术

可以帮助开发人员管理浏览器中的异步请求对象（就是脚本对象）

比如：命令异步请求对象向服务端发送请求协议包

读取异步请求对象接收的响应数据

开发步骤

1.在浏览器内存中创建一个脚本对象（异步请求对象）

2.为异步请求对象添加工作监听器

帮助开发人员确认何时从异步请求对象身上得到服务端返回的响应数据

3.初始化异步请求对象

步骤：

1.通知异步请求对象采用何种方式发送请求协议包

2.通知异步请求对象本次要访问的资源文件地址

3.通知异步请求对象在其工作期间，浏览器是否等待他结束在往下运行{同步还是异步}

4.命令通知异步请求对象代替服务器发送请求

异步请求状态的五种工作命令

readystate属性中存储当前的工作状态

XMLHttp.readyState	状态	发生位置
0	异步请求对象已被创建完毕	Var XMLHttp=New XMLHttpRequest（）
1	异步请求对象已被初始化完毕	XMLHttp.Open（请求方式，请求地址，异步处理）
2	异步请求对象已经发送请求协议包正常情况下服务端此时正在处理这个请求	XMLHttp.send（）
3	异步请求对象已经得到服务器返回的响应包此时异步请求对象正在解析响应包中内容
4	异步请求对象已经解析数据完毕。此时数据是符合脚本规范的数据	开发人员提取响应数据

如何从异步请求对象身上得到响应数据进行局部刷新

xmlHttp.onreadystatechange = function(){
If(xmlHttp.readystate==4&&smlHttp.status == 200){
//200代表传回的数据有效 500代表无效 一堆乱码
Var data = xmlHttp.responseText;
Callback(data)
}
}
Function callback(param){
$(“div”).text(param)
}

AJAX例子

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
	<script type="text/javascript">
		function checkUsername(username){
			
			//发送ajax请求 验证用户名是否可用
			//四个步骤  注意 ajax发送请求是靠浏览器内置的对象 XMLHTTPRequest
			//使用这个对象 可以再浏览器当中单独创建一个新的浏览器线程 通过浏览器线程发送这个请求
			//达到异步效果
			//1.创建ajax核心对象 （浏览器内置对象 可以直接使用）
			var xhr;
			xhr=new XMLHttpRequest();
			//alert(xhr);
			//2.注册回调函数
			/*
			程序执行到这里的时候 后面的回调函数并不会执行 只是将回调函数注册给了xhr等xhr对象的readyState发生改变的时候 后面的回调函数才能执行
			改变的状态0-4
			0.请求未初始化
			1.服务器连接已建立
			2.请求已接收
			3.请求处理中
			4.请求已完成 且相应已就绪
			*/
			xhr.onreadystatechange = function(){//服务器发生一次请求回调函数执行一次
				if(xhr.readyState==4 &&xhr.status==200){//200代表OK
					//value=xhr.responseText;
					//alert(value);
				var one=document.getElementById("one");
					one.innerHTML=xhr.responseText;
				}else{
					alert(xhr.status);
				}
			}
		}
		//给按钮对象注册一个鼠标单击事件 当按钮发生鼠标单击时候 执行回调函数
		//mybtn.onclick()
		/*
		3.开启浏览器和服务器之间的通道
		method：指定请求方式为get或者post
		url：请求路径
		async：true/false （true代表支持异步）
		*/
		xhr.open("GET","/checkusername?username="+username,true);
		//4.发送ajax请求
		xhr.send();//这里才会发送请求
	</script>
	<input type="text" name = "username" οnblur="checkUsername(this.value)"><span id="one"></span><br>
	<input type="password" name = "password"><br>
</body>
</html>

zxha6868

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
AJAX新手必会

AJAX全局刷新和局部刷新全局刷新：浏览器在得到服务器端返回的数据后只能展示得到的数据，不能同时展现浏览器以前的内容局部刷新：浏览器在得到服务器端返回的数据后同时展示原有的数据和得到的数据全局刷新和局部刷新的工作原理全局刷新的工作原理 1.必须由浏览器负责将{请求协议包}推送到服务器 2.导致服务器端相应协议包直接推送到浏览器内存中 3.导致浏览器内存中原有的数据被覆盖 4.导致此时浏览器在执行展示数据时只能展示得到相应数据无法展示原有的数据局部刷新的工作原理1.必须禁
复制链接

扫一扫