Encapsulation of the Ajax Basics Tutorial (iii) _ajax related

Source: Internet
Author: User

In the previous article to introduce the AJAX basic detailed tutorial (i) Ajax basic detailed tutorial (ii)

Today we go on the chestnut of the blog, now I want to expand the demand, before the click of the button to take out the news, now to achieve every other event to update the news. This time, must add a timer, and then every other event, another Ajax request, since to often use the AJAX request, the encapsulation function is very necessary, first look at the last Chestnut JS code, we have to carry out encapsulation.

Window.onload = function () {
var obtn = document.getElementById (' btn '); 
Obtn.onclick = function () {
var xhr = null;
if (window. XMLHttpRequest) {
xhr = new XMLHttpRequest ();
} else{
xhr = new ActiveXObject (' microsoft.xmlhttp ');
} 
Xhr.open (' Get ', ' getnews.php ', true);
Xhr.send ();
Xhr.onreadystatechange = function () {
if (xhr.readystate = 4) {
if (Xhr.status = 200) {//red identifies the task performed after success 
   var data = Json.parse (Xhr.responsetext); Convert background-acquired content to JSON type each JSON has two keys: Title and date
var Oul = document.getElementById (' ul1 ');//Get node var showing news list
html = ';
for (var i=0 i<data.length; i++) {//loop all JSON data and add each bar to the list
html = ' <li><a href= ' "> ' +data[i]. Title+ ' </a> [<span> ' +data[i].date+ ' </span>]</li> ';
}
oul.innerhtml = html; Put the content on the page
} else {
alert (' Error, ERR: ' + xhr.status);}
}
}
}

The key point of the encapsulation function is to extract the reused parts, while some changes are taken as parameters and cannot be judged as parameters.

1 So let's take a look at what's changed: 1 the request is Get/post 2 The requested address 3 the requested data 4 what needs to be done after the request succeeds

So these four are the parameters of the function: Ajax (method,url,data,success);

2 because of the different request way, we transmit the data the way is not same, therefore for these, needs to carry on the condition judgment.

3 There is also a question about Xhr.responsetext, variable XHR is declared in the encapsulation function, so this thing belongs to the Ajax function, we do not use in the success function, but success this function need to use this data. So the solution is to call the success function in the package function, the Xhr.responsetext as a parameter. Success (Xhr.responsetext).

In fact, this is a callback, the callback is a function as a parameter of another function, and in another function is called, this chestnut is success as an AJAX function parameters, and in the Ajax inside is called. (In fact, the personal feeling is the function in the parameters, function parameters, is to use, but now the parameters are functions, so call Bai).

So this is what happens after encapsulation:

Function Ajax (method, URL, data, success) {
var xhr = null;
try {
xhr = new XMLHttpRequest (),
catch (E) {
xhr = new ActiveXObject (' microsoft.xmlhttp ');
}
if (method = = ' Get ' && data) {
URL = '? ' + data;
}
Xhr.open (method,url,true);
if (method = = ' Get ') {
xhr.send ();
} else {
xhr.setrequestheader (' Content-type ', ' application/ X-www-form-urlencoded ');
Xhr.send (data);
}
Xhr.onreadystatechange = function () {
if (xhr.readystate = 4) {
if (Xhr.status =) {
Success & & Success (Xhr.responsetext); If the function exists on the execution of the following && execution process is the front of the true, before performing the following.
else {
alert (' Error, ERR: ' + xhr.status);
}
}}

This is the call.

Ajax (' Get ', ' getnews.php ', ' ', function (data) {
var data = json.parse (data); 
var Oul = document.getElementById (' ul1 ');
var html = ';
for (var i=0 i<data.length; i++) {
html = ' <li><a href= ' ' > ' +data[i].title+ ' </a> [<span > ' +data[i].date+ ' </span>]</li> ';
}
oul.innerhtml = html;

In fact, this package is not so good, such as the data above, we still have to occupy, like jquery inside the JSON format to pass the ginseng, it is convenient, at present has not summed up well, later added.

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.