Ajax封装

下面是自己封装的一个Ajax工具函数


function MyAjax(){


//参数jason
this.myOptions={
"method":"GET", //请求的方式
"url":null,// 路径
"params":null,//参数
"type":"text",//servlet返回的字符串类型 text,jason,xml
"loading":null,
"success":function(){}
},


//创建XMLHTTPRequest对象
this.createXMLHttpRequest= function() { // 创建XMLHttpRequest对象
var xmlhttp;
try {
xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try {
xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {
try {
xmlhttp = new XMLHttpRequest();
if (xmlhttp.overrideMimeType) {
xmlhttp.overrideMimeType("text/xml");
}
} catch (e) {
}
}
}
return xmlhttp;
},




//处理传入的jason对象
this.processOptions=function(options){
var that =this;
for(var op in options){
var op=op.toLowerCase();  //将参数名转变为小写
that.myOptions[op]=options[op]; //将参数的值传递给调用对象
}


},


this.processURL=function(){
var that=this;
var URL=that.myOptions['url'];
var Method=that.myOptions['method'];
var params=that.myOptions['params'];
if(params){
if(Method.toUpperCase()==="GET"){
URL+=("?"+params);
that.myOptions['url']=URL;
}
}


},


this.callBack=function(request){
var that=this;
if(request.readyState==4){
if(request.status==200){
var type=that.myOptions['type'];
var returnValue=null;
if(type.toUpperCase()==='TEXT'){
returnValue=request.responseText;
}else if(type.toUpperCase()==='XML'){
returnValue=request.responseXML;
}else if(type.toUpperCase()==='JSON'){
var haha=request.responseText;
returnValue=eval("("+haha+")");
}
that.myOptions['success'](returnValue);
}else{
var loadingFun=that.myOptions['loading'];
if(loadingFun){
loadingFun();
}

}
}

},


this.startAjax=function(obj){
var that=this;
var XMLHttpRequest=that.createXMLHttpRequest();
that.processOptions(obj);
that.processURL();
XMLHttpRequest.open(that.myOptions['method'],that.myOptions['url'],true);
if (that.myOptions['method'].toUpperCase() === "POST") { // POST请求,添加请求头信息
xmlhttp.setRequestHeader("Content-Type",
"application/x-www-form-urlencoded;");
}
XMLHttpRequest.onreadystatechange=function(){
that.callBack(XMLHttpRequest);
}


XMLHttpRequest.send(null);



}

}


-----------------------------------------------------下面代码展在jsp页面的javascript中如何调用上面的工具函数。

function $(elementId) {
return elementId ? document.getElementById(elementId) : elementId;
}

function showInfo() {
var url = "servlet/CheckUsernameServlet";
var myAjax = new MyAjax();
myAjax.startAjax( {
url : url,
type : "json",
loading : function(){
$("info").innerHTML = "正在加载。。。";
},
success : function(returnValue) {
$("info").innerHTML = returnValue.name + "," + returnValue.age;
}
});


}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery的ajax封装主要分为三个步骤。首先,需要引入jQuery库。然后,通过代码实例来讲解。最后,根据代码注释来理解封装过程。 具体来说,封装的步骤如下: 1. 第一步:引入jQuery库。用户需要在页面中引入jQuery的库文件,可以通过以下方式引入: ``` <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> ``` 这样就可以在页面中使用jQuery的功能了。 2. 第二步:使用jQuery的ajax方法进行封装。用户可以通过以下代码将ajax请求进行封装: ``` $('#id').click(function(){ $.ajax({ url: "http://localhost:3000/ind", type: "post/get", data: $('form').serialize(), dataType: 'json', success: function(result){ // 请求成功后的回调函数,result中存放的是服务器的响应数据 }, error: function(err){ console.log(err); } }); }); ``` 在这段代码中,通过给一个元素绑定点击事件,当该元素被点击时,发起ajax请求。可以根据实际需求,修改url、type、data等参数来满足不同的请求。 3. 第三步:高层封装。除了使用jQuery的ajax方法,还可以使用高层封装的post请求实现简洁的代码,代码如下: ``` $.post(url, [data], [callback], [type]); ``` 其中,url是请求的地址,data是待发送的参数,callback是请求成功后的回调函数,type是返回内容的格式。 综上所述,jQuery的ajax封装通过引入jQuery库、使用ajax方法进行封装以及高层封装来实现。这样可以简化代码,提高开发效率。同时,原生的Ajax也是一种封装方式,可以使用XMLHttpRequest对象来发送异步请求,通过open方法建立与服务器的连接,设置请求头信息,然后通过send方法向服务器发送请求,并通过onreadystatechange事件监听请求-响应状态的改变,并将响应信息写入页面。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值