如何用原生JS封装Ajax

最新推荐文章于 2023-01-04 17:30:54 发布

CaiMinYi_1207

最新推荐文章于 2023-01-04 17:30:54 发布

阅读量467

点赞数

本文链接：https://blog.csdn.net/qq_37252209/article/details/65629821

版权

编写Ajax的四个步骤：

1、创建Ajax对象；

ActiveXObject("Microsoft.XMLHTTP")

XMLHttpRequest()//IE7+, Firefox, Chrome, Opera, Safari

2、发送请求（准备资料，真正发送）；

send()

3、连接服务器；

4、接收服务器返回的数据，进一步分析处理，然后进行DOM的操作；

异步请求必须处理readystatechange事件。在异步请求中，XMLHttpRequest对象提供了readyState属性，该属性包含一个数值，每个值都代表请求生存期中的特定状态（http就绪状态）。如：

0：已经创建对象，但还没有调用open()方法。
1：已经调用open()方法，但还没有发送请求。
2：请求已经发送，标题和状态已经收到，并可用。
3：接收到来自服务器的响应。
4：接收完请求数据，表示已经完成请求。
IE7+：1，2，3，4 。没有0。

其他浏览器：2，3，4 。没有0和1。

在web浏览器中您可能经常看到过这几个状态码：

200：存在请求文件
- 401：未经授权
- 403：禁止访问
- 404：没有找到网页

原生未封装的Ajax函数如下：

get方式完整代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			window.οnlοad=function(){
				function $(id){
					return document.getElementById(id);
				}
				
				function getXHR(){
					//1号线：创建ajax对象
					var oAjax;
					if(window.XMLHttpRequest){
						//IE7+, Firefox, Chrome, Opera, Safari
						oAjax=new XMLHttpRequest();
					}
					else{
						oAjax=new ActiveXObject("Microsoft.XMLHTTP")
					}
				
					return oAjax;
				}
				
				//验证ajax对象是否创建成功
				
				$('btn').οnclick=function(){
					var xhr=getXHR();
					
					//2号线：发送请求(准备资料，真正的发送)
					//open(get,url,true)
					//第一个参数：数据传输方式 get  post
					//第二个参数：处理文件  xx.php xx.txt ,要数据：直接写路径就好；提交数据：在地址那里写数据（get方式）
					//第三个参数：同步或者异步方式，默认是异步true
					var url='/checkName.php?time='+new Date()+'&name='+$('username').value;
					xhr.open('GET',url,true);
					//send() 如果是get方式，写null或者为空
					//如果是post，参数那就直接写要传输的内容
					xhr.send(null);
					
					//4号线：接收3号线传来的数据，进行处理
					
					xhr.onreadystatechange=function(){
						//alert('现在的状态是：'+xhr.readyState);
						if(xhr.readyState==4){
							//alert(xhr.responseText);
							$('inf').innerHTML=xhr.responseText;
						}
						
						
					}
				}
	
			}
		</script>
	</head>
	<body>
		<form action="checkName.php" method="post">
			用户名：<input type="text" id="username" /><input type="button" name="btn" id="btn" value="验证" /><span id="inf"></span><br />
			密码：<input type="password" /><br />
			
			<input type="submit" value="注册"/>
		</form>
	</body>
</html>

处理页面checkName.php

<?php
	
	//3号线：获取ajax传来的信息，做处理，再返回给ajax：后台做，或者后台协作
	$userName=$_GET['name'];
	
	if($userName=='admin'){ //把内容拿到，进行判断，输出信息返回给ajax
		echo '该用户名不能使用'; 
	}
	
	else{
		echo '该用户名能使用';
	}
	
?>

原生封装的Ajax函数如下：

//参数有四个：传输的方式，路径，数据，回调函数
function ajax(method,url,data,fnsuccess){
	//1号线：创建ajax对象
	
	var xhr;
	if(window.XMLHttpRequest){
		xhr=new XMLHttpRequest();
	}
	else{
		xhr=new ActiveXObject('Microsoft.XMLHTTP');
		
	}
	
	//2号线：发送http请求（准备数据，真正的发送）
	
	if(method=='GET' && data){
		//如果是get方式，并且有data：传数据到服务器
		url=url+'?'+data;
		
	}
	xhr.open(method,url,true);
	
	if(method=='GET'){
		xhr.send(null);
	}
	else{
		xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
		xhr.send(data);
	}
	
	
	//4号线：拿到的数据返回给调用ajax函数的地方
	
	xhr.onreadystatechange=function(){
		if(xhr.readyState==4){
			if(xhr.status==200){
				if(fnsuccess){
					fnsuccess(xhr.responseText);//注意这里只能接收字符串，json和html数据。如果传过来的是xml数据格式，要换用responseXML属性
				}
				
			}
			else{
				alert('出差了，出错状态是：'+xhr.status);
			}
		}
	}
}

CaiMinYi_1207

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
如何用原生JS封装Ajax

编写Ajax的四个步骤：1、创建Ajax对象；ActiveXObject("Microsoft.XMLHTTP")XMLHttpRequest()//IE7+, Firefox, Chrome, Opera, Safari2、发送请求（准备资料，真正发送）；send()3、连接服务器；4、接收服务器返回的数据，进一步分析处理，然后进行DOM的操作；
复制链接

扫一扫