JS and jquery implemented compatible multi-browser Ajax request Instance _ajax related

Ajax we often use, but the internet found most of the Ajax compatibility is not strong, the following itself to change a good compatibility of very strong Ajax functions, but also described in the following jquery Ajax compatibility is very strong.

One, pure JS implementation of AJAX Examples:

Copy Code code as follows:

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, "&");
}
};

Second, jQuery $.ajax overview

When jquery is present, it makes Ajax easier to implement.
jquery, the Ajax high-level implementation of the main $.get (), $.post (), and so on, the following details on the use of $.ajax ()
1. Request Page Ajax.aspx
The JS code is as follows:

Copy Code code as follows:

<script type= "Text/javascript" >
function Text_ajax ()
{
$.ajax (
{
Type: "Get",//usually uses two kinds: get,post. The default is: Get
URL: "Responsetext.aspx",//(Default: Current page address) send the requested address
DataType: "HTML",//expected data type returned by the server.
Beforesend:beforesend,//Send Request
Success:callback,//Request success
error:error,//Request Error
complete:complete//Request Complete

});
}
Function error (XMLHttpRequest, Textstatus, Errorthrown)
{
Typically, only one of the Textstatus and Errorthown has a value.
$ ("#showResult"). Append ("<div> request is wrong!") </div> ");
}
function complete (XMLHttpRequest, textstatus)
{
$ ("#showResult"). Append ("<div> request complete </div>");
}
function Beforesend (XMLHttpRequest)
{
$ ("#showResult"). Append ("<div> send Request .....<div>");

}
function Callback (MSG)
{
$ ("#showResult"). Append ("Successful <div> request, return number:" +msg+ "<div>");
}
</script>

The HTML code is as follows:

Copy Code code as follows:

<input value= "Text_ajax function" type= "button" onclick= "Text_ajax ()"/>
<div id= "Showresult" >
</div>

Response Page Jqueryajax.aspx
Background code:

Copy Code code as follows:

protected void Page_Load (object sender, EventArgs e)
{
Response.Write ("Hehe!") The test was successful! ");
}

Three, about jquery Ajax Chinese garbled problem

Method One: Use encodeURI two times before submitting the code, remember must be two times

1. Modify the following code

Copy Code code as follows:

Data:{id:1, Type:encodeuri (encodeURI (' Commodities '))}

2. In the background action to decode the obtained string

Copy Code code as follows:

String type = Request.getparameter ("type");
Type = Urldecoder.decode (type, "UTF-8");

Method Two: Ajax configuration contenttype properties, plus Charset=utf-8

Add the following parameters to the Ajax method

Copy Code code as follows:

ContentType: "application/x-www-form-urlencoded; Charset=utf-8″

Use other JS frame or XHR is similar, set header contenttype can,

The key here is charset=utf-8, if there is no this, is not, the default jquery contenttype is not.
In addition, we need to add that jquery has already done a encodeuricomponent processing of the parameters.

In comparison, method two does not need to be decode in action, so this method is recommended.

I hope this article will help you with your AJAX programming.