JSON/AJAX Helpers
Recently, had an implementation where I needed to implement ASP.Net Web API 2 and accompanied it with Javascript/JQuery AJAX communication. In doing this i found myself making the same pattern calls with some varying value for certain properties for the AJAX data calls. As such, i ended up building a few helper functions to simply the inclusion of these various minor quirks based on what was needed. Below you will find the various forms.
1: /*********************************************************************
2: @type - dataType, such as 'json', 'xml', 'script', 'jsonp' or 'html'
3: @contentType - string value, represents the HTML type of content
4: IE: 'application/json; charset=utf-8'
5: @url - API URL, such as 'api/tasks' should be constrainted to the
6: Web API Controller
7: @success - Function(data, status, xhr) handler, The logic to execute
8: on a 200 response code
9: @data - JSON object, A JSON object of the data to be passed to the
10: @url.
11: @func - function(xhr, status, err){} handler, the logic to execute
12: on an error response from AJAX. Default will be an alert box
13: with the xhr.responseText content.
14: ----------------------------------------------------------------------
15: GetAPI('json', 'application/json', 'api/tasks', function(){...}, {var1:val1, var2:val2, ...}, function(xhr, status, err){} );
16: *********************************************************************/
17: function GetAPI(type, contentType, url, success, data, func) {
18: if (success !== undefined) {
19: if (typeof data === undefined) {
20: $.ajax({
21: type: 'GET',
22: dataType: type,
23: contentType: contentType,
24: url: url,
25: success: success,
26: error: (typeof func !== 'undefined' && func != null) ? func : AjaxFail
27: });
28: } else {
29: $.ajax({
30: type: 'GET',
31: data: data,
32: dataType: type,
33: contentType: contentType,
34: url: url,
35: success: success,
36: error: (typeof func !== 'undefined' && func != null) ? func : AjaxFail
37: });
38: }
39: } else {
40: alert("GetAPI function did not have a 'success' function signature declared.");
41: }
42: }
43: function GetJsonUTF8(url, success, data, func) {
44: GetAPI('json', 'application/json; charset=utf-8', url, success, data, func);
45: }
46: /*********************************************************************
47: @type - Data Type, such as 'xml', 'json', 'script', 'text', or 'html'
48: @contentType - string value, should be closely related to @type.
49: @url - API URL, such as 'api/tasks/3/update/rank' should be
50: constrainted to the Web API Controller
51: @data - (Nullable) A plain object or string that is sent to the server with the
52: request.
53: @success - a function signature to be executed when the Post is
54: successful.
55: ----------------------------------------------------------------------
56: PostAPI('json', 'application/json', 'api/tasks/1/update/rank/5', json{}, function(){});
57: *********************************************************************/
58: function PostAPI(type, contentType, url, data, success) {
59: if (typeof (success) === 'function') {
60: $.ajax({
61: type: "POST",
62: contentType: contentType,
63: dataType: type,
64: url: url,
65: data: data,
66: success: success,
67: error: AjaxFail
68: });
69: }
70: }
71: function PostJson(url, data, success) {
72: PostAPI('json', 'application/json', url, data, success);
73: }
74: function PostJsonFormData(url, data, success) {
75: PostAPI('json', 'application/x-www-form-urlencoded',
76: url,
77: data,
78: success
79: );
80: }
81: function AjaxFail(xhr, status, err) {
82: alert(xhr.responseText);
83: }
Comments
Post a Comment