Example of Ajax Request Code for JavaScript compatibility with multiple browsers

Ajax is often used, but most of the ajax compatibility found on the Internet is not strong. I have changed a good and compatible ajax function, and the jquery ajax compatibility introduced later is also very strong.

Example

The Code is as follows:

Copy code

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; I ++ ){ 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 (/B, B/g ,"&"); } };

JQuery $. ajax Overview

JQuery makes AJAX easier to implement.

In JQuery, the advanced implementation of AJAX mainly includes $. get (), $. post (), etc. The usage of $. ajax () is described in detail below.

1. Request AJAX. aspx

The js Code is as follows:

The Code is as follows:

Copy code

<Script type = "text/javascript"> Function Text_ajax () { $. Ajax ( { Type: "GET", // two types are usually used: GET and POST. The default value is GET. Url: "ResponseText. aspx", // (default: Current page address) Address of the request sent DataType: "html", // data type returned by the expected server. BeforeSend: beforeSend, // send the request Success: callback, // The request is successful. Error: error, // request error Complete: complete // The request is complete }); } Function error (XMLHttpRequest, textStatus, errorThrown) { // Generally, textStatus and errorThown have only one value. $ ("# ShowResult"). append ("<div> request error! </Div> "); } Function complete (XMLHttpRequest, textStatus) { $ ("# ShowResult"). append ("<div> request completed </div> "); } Function beforeSend (XMLHttpRequest) { $ ("# ShowResult"). append ("<div> send request ..... <Div> "); } Function callback (msg) { $ ("# ShowResult"). append ("<div> Successful request, return count:" + msg + "<div> "); } </Script>

The html code is as follows:

The Code is as follows:	Copy code
<Input value = "Text_ajax function" type = "button" onclick = "Text_ajax ()"/> <Div id = "showResult"> </Div>

Response page: JQueryAJAX. aspx

Background code:

The Code is as follows:	Copy code
Protected void Page_Load (object sender, EventArgs e) { Response. Write ("haha! The test is successful! "); }

JQuery Ajax Chinese garbled question?

: Ajax configure the contentType property, plus charset = UTF-8

Add the following parameters to the ajax method:

ContentType: "application/x-www-form-urlencoded; charset = UTF-8" use other js frameworks or xhr are similar, set the contentType in the header,

Here the key is charset = UTF-8, if there is no such, it is not possible, the default contentType in jQuery is not.

Method 2: decode is not required in action. Therefore, this method is recommended.