本文介绍了一个基本的JavaScript AJAX对象封装，并展示了如何通过该对象进行GET请求操作及响应处理，包括设置回调函数和数据解析。
1.以下是最基本的一个js对象的封装：
xhr.js
部分图：
//声明一个方法
function Ajax(){
//实例化xhr对象
var xhr =null;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();
}else{
xhr= new ActiveXObject("Microsoft.XMLHttp");
}
//添加一个get方法,url请求地址,succ是成功以后的回调，falure是失败以后的回调
this.get =function(url,succ,falure,xtype){
if(!url){//如果没有URL则直接返回
return;
}
xhr.open("GET", url,true);
//设置回调
xhr.onreadystatechange=function(){
if(xhr.readyState==4){
if(xhr.status==200){
if(succ){
//判断succ是否是一个函数
if(typeof(succ)=="function"){
//获取数据
varobj = null;
if(!xtype||xtype=="text"){
obj = xhr.responseText;
}elseif(xtype=="json"){
obj = xhr.responseText;
obj = eval("("+obj+")");
}elseif(xtype=="xml"){
obj= xhr.responseXML;
}
succ(obj);
}
}
}else{
if(falure){
if(typeof(falure)=="function"){
//返回错误的状态码
falure(xhr.status);
}
}
}
}
};
//发送请求
xhr.send(null);
};
}2.以下是调用方式：xhr1.jsp
<%@ page language="java"contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core"prefix="c"%>
<html>
<head>
<scripttype="text/javascript"src="<c:urlvalue='/js/xhr.js'/>"></script>
</head>
<body>
<buttononclick="_one();">One</button>
</body>
<scripttype="text/javascript">
function_one(){
//声明ajax对象
var ajax =newAjax();
// var url ="<c:url value='/xml/a.txt'/>";
// var url ="<c:url value='/xml/aa.json'/>";
var url ="<c:urlvalue='/xml/a.xml'/>";
Ajax. get(url,function(data){
//alert("成功了"+data);
// alert(data.length);
alert(data.getElementsByTagName("user").length);
},function(status){
alert("没有成功.."+status);
},"xml");}
</script>
</html>
扫一扫
1127
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
