基于AJAX实现异步刷新技术

最新推荐文章于 2023-02-01 22:08:44 发布

JavaJian_

最新推荐文章于 2023-02-01 22:08:44 发布

阅读量732

点赞数

本文链接：https://blog.csdn.net/qq_33067461/article/details/77624589

版权

本文介绍AJAX（异步的javascript and xml）的概念及其核心组件XMLHttpRequest，并通过一个GET请求的封装函数示例展示了如何实现局部页面的异步刷新，避免因页面整体刷新导致用户已输入内容丢失。

摘要由CSDN通过智能技术生成

AJAX:

异步的javascript and xml;提供一个能够与后台交互的重要组件,XMlHttpRequest,通过一种通用的数据交换格式可以实现前后端数据的交互:json; 通过AJAX实现异步刷新技术

异步刷新顾名思义,即保持原本页面不刷新的情况下局部刷新.举个简单的例子:你肯定遇到过注册时信息手误填错的时候,或者账号被注册,等你点完确定按钮后,提示错误重新填写后,之前填写的内容全都没了,又要重新填写.有了异步刷新技术就不需要担心这种问题了,因为他保持原页面不刷新而后台局部刷新.

具体实现:

//封装一个用于发送get请求的ajax函数
//参数1:需要请求的服务器地址
//参数2:需要执行的回调函数

function ajaxGet(url,callback){
				var xhr;
				if(window.XMLHttpRequest){
					xhr = new XMLHttpRequest();
				}else{
					xhr = new ActiveXObject('microsoft.XMLHTTP');
				}
				//打开连接
				xhr.open('get',url,true);
				//发送请求
				xhr.send();
				//当请求状态发生改变时触发回调函数
				xhr.onreadystatechange = function(){
					if(xhr.readyState == 4 && xhr.status == 200){
						var data = xhr.responseText;
						data = JSON.parse(data);
						//闭包
						callback(data);
						
					}
				}
			}

而使用的时候,只需要调用ajaxGet函数,参数1位需要请求的地址,参数2为需要执行的回调函数(参数为data用于接收data).

这样就实现了异步刷新.