封装
- 先将封装内容放到一个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>