ajax封装

最新推荐文章于 2024-09-25 08:47:38 发布

游尘牙

最新推荐文章于 2024-09-25 08:47:38 发布

阅读量274

点赞数

分类专栏： ajax 文章标签： ajax xmlhttprequest 浏览器

本文链接：https://blog.csdn.net/dydjtb/article/details/72638922

版权

ajax 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

ajax的流程：

浏览器需要向服务器发送或者获取数据，因此需要先创建一个ajax对象；然后连接服务器，把请求的消息发送过去；服务器接收到请求，处理请求，把请求处理结果返回来给浏览器；浏览器根据返回结果做出处理。

具体步骤：

1、创建Ajax对象

new XMLHttpRequest()

new ActiveXObject("Microsoft.XMLHTTP")//兼容早期IE

2、连接服务器

open(method,url,async)

3、发送请求

send(string)

4、接收返回值

respondText/respondXML

其中在连接服务器期间，会有一个请求状态监控，由此判断请求的成功与否

onreadystatechange()函数用于执行监控

readyState状态有

0：请求未初始化
1：服务器连接已建立
2：请求已接收
3：请求处理中
4：请求已完成，且响应已就绪

status状态有

1xx~5xx

其中用到的是

200表示请求成功

404表示请求页面为找到

以下为函数的封装

function ajax(method,url,data,fnsuccess){
	//1、创建请求
	var xhr;
	if(window.XMLHttpRequest){
		xhr = new XMLHttpRequest();
	}else{
		xhr = new ActiveXObject("Microsoft.XMLHTTP");//兼容低版本IE
	}
	//2、发送请求
	if(method == 'get' && data){
		url = url + '?' + data;
	}
	xhr.open('get',url,true);
	//判断发送方式
	if(method == 'post'){
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
	}
	if(method == "get"){
		xhr.send(null);
	}else{
		xhr.send(data);
	}

	//4、处理返回数据
	xhr.onreadystatechange = function(){
		if(xhr.readyState == 4){
			if(xhr.status == 200){
				if(fnsuccess){//如果存在回调函数
					fnsuccess(xhr.responseText);//xhr.responseText作为参数传入回调函数
				}
			}else{
				alert('出错了,Err：' + xhr.status);
			}
		}
	}
}

例子验证：

用户名验证

php文件内容

<?php
	//3、处理请求结果
	$username = $_GET['name'];
	if($username == 'admin'){
		echo '非法用户名';
	}else if($username == 'mandi'){
		echo '已经存在的用户名';
	}else{
		echo '可以使用';
	}

?>

html文件内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ajax</title>
		<script type="text/javascript" src="ajax.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				var oTxt = document.querySelector('.text');
				var oBox = document.querySelector('.box');
				oTxt.onkeyup = function(){
					var data = 'name='+oTxt.value;
					ajax('get','checkName.php',data,function(str){
						oBox.innerHTML = str;
					});
				}
			}
		</script>
	</head>
	<body>
		<input type="text" class="text"/>
		<div class="box"></div>
	</body>
</html>

读取文件内容

txt文件内容

fn([1,2,3,4,5])

html内容

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>ajax</title>
		<script type="text/javascript" src="ajax.js"></script>
		<script type="text/javascript">
			window.onload = function(){
				var oTxt = document.querySelector('.text');
				var oBox = document.querySelector('.box');
				oTxt.onkeyup = function(){
					var data = 'name='+oTxt.value;
					ajax('get','data.txt',data,function(str){
						oBox.innerHTML = str;
					});
				}
			}
		</script>
	</head>
	<body>
		<input type="text" class="text"/>
		<div class="box"></div>
	</body>
</html>