原生js封装ajax函数

最新推荐文章于 2021-09-12 16:53:15 发布

cmseric

最新推荐文章于 2021-09-12 16:53:15 发布

阅读量497

点赞数

本文链接：https://blog.csdn.net/baidu_33352521/article/details/65448624

版权

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);
			}
		}
	}
}

ajax(异步javascript xml)功能：能够刷新局部网页数据而不是重新加载整个网页。

ajax运作的四个步骤：

第一步，创建xmlhttprequest对象，var xmlhttp =new XMLHttpRequest（);XMLHttpRequest对象用来和服务器交换数据。

var xhr;
	if(window.XMLHttpRequest){
		xhr=new XMLHttpRequest();
	}
	else{
		xhr=new ActiveXObject('Microsoft.XMLHTTP');
	}

第二步，使用xmlhttprequest对象的open（）和send（）方法发送资源请求给服务器。

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);
	}

第三步，使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。（后台的工作）

第四步，onreadystatechange函数，当发送请求到服务器，我们想要服务器响应执行一些功能就需要使用onreadystatechange函数，每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数。

xhr.onreadystatechange=function(){
		if(xhr.readyState==4){
			if(xhr.status==200){
				if(fnsuccess){
					fnsuccess(xhr.responseText);//注意这里只能接收字符串，json和html数据。如果传过来的是xml数据格式，要换成responseXML属性
				}
			}
			else{
				alert('出错了，出错状态是：'+xhr.status);
			}
		}
	}

封装ajax函数，需要考虑变动的地方有：传输方式（method）、路径（url）、传输数据（data）、回调函数（fnsuccess）等。

下面以一个表单验证为例说明：

html部分

<html> 
<head> 
<title>异步表单验证</title> 
<script type='text/javascript' src='jquery.js' ></script> 
<script> 
function checkname(){ 
//$("input[name='name']").val() 
$.ajax({ 
type:"get", 
url:'index.php', 
data:"name="+$("input[name='name']").val(), 
success:function(msg){ 
$("#show").append(msg); 
} 
}); 

} 
</script> 
</head> 
<body> 
<form name='form'> 
<input name='name' type='text' οnblur='checkname();'> 
<span id='show'></span><br /> 
<input type='submit' name='submit' value='提交' /> 
</form> 
</body> 
</html>

php部分

<?php
	header("Content-Type: text/html;charset=utf-8");
	//告诉浏览器不要缓存数据
	header("Cache-Control: no-cache");
	
	$username=$_GET['name'];
	
	//php的方法:用日记文件来检测ajax是否成功传数据到该页面
	
	file_put_contents("d:/mylog.log", $username."\r\n",FILE_APPEND);
	
	if($username=='admin'){
		echo '该用户名不合法';
	}
	else if($username=='malin'){
		echo '该用户名已经被注册啦';
	}
	else{
		echo '该用户名可以被注册';
	}
	
?>

运行结果示例：

cmseric

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
原生js封装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请求（准
复制链接

扫一扫