[Migration text] Ajax initial experience

Source: Internet
Author: User

Recently, some tricky things have been encountered in the project. It is not easy to solve the problem with conventional methods, so we have to use the new weapon Ajax.

I used this Ajax for the first few times, but its charm fascinated me. With it, when a page requests a few things from the server, you don't have to submit all the forms in the "submit all" format once. Instead, you only need to submit the required information, change the part of the page.

If you see this article, you are not a programmer, think about the NBA text live broadcast of those sports websites (note that it is text). The previous web pages are static, but a little different, the whole page needs to be refreshed again, while text live streams can continuously roll and broadcast new information without moving anywhere else, and the score board will also be updated in real time, that's Ajax. (IFRAME may be used for rolling the game information, but the score board must be Ajax, because I have not done this, so it is hard to draw a conclusion)

As for how Ajax is applied in my project, I don't need to talk about it. It's just one of the most important aspects of Ajax-the XMLHttpRequest feature.

First, you need to obtain the XMLHTTPRequest object from the browser. Because of the wide variety of browsers, different browsers have different names for this object. The following code is more reliable when used across browsers:

 

VaR XMLHTTP;
Try {
XMLHTTP = new activexobject ('msxml2. xmlhttp ');
}
Catch (E)
{
Try {
XMLHTTP = new activexobject ('Microsoft. xmlhttp ');
}
Catch (e ){
Try {
XMLHTTP = new XMLHttpRequest ();
}
Catch (e ){}
}
}

 

The layer-3 nested try-catch is ugly but practical.

After obtaining the XMLHTTPRequest object, you should do something about interaction.

The XMLHttpRequest. open () method can be used to create a request, which is like the previous try-catch method that gets you a gun, while the open () method is loaded. Only launch. The open () method also contains four parameters, including a URI, which can point to an action, so that you can rely on this action to perform any complicated logic on the servlet, and return the results required for this request. For details about the open () method, refer to other learning and instructions.

Of course, not all guns are fired immediately when they are loaded. You have to determine the target, that is, to determine what to do and who to kill. XMLHttpRequest is also used. XMLHttpRequest is composed of a callback function, onreadystatechange (). The content is written in this function. It is called when every preparation status (as mentioned below) of XMLHttpRequest changes.

Onreadystatechange () is also a common usage

 

XMLHTTP. onreadystatechange = function (){
If (XMLHTTP. readystate = 4)
{
If (XMLHTTP. Status = 200 ){
Document. All. filetable. deleterow (currrow. rowindex); // Delete
}
Else {
Alert ("error ");
}
}
}

 

Readystate is the preparation state of XMLHttpRequest. When it is 4, it indicates that the result has been generated and returned to the client. It is ready for use at any time. Therefore, when it is checked as 4, for further operations.

Status is a status after XMLHttpRequest gets a response, and 200 means "OK", indicating that everything is okay, therefore, you can connect to the actual operation (the logic operation on the server side is stolen and processed in the Action pointed to by the attacker's browser, this is where two if packets are wrapped.) An XMLHTTP is usually used here. responsetext attribute, Which is the result returned by the action from the server. The returned value is null, so it is not used. Note that responsetext is fully available when readystate is 4.

Finally, it is also the most critical step, that is, XMLHTTP. Send (null); you can add some data to null and submit it in post mode.

The loaded gun finally pulled the trigger.

(Note that the onreadystatechange () method is a callback function and does not actively execute it. Send is the method that actually submits requests generated by XMLHTTP. After that, the readystate of XMLHTTP changes every time, onreadystatechange ())

PS:

Another small problem is the quotation marks in Javascript. In JavaScript, double quotation marks and single quotation marks seem to be treated equally, just like a thing. So every time I see JavaScript, I always feel that the quotation marks are messy. However, the key point is that during nesting, a single double quotation mark must be used for interaction, instead of "" ABCD "" Or ''abcd'', because the quotation marks are not like parentheses, the quotation marks for start and end are the same, so "ABCD" will be treated as "" ABCD "" And ''abcd. "'Abcd'" or '"ABCD"' is correct.

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.