ajax续2 对ajax的get和post进行封装和实现回调

本文链接：https://blog.youkuaiyun.com/xiaobiaobiao521/article/details/8949070

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>