Ajax的封装

最新推荐文章于 2023-07-29 16:39:29 发布

Re_view

最新推荐文章于 2023-07-29 16:39:29 发布

阅读量171

点赞数

分类专栏： servlet 文章标签： Ajax的封装

本文链接：https://blog.youkuaiyun.com/Re_view/article/details/99109303

版权

servlet 专栏收录该内容

28 篇文章

订阅专栏

封装

先将封装内容放到一个js文件中,其中：
method:
请求方式，值为get或者post
url：请求地址
data:没有值需要传入null
有请求数据则传入字符串数据，格式为"a=1&b=2";
deal200:
接受一个带有一个形参的js函数对象，形参接收的实参是ajax引擎对象
deal404：接受一个js函数对象
deal500：接受一个js函数对象

function myAjax(method,url,data,deal200,deal404,deal500,async){		
		//创建ajax引擎对象
			var ajax=getAjax();
			//复写onreadystatement函数
			ajax.onreadystatechange=function(){
				//判断Ajax状态吗
				if(ajax.readyState==4){
					//判断响应状态吗
					if(ajax.status==200){
						if(deal200){
							deal200(ajax);
						}
					}else if(ajax.status==404){
						if(deal404){
							deal404();
						}						
					}else if(ajax.status==500){
						if(deal500){
							deal500();
						}
					}
				}
			}
		//发送请求
		if("get"==method){
			ajax.open("get",url+(data==null?"":"?"+data),async);
			ajax.send(null);
		}else if("post"==method){
			ajax.open("post",url,async);
			ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			ajax.send(data);
		}
		
	}	
/* --------------------------------------------------------------------------- */
function getAjax(){
	var ajax;
	if(window.XMLHttpRequest){//火狐
		ajax=new XMLHttpRequest();
	}else if(window.ActiveXObject){//ie
		ajax=new ActiveXObject("Msxml2.XMLHTTP");
	}
	
	return ajax;
}

其次是对封装的代码的应用，在jsp文件中：

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
 	function getData2(){
 		var name=document.getElementById("uname").value;
 		var data="name="+name;
 		myAjax("get","user",data,function(a){
	 		//获取响应数据
				var rs=a.responseText;
			//处理响应数据
				alert(rs);
 		});
 	}
 	
 </script>
</head>
<body>
	<h3>欢迎访问英雄商店</h3>
	<hr>
	英雄名称：<input type="text" name="uname" value="" id="uname"/>
		   <input type="button" value="搜索" onclick="getData2()">
	<hr>
	<table border="1px" id="ta">
	</table>
</body>
</html>