js实现对ajax请求面向对象的封装,使用原生js封装
分类:计算机网络

使用方法

实例如下:

在不使用任何的js框架的情况下,要想使用ajax,可能需要向下面一样进行代码的编写

/*****************************************************************
jQuery Ajax封装通用类 (linjq) 
*****************************************************************/
$(function(){
/**
* ajax封装
* url 发送请求的地址
* data 发送到服务器的数据,数组存储,如:{"date": new Date().getTime(), "state": 1}
* async 默认值: true。默认设置下,所有请求均为异步请求。如果需要发送同步请求,请将此选项设置为 false。
* 注意,同步请求将锁住浏览器,用户其它操作必须等待请求完成才可以执行。
* type 请求方式("POST" 或 "GET"), 默认为 "GET"
* dataType 预期服务器返回的数据类型,常用的如:xml、html、json、text
* successfn 成功回调函数
* errorfn 失败回调函数
*/
jQuery.ax=function(url, data, async, type, dataType, successfn, errorfn) {
async = (async==null || async=="" || typeof(async)=="undefined")? "true" : async;
type = (type==null || type=="" || typeof(type)=="undefined")? "post" : type;
dataType = (dataType==null || dataType=="" || typeof(dataType)=="undefined")? "json" : dataType;
data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
$.ajax({
type: type,
async: async,
data: data,
url: url,
dataType: dataType,
success: function(d){
successfn(d);
},
error: function(e){
errorfn(e);
}
});
};
/**
* ajax封装
* url 发送请求的地址
* data 发送到服务器的数据,数组存储,如:{"date": new Date().getTime(), "state": 1}
* successfn 成功回调函数
*/
jQuery.axs=function(url, data, successfn) {
data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
$.ajax({
type: "post",
data: data,
url: url,
dataType: "json",
success: function(d){
successfn(d);
}
});
};
/**
* ajax封装
* url 发送请求的地址
* data 发送到服务器的数据,数组存储,如:{"date": new Date().getTime(), "state": 1}
* dataType 预期服务器返回的数据类型,常用的如:xml、html、json、text
* successfn 成功回调函数
* errorfn 失败回调函数
*/
jQuery.axse=function(url, data, successfn, errorfn) {
data = (data==null || data=="" || typeof(data)=="undefined")? {"date": new Date().getTime()} : data;
$.ajax({
type: "post",
data: data,
url: url,
dataType: "json",
success: function(d){
successfn(d);
},
error: function(e){
errorfn(e);
}
});
};
}); 

您可能感兴趣的文章:

  • 一个AJAX自动完成功能的js封装源码[支持中文]
  • 原生Javascript封装的一个AJAX函数分享
  • js实现对ajax请求面向对象的封装
  • 原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
  • JavaScript 封装Ajax传递的数据代码
  • 浅析jQuery Ajax通用js封装
  • js原生Ajax的封装和原理详解
  • 使用原生js封装的ajax实例(兼容jsonp)
  • 纯js封装的ajax功能函数与用法示例
  • 原生javascript实现的ajax异步封装功能示例
  • 原生js封装的ajax方法示例

以上这篇使用原生js封装的ajax实例(兼容jsonp)就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
在js中使用ajax请求一般包含三个步骤:

第一步:引入jQuery库

/**
* 对jquery中$.ajax进行封装,以便加入锁屏功能
* isAsync 是否为异步请求,默认为true
* isLock 是否锁屏,默认是true
* isCache 是否从浏览器缓存中加载信息,默认是fasle
***/
;(function($) {
$.fn.doPost = function(settings) {
settings = jQuery.extend({
isAsync:true,
type : "post",
url : null,
dataType : null,
data : null,
success : null,
error : toError,
isLock : true,
isCache : false
}, settings);
$(this).each(function(){
if(settings.isLock){
lockSrc();
}
$.ajax({
async:settings.isAsync,
type:settings.type,
url:settings.url,
dataType:settings.dataType,
data:settings.data,
cache:settings.isCache,
success:function(msg){
if(settings.isLock){
unlockSrc();
}
settings.success(msg);
},
error:settings.error
});
}); 

//锁屏方法
function lockSrc(){
$(".lockDiv").css({"opacity":"0.5"}).fadeIn('normal');
var scrollWidth = document.documentElement.clientWidth;//document.body.clientWidth;
var scrollHeight =document.documentElement.clientHeight; // document.body.clientHeight;
var divWidth = $(".lockDivInfo").width();
var divHeight = $(".lockDivInfo").height();
var divLeft = scrollWidth/2-divWidth/2;
var divTop = scrollHeight/2-divHeight/2;
//console.log("bodyWidth="+scrollWidth+",bodyHeight="+scrollHeight+",divHeight="+divHeight+",divWidth="+divWidth+",left="+divLeft+",top="+divTop);
$(".lockDivInfo").css({"position":"absolute","top":divTop,"left":divLeft}).fadeIn('normal');
}
//解屏方法
function unlockSrc(){
$(".lockDivInfo").fadeOut('normal');
$(".lockDiv").fadeOut('normal');
}
function toError(){
alert("操作失败!");
} 
};
})(jQuery);
/* 封装ajax函数
 * @param {string}opt.type http连接的方式,包括POST和GET两种方式
 * @param {string}opt.url 发送请求的url
 * @param {boolean}opt.async 是否为异步请求,true为异步的,false为同步的
 * @param {object}opt.data 发送的参数,格式为对象类型
 * @param {function}opt.success ajax发送并接收成功调用的回调函数
 */
  function ajax(opt) {
    opt = opt || {};
    opt.method = opt.method.toUpperCase() || 'POST';
    opt.url = opt.url || '';
    opt.async = opt.async || true;
    opt.data = opt.data || null;
    opt.success = opt.success || function () {};
    opt.dataType = opt.dataType || "json";
    var xmlHttp = null;
    if (XMLHttpRequest) {
      xmlHttp = new XMLHttpRequest();
    }
    else {
      xmlHttp = new ActiveXObject('Microsoft.XMLHTTP');
    }var params = [];
    for (var key in opt.data){
      params.push(key + '=' + opt.data[key]);
    }
    var postData = params.join('&');
    if (opt.method.toUpperCase() === 'POST') {
      xmlHttp.open(opt.method, opt.url, opt.async);
      xmlHttp.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded;charset=utf-8');
      xmlHttp.send(postData);
    }
    else if (opt.method.toUpperCase() === 'GET') {
      xmlHttp.open(opt.method, opt.url + '?' + postData, opt.async);
      xmlHttp.send(null);
    } 
    xmlHttp.onreadystatechange = function () {
      if(opt.dataType != 'jsonp'){
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
          opt.success(xmlHttp.responseText);
        }
      }else{
        //alert(1); 
        if (xmlHttp.readyState == 4 && xmlHttp.status == 200) {
          var oScript = document.createElement('script');
          document.body.appendChild(oScript);

          var callbackname = 'wangxiao'
          oScript.src = opt.url + "?" + postData+'&callback='+callbackname;

          window['wangxiao'] = function(data) {
            opt.success(data);
            document.body.removeChild(oScript);
          };
        }


      }

    };
  }
  export default ajax;

处理之后看起来应该像下面这个样子: 

您可能感兴趣的文章:

  • 一个AJAX自动完成功能的js封装源码[支持中文]
  • 原生Javascript封装的一个AJAX函数分享
  • js实现对ajax请求面向对象的封装
  • 原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
  • JavaScript 封装Ajax传递的数据代码
  • js锁屏解屏通过对$.ajax进行封装实现
  • js原生Ajax的封装和原理详解
  • 使用原生js封装的ajax实例(兼容jsonp)
  • 纯js封装的ajax功能函数与用法示例
  • 原生javascript实现的ajax异步封装功能示例
  • 原生js封装的ajax方法示例
//查询
$("#queryBtn").click(function(){
selecCheckByRegionApp.query();
});

var selecCheckByRegionApp={};
selecCheckByRegionApp.query=function(){
var settion={
type:"post",
url: 'selfCheckStatisticAction!findByRegion' ,
dataType:"text",
data:$("#searchForm").formSerialize(),
success:function(msg){
$("#contentDiv").html(msg);
}
};
$("#queryBtn").doPost(settion);
}

您可能感兴趣的文章:

  • 一个AJAX自动完成功能的js封装源码[支持中文]
  • 美高梅网址,原生Javascript封装的一个AJAX函数分享
  • js实现对ajax请求面向对象的封装
  • 原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
  • JavaScript 封装Ajax传递的数据代码
  • 浅析jQuery Ajax通用js封装
  • js锁屏解屏通过对$.ajax进行封装实现
  • js原生Ajax的封装和原理详解
  • 纯js封装的ajax功能函数与用法示例
  • 原生javascript实现的ajax异步封装功能示例
  • 原生js封装的ajax方法示例

上述代码实现了类似jquery中的ajax操作,希望对大家的学习有所帮助。

<script type="text/javascript" src="<%=path%>/resources/js/jquery.min.js"></script> 
/*
锁屏
*/

.lockDiv {
width: 100%;
height: 100%;
display: none;
z-index: 10;
background-color: #DFE8F6;
position: absolute;
top: 0px;
left: 0px;
}
.lockDivInfo {
width: 50px;
height: 2px;
display: none;
position: absolute;
left: 0px;
top: 0px;
z-index: 11
}
#CloseDiv {
float: right;
width: 100px;
height: 100px;
margin-top: 10px;
margin-right: 10px;
}


<div class="lockDiv"></div>
<div class="lockDivInfo" >
<img id="CloseDiv" src="/hnhd/images/circle_animation.gif"></img>
</div>
  •       1、服务器响应成功后,要处理的业务逻辑交给开发人员自己处理 
  •       2、对请求进行面向对象的封装  
<%@ page language="java" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<title>jQuery Ajax封装通用类测试</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<jsp:include page="/view/common/js_taglib.jsp"></jsp:include>
<script type="text/javascript">
$(function(){
$.ax(
getRootPath()+"/test/ajax.html",
null,
null,
null,
null, 
function(data){
alert(data.code);
}, 
function(){
alert("出错了");
}
);
$.axs(getRootPath()+"/test/ajax.html", null, function(data){
alert(data.data);
});
$.axse(getRootPath()+"/test/ajax.html",
null, 
function(){
alert("成功了");
},
function(){
alert("出错了");
});
});
</script>
</head>
<body>
</body>
</html>

锁屏样式:

您可能感兴趣的文章:

  • 一个AJAX自动完成功能的js封装源码[支持中文]
  • 原生Javascript封装的一个AJAX函数分享
  • 原生JS封装ajax 传json,str,excel文件上传提交表单(推荐)
  • JavaScript 封装Ajax传递的数据代码
  • 浅析jQuery Ajax通用js封装
  • js锁屏解屏通过对$.ajax进行封装实现
  • js原生Ajax的封装和原理详解
  • 使用原生js封装的ajax实例(兼容jsonp)
  • 纯js封装的ajax功能函数与用法示例
  • 原生javascript实现的ajax异步封装功能示例
  • 原生js封装的ajax方法示例

第二步:开发Ajax封装类,已测试通过,可以直接调用,直接贴代码,讲解就省了

jquery插件源码:

<pre code_snippet_id="342814" snippet_file_name="blog_20140513_2_2489549" name="code" class="javascript">window.onload = function() { 
  document.getElementById("hit").onclick = function() { 
    console.info("开始请求"); 
    ajax.post({ 
        data : 'a=n', 
        url : 'TestServlet', 
        success : function(reponseText) { 
          console.info("success : "+reponseText); 
        }, 
        error : function(reponseText) { 
          console.info("error : "+reponseText); 
        } 
    }); 
  } 
} 

var ajax = { 
  xmlHttp : '', 
  url:'', 
  data:'', 
  xmlHttpCreate : function() { 
    var xmlHttp; 
    try { 
      xmlHttp = new XMLHttpRequest;// ff opera 
    } catch (e) { 
      try { 
        xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");// ie 
      } catch (e) { 
        try { 
          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
        } catch (e) { 

        } 
      } 
    } 
    return xmlHttp; 
  }, 
  post:function(jsonObj){ 
    ajax.data = jsonObj.data; 
    ajax.url = jsonObj.url; 
    //创建XMLHttp对象,打开链接、请求、响应 
    ajax.xmlHttp = ajax.xmlHttpCreate(); 
    ajax.xmlHttp.open("post",ajax.url,true); 
    ajax.xmlHttp.onreadystatechange = function(){ 
      if(ajax.xmlHttp.readyState == 4){ 
        if(ajax.xmlHttp.status == 200){ 
          jsonObj.success(ajax.xmlHttp.responseText); 
        }else{ 
          jsonObj.error(ajax.xmlHttp.responseText); 
        } 
      } 
    } 
    ajax.xmlHttp.send(ajax.data); 
  } 
};

本文大概分为三步实现jquery ajax通过js封装,通过代码实例讲解,代码附有注释,比较容易理解,具体详情如下所示:

  •               1、创建XMLHttp对象
  •               2、发送请求:包括打开链接、发送请求
  •               3、处理响应

以上所述是小编给大家介绍的jQuery Ajax通用js封装的相关知识,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

如果在比较复杂的业务逻辑里面使用这种ajax请求,会使得代码很臃肿,不方便重用,并且可以看到,可能在服务器响应成功后要处理一个业务逻辑操作,这个时候不得不把操作写在onreadystatechage方法里面。
为了方便代码的重用我们可以做出如下处理;  

第三步:调用模拟

var xmlHttp = xmlHttpCreate();//创建对象 
xmlHttp.onreadystatechange = function(){//响应处理 
  if(xmlHttp.readyState == 4){ 
    console.info("response finish"); 
    if(xmlHttp.status == 200){ 
       console.info("reponse success"); 
      console.info(xmlHttp.responseText); 
    } 
  } 
} 
xmlHttp.open("get","TestServlet",true);//打开链接 

xmlHttp.send(null);//发送请求 

function xmlHttpCreate() { 
  var xmlHttp; 
  try { 
    xmlHttp = new XMLHttpRequest;// ff opera 
  } catch (e) { 
    try { 
      xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");// ie 
    } catch (e) { 
      try { 
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } catch (e) { 

      } 
    } 
  } 
  return xmlHttp; 
} 

console.info(xmlHttpCreate()); 

本文由美高梅网址发布于计算机网络,转载请注明出处:js实现对ajax请求面向对象的封装,使用原生js封装

上一篇:JavaScript利用Date实现简单的倒计时实例,js代码实 下一篇:js实现文章文字大小字号功能完整实例,js实现正
猜你喜欢
热门排行
精彩图文