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>