Copy Code code as follows:
Creating XHR Objects
var xhr;
if (window. XMLHttpRequest) {
XHR = new XMLHttpRequest ();
}
else if (window. ActiveXObject) {
XHR = new ActiveXObject ("Msxml2.xmlhttp");
}
else {
throw new Error ("Ajax is isn't supported by this browser");
}
function Ready ()
{
Alert ("Start ...");
Handling asynchronous requests through events
Xhr.onreadystatechange = function ()
{
if (xhr.readystate = 4)
{
Alert ("Ready.");
if (Xhr.status = 200)
{
Alert ("Successfully obtained results from server return.");
After the request is complete, you can get what the server returns
alert (Xhr.responsetext);
Get the JSON object returned by the server
var alice = eval ("+ Xhr.responsetext +"));
alert (alice.name);
}
}
};
Set Request parameters
Xhr.open ("Get", "Data.json");
Xhr.send (NULL);
}
jquery simply wraps the use of the XHR object, adding common access methods to the JQuery object and then providing it to the JQuery object for use.
Copy Code code as follows:
The main extension is in the Jquery.ajax.
Jquery.extend ({//#6299
Default parameters for the request
Ajaxsettings: {
Url:location.href,
Type: "Get",
ContentType: "Application/x-www-form-urlencoded",
Data:null,
Xhr:window. XMLHttpRequest && (window.location.protocol!== "file:" | |! Window. ActiveXObject)?
function () {
Return to new window. XMLHttpRequest ();
} :
function () {
try {
Return to new window. ActiveXObject ("Microsoft.XMLHTTP");
catch (e) {}
}
},
Used to set the jquery.ajaxsettings, set the requested parameters
Ajaxsetup:function (Settings) {
Jquery.extend (jquery.ajaxsettings, settings);
},
Ajax:function (origsettings) {//actual AJAX functions
var s = Jquery.extend (true, {}, jquery.ajaxsettings, origsettings);
Creating XHR Objects
XHR = S.XHR ();
callback function
var onreadystatechange = Xhr.onreadystatechange = function (istimeout) {
if (xhr.readystate = = 4) {
if (Xhr.status = = 200) {
S.success.call (Origsettings, Xhr.responsetext);
}
}
};
Set Request parameters
Xhr.open (S.type, S.url);
Send the data issue request
Xhr.send (S.data);
Return XMLHttpRequest to allow aborting the request etc.
return XHR;
},
How to emit an AJAX request using Get method
Get:function (URL, data, callback, type) {
Shift arguments if data argument was omited
if (jquery.isfunction (data)) {
Type = Type | | Callback
callback = data;
data = null;
}
Return Jquery.ajax ({
Type: "Get",
Url:url,
Data:data,
Success:callback,
Datatype:type
});
}
}); #6922
Extend the JQuery object to increase the Load method
JQuery.fn.extend (
{
Load:function (URL) {
var self = this;
Jquery.get (URL, function (data) {
Self.each (function () {
this.innerhtml = data;
}
)
}
)
}
}
)
In the page, you can use the following.
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
<title></title>
<body>
<input type= "button" id= "BTN" value= "click Me"/>
<div id= "MSG" >
</div>
<script src= "Jquery-core.js" type= "Text/javascript" ></script>
<script src= "Jquery-event-2.js" type= "Text/javascript" ></script>
<script src= "Jquery-data.js" type= "Text/javascript" ></script>
<script src= "Jquery-extend.js" type= "Text/javascript" ></script>
<script src= "Jquery-ajax.js" type= "Text/javascript" ></script>
<script type= "Text/javascript" >
$ ("#btn"). Click (function () {
$ ("#msg"). Load ("Hello.txt");
})
</script>
</body>
