Brief Analysis of jQuery Ajax Universal js Packaging

2021-06-29 10:03:42
OfStack

This article is roughly divided into three steps to implement jquery ajax encapsulated by js, explained by code examples, the code with comments is easier to understand, the details are as follows:

Step 1: Introduce the jQuery Library


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

Step 2: Develop the Ajax encapsulation class, which has been tested and passed, can be called directly, paste code directly, and save explanation


/*****************************************************************
jQuery Ajax Encapsulate generic classes  (linjq) 
*****************************************************************/
$(function(){
/**
* ajax encapsulation 
* url  The address where the request was sent 
* data  Data sent to the server, stored in an array, such as: {"date": new Date().getTime(), "state": 1}
* async  Default value : true .By default, all requests are asynchronous.Set this option to  false . 
*  Note that synchronization requests lock the browser and other user actions must wait for the request to complete before they can execute. 
* type  Request Method ("POST"  or  "GET") ,   Default to  "GET"
* dataType  The type of data expected to be returned by the server, such as: xml , html , json , text
* successfn  Successful callback function 
* errorfn  Failed Callback Function 
*/
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 encapsulation 
* url  The address where the request was sent 
* data  Data sent to the server, stored in an array, such as: {"date": new Date().getTime(), "state": 1}
* successfn  Successful callback function 
*/
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 encapsulation 
* url  The address where the request was sent 
* data  Data sent to the server, stored in an array, such as: {"date": new Date().getTime(), "state": 1}
* dataType  The type of data expected to be returned by the server, such as: xml , html , json , text
* successfn  Successful callback function 
* errorfn  Failed Callback Function 
*/
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);
}
});
};
});

Step 3: Call simulation


<%@ 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 Encapsulate generic class tests </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(" Error ");
}
);
$.axs(getRootPath()+"/test/ajax.html", null, function(data){
alert(data.data);
});
$.axse(getRootPath()+"/test/ajax.html",
null, 
function(){
alert(" Succeed ");
},
function(){
alert(" Error ");
});
});
</script>
</head>
<body>
</body>
</html>