A Simple jQuery HttpClient
Introduction:
One of the reason why HttpClient getting popular day by day is that it is very simple to use and intuitive programming model. Due its simplicity, I have created a very simple HttpClient for jQuery(which abstract the jQuery.ajax calls) for myself and my friends, so that the programming model remain unified. But I think/feel that this may be useful and interesting for others. That's why I have created a package to share this library. In this article I will tell you how to use this simple jQuery HttpClient.
Description:
First of all just install jquery.httpclient package from nuget and then include this in your view(or page). Now you can send ajax request in HttpClient library fashion. Here are examples that you can do using this library,
001 |
var
client = new
HttpClient();
|
002 |
003 |
004 |
// Send a GET request
|
005 |
client.getAsync('/Home/B');
|
006 |
007 |
008 |
// Send a GET request with done
callback
|
009 |
client.getAsync('/Home/B', function
(response) {
|
010 |
console.log('Get', response);
|
011 |
});
|
012 |
013 |
014 |
// Send a GET request with done and fail
callback
|
015 |
client.getAsync('/Home/B', function
(response) {
|
016 |
017 |
},
|
018 |
function
(err) {
|
019 |
020 |
});
|
021 |
022 |
023 |
// Send a DELETE request
|
024 |
client.deleteAsync('/Home/B');
|
025 |
026 |
027 |
// Send a DELETE request with done
callback
|
028 |
client.deleteAsync('/Home/B', function
(response) {
|
029 |
console.log('Get', response);
|
030 |
});
|
031 |
032 |
033 |
// Send a DELETE request with done and fail
callback
|
034 |
client.deleteAsync('/Home/B', function
(response) {
|
035 |
036 |
},
|
037 |
function
(err) {
|
038 |
039 |
});
|
040 |
041 |
042 |
// Send a POST request with data
|
043 |
client.postAsync('/Home/A', 'year=2008');
|
044 |
045 |
046 |
// Send a POST request with data and done
callback
|
047 |
client.postAsync('/Home/A', 'year=2008', function
(response) {
|
048 |
});
|
049 |
050 |
051 |
// Send a POST request with data, done and
fail callback
|
052 |
client.postAsync('/Home/A', 'year=2008', function
(response) {
|
053 |
},
|
054 |
function
(err) {
|
055 |
056 |
});
|
057 |
058 |
059 |
// Send a POST request with data and
content-type
|
060 |
client.postAsync('/Home/A', 'year=2008', 'application/json');
|
061 |
062 |
063 |
// Send a POST request with data,
content-type and done callback
|
064 |
client.postAsync('/Home/A', 'year=2008', 'application/json', function
(response) {
|
065 |
});
|
066 |
067 |
068 |
// Send a POST request with data,
content-type, done and fail callback
|
069 |
client.postAsync('/Home/A', 'year=2008', 'application/json', function
(response) {
|
070 |
},
|
071 |
function
(err) {
|
072 |
073 |
});
|
074 |
075 |
076 |
// Send a POST request with data,
content-type and accept
|
077 |
client.postAsync('/Home/A', 'year=2008', 'application/json', 'application/json');
|
078 |
079 |
080 |
// Send a POST request with data,
content-type, accept and done callback
|
081 |
client.postAsync('/Home/A', 'year=2008', 'application/json', 'application/json', function
(response) {
|
082 |
});
|
083 |
084 |
085 |
// Send a POST request with data,
content-type, accept, done and fail
callback
|
086 |
client.postAsync('/Home/A', 'year=2008', 'application/json', 'application/json', function
(response) {
|
087 |
},
|
088 |
function
(err) {
|
089 |
090 |
});
|
091 |
092 |
093 |
// Send a POST request with data and
application/json content-type
|
094 |
client.postAsJsonAsync('/Home/A', 'year=2008');
|
095 |
096 |
097 |
// Send a POST request with data,
application/json content-type and done
callback
|
098 |
client.postAsJsonAsync('/Home/A', 'year=2008', function
(response) {
|
099 |
});
|
100 |
101 |
102 |
// Send a POST request with data,
application/json content-type, done and fail
callback
|
103 |
client.postAsJsonAsync('/Home/A', 'year=2008', function
(response) {
|
104 |
},
|
105 |
function
(err) {
|
106 |
107 |
});
|
108 |
109 |
110 |
// Send a POST request with data,
application/json content-type and accept
|
111 |
client.postAsJsonAsync('/Home/A', 'year=2008', 'application/json');
|
112 |
113 |
114 |
// Send a POST request with data,
application/json content-type, accept and done
callback
|
115 |
client.postAsJsonAsync('/Home/A', 'year=2008', 'application/json', function
(response) {
|
116 |
});
|
117 |
118 |
119 |
// Send a POST request with data,
application/json content-type, accept, done
and fail callback
|
120 |
client.postAsJsonAsync('/Home/A', 'year=2008', 'application/json', function
(response) {
|
121 |
},
|
122 |
function
(err) {
|
123 |
124 |
});
|
125 |
126 |
127 |
// Send a POST request with data and
application/xml content-type
|
128 |
client.postAsXmlAsync('/Home/A', 'year=2008');
|
129 |
130 |
131 |
// Send a POST request with data,
application/xml content-type and done
callback
|
132 |
client.postAsXmlAsync('/Home/A', 'year=2008', function
(response) {
|
133 |
});
|
134 |
135 |
136 |
// Send a POST request with data,
application/xml content-type, done and fail
callback
|
137 |
client.postAsXmlAsync('/Home/A', 'year=2008', function
(response) {
|
138 |
},
|
139 |
function
(err) {
|
140 |
141 |
});
|
142 |
143 |
144 |
// Send a POST request with data,
application/xml content-type and accept
|
145 |
client.postAsXmlAsync('/Home/A', 'year=2008', 'application/json');
|
146 |
147 |
148 |
// Send a POST request with data,
application/xml content-type, accept and done
callback
|
149 |
client.postAsXmlAsync('/Home/A', 'year=2008', 'application/json', function
(response) {
|
150 |
});
|
151 |
152 |
153 |
// Send a POST request with data,
application/xml content-type, accept, done and
fail callback
|
154 |
client.postAsXmlAsync('/Home/A', 'year=2008', 'application/json', function
(response) {
|
155 |
},
|
156 |
function
(err) {
|
157 |
158 |
});
|
159 |
160 |
161 |
// Send a PUT request with data
|
162 |
client.putAsync('/Home/A', 'year=2008');
|
163 |
164 |
165 |
// Send a PUT request with data and done
callback
|
166 |
client.putAsync('/Home/A', 'year=2008', function
(response) {
|
167 |
});
|
168 |
169 |
170 |
// Send a PUT request with data, done and
fail callback
|
171 |
client.putAsync('/Home/A', 'year=2008', function
(response) {
|
172 |
},
|
173 |
function
(err) {
|
174 |
175 |
});
|
176 |
177 |
178 |
// Send a PUT request with data and
content-type
|
179 |
client.putAsync('/Home/A', 'year=2008', 'application/json');
|
180 |
181 |
182 |
// Send a PUT request with data, content-type
and done callback
|
183 |
client.putAsync('/Home/A', 'year=2008', 'application/json', function
(response) {
|
184 |
});
|
185 |
186 |
187 |
// Send a PUT request with data,
content-type, done and fail callback
|
188 |
client.putAsync('/Home/A', 'year=2008', 'application/json', function
(response) {
|
189 |
},
|
190 |
function
(err) {
|
191 |
192 |
});
|
193 |
194 |
195 |
// Send a PUT request with data, content-type
and accept
|
196 |
client.putAsync('/Home/A', 'year=2008', 'application/json', 'application/json');
|
197 |
198 |
199 |
// Send a PUT request with data,
content-type, accept and done callback
|
200 |
client.putAsync('/Home/A', 'year=2008', 'application/json', 'application/json', function
(response) {
|
201 |
});
|
202 |
203 |
204 |
// Send a PUT request with data,
content-type, accept, done and fail
callback
|
205 |
client.putAsync('/Home/A', 'year=2008', 'application/json', 'application/json', function
(response) {
|
206 |
},
|
207 |
function
(err) {
|
208 |
209 |
});
|
210 |
211 |
212 |
// Send a PUT request with data and
application/json content-type
|
213 |
client.putAsJsonAsync('/Home/A', 'year=2008');
|
214 |
215 |
216 |
// Send a PUT request with data,
application/json content-type and done
callback
|
217 |
client.putAsJsonAsync('/Home/A', 'year=2008', function
(response) {
|
218 |
});
|
219 |
220 |
221 |
// Send a PUT request with data,
application/json content-type, done and fail
callback
|
222 |
client.putAsJsonAsync('/Home/A', 'year=2008', function
(response) {
|
223 |
},
|
224 |
function
(err) {
|
225 |
226 |
});
|
227 |
228 |
229 |
// Send a PUT request with data,
application/json content-type and accept
|
230 |
client.putAsJsonAsync('/Home/A', 'year=2008', 'application/json');
|
231 |
232 |
233 |
// Send a PUT request with data,
application/json content-type, accept and done
callback
|
234 |
client.putAsJsonAsync('/Home/A', 'year=2008', 'application/json', function
(response) {
|
235 |
});
|
236 |
237 |
238 |
// Send a PUT request with data,
application/json content-type, accept, done
and fail callback
|
239 |
client.putAsJsonAsync('/Home/A', 'year=2008', 'application/json', function
(response) {
|
240 |
},
|
241 |
function
(err) {
|
242 |
243 |
});
|
244 |
245 |
246 |
// Send a PUT request with data and
application/xml content-type
|
247 |
client.putAsXmlAsync('/Home/A', 'year=2008');
|
248 |
249 |
250 |
// Send a PUT request with data,
application/xml content-type and done
callback
|
251 |
client.putAsXmlAsync('/Home/A', 'year=2008', function
(response) {
|
252 |
});
|
253 |
254 |
255 |
// Send a PUT request with data,
application/xml content-type, done and fail
callback
|
256 |
client.putAsXmlAsync('/Home/A', 'year=2008', function
(response) {
|
257 |
},
|
258 |
function
(err) {
|
259 |
260 |
});
|
261 |
262 |
263 |
// Send a PUT request with data,
application/xml content-type and accept
|
264 |
client.putAsXmlAsync('/Home/A', 'year=2008', 'application/json');
|
265 |
266 |
267 |
// Send a put request with data,
application/xml content-type, accept and done
callback
|
268 |
client.putAsXmlAsync('/Home/A', 'year=2008', 'application/json', function
(response) {
|
269 |
});
|
270 |
271 |
272 |
// Send a PUT request with data,
application/xml content-type, accept, done and
fail callback
|
273 |
274 |
client.putAsXmlAsync('/Home/A', 'year=2008', 'application/json', function
(response) {
|
275 |
},
|
276 |
function
(err) {
|
277 |
278 |
});
|
In the above example we are sending GET, POST, PUT and DELETE request in similar way that we do with HttpClient library. The source code of simple jQuery HttpClient is available at github.
Summary:
In this article, I showed you a simple jQuery HttpClient which help you to send ajax request in HttpClient library fashion. I have done this for myself for making the programming model unified in javascript with HttpClient library. Hopefully you will enjoy my this article too.