How to use js and jQuery to realize compatible multi-browser Ajax request

In this article Xiaobian introduces in detail "how to use js and jQuery to achieve compatible multi-browser Ajax request", the content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use js and jQuery to achieve compatible multi-browser Ajax request" can help you solve your doubts.

1. Ajax example of pure js implementation:

Var ajax = function () {}; ajax.prototype = {request: function (method, url, callback, postVars) {var xhr = this.createXhrObject (); xhr.onreadystatechange = function () {if (xhr.readyState! = 4) return; (xhr.status = 200)? Callback.success (xhr.responseText, xhr.responseXML): callback.failure (xhr,status);}; if (method! = = "POST") {url + = "?" + JSONStringify (postVars); postVars = null;} xhr.open (method, url, true); xhr.send (postVars) }, createXhrObject: function () {var methods = [function () {return new XMLHttpRequest ();}, function () {return new ActiveXObject ("Msxml2.XMLHTTP");}, function () {return new ActiveXObject ("Microsoft.XMLHTTP");}], I = 0, len = methods.length; for (; I < len Catch +) {try {methods [I];} catch (e) {continue;} this.createXhrObject = methods [I]; return methods [I];} throw new Error ("ajax created failure") }, JSONStringify: function (obj) {return JSON.stringify (obj). Replace (/ "| {|} / g,") .replace (/ b:b/g, "=") .replace (/ bmaery bgamble g, "&");}}

II. Overview of jQuery $.ajax

With the advent of JQuery, AJAX becomes easier to implement.

In JQuery, the high-level implementations of AJAX are mainly $.get (), $.post () and so on. Here's how to use $.ajax () in detail.

1. Request page AJAX.aspx

The js code is as follows:

Function Text_ajax () {$.ajax ({type: "GET", / / two are usually used: GET,POST. The default is: GET url: "ResponseText.aspx", / / (default: current page address) the address to send the request dataType: "html", / / the type of data expected to be returned by the server. BeforeSend:beforeSend, / / send request success:callback, / / request succeeded error:error,// request error complete:complete// request completed}) } function error (XMLHttpRequest, textStatus, errorThrown) {/ / usually only one of textStatus and errorThown has a value of $("# showResult") .append ("request error!") ;} function complete (XMLHttpRequest, textStatus) {$("# showResult") .append ("request completed");} function beforeSend (XMLHttpRequest) {$("# showResult") .append ("send request …" . ");} function callback (msg) {$(" # showResult ") .append (" request successful, number of returns: "+ msg+");}

The html code is as follows: