XHR

Code Sample of using XHR in jQuery

April 28, 2021 by cryan.com

XHR is the XML HttpRequest to get and post data from the server. This is a powerful feature because you can update a web page without reloading the page. In addition, you can request data from the server based on user selections - without having to jump on another page.

Common Use

Some common places where XML HttpRequest is used:

• List of customers when users log in.
• Google Search shows predictive search queries as you type is based on the XML HttpRequest functionality.
• Forms that get auto populated based on certain criteria, such as the list of city names when you pick a state.
• Scores of the latest baseball game.

Sample Code

$.ajax({
	url: 'http://internal.localhost.com/?page=addBrowser',
	type: 'POST',
	dataType: 'jsonp',
	data: {
			//uaStringFromJS: escape(navigator.userAgent),
			deviceWidth:    $(window).width(),
			deviceHeight:   $(window).height(),
			devicePixelRatio: (typeof window.devicePixelRatio !== 'undefined' ? window.devicePixelRatio : 0),
			'source':         'Visitor'
	},
	success: function(r){
		try { console.log(r); } catch (e) { }
	}
});

You can find a ton of information on the jQuery website: jQuery.ajax() | jQuery API Documentation .

About Today's Topic

This topic was selected as today is day 'x' in the April A-Z blog challenge. Honestly, there's no way I could possibly cover all the capabilities that jQXHR has in a single blog post.