Home > Developer > ASP

Implement XMLHttpRequest using ASP

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞
Currently, Ajax can be implemented in many languages, such as Java and. Net. In fact, the core content of Ajax is XMLHttpRequest. If you are not familiar with XMLHttpRequest, you can find The article Dynamic HTML and XML: The XMLHttpRequest Object on Google. This article is detailed and I do not need to explain XMLHttpRequest too much. I will explain the following and demonstrate how to use XMLHttpRequest in ASP to achieve no refreshing effect.

First, create an ASP page with simple code:

<Html>
<Head>
<Script>
Var req = null;
Var dom = new ActiveXObject ("Microsoft. XMLDOM ");
Var url = 'HTTP: // localhost/ajaxtest/action. asp? Q = ';
</Script>
</Head>
<Body onload = "loadHTTP ()">
<Form action = "adtion. asp" name = "Form1">
<INPUT type = "text" ID = "Text1" NAME = "Text1"
Onblur = "InitReq (this. value)">
<DIV id = test> </DIV>
</Form>
</Body>

We can see that we have declared several JS variables in the Head label, which is used to prepare for writing JavaScript code later.

Then we declare an XMLHTTPRequest object using JS.

// Declare a XMLHTTPRequest Object.
Function loadHTTP ()
{
If (window. ActiveXObject)
{
// Microsoft Way
Req = new ActiveXObject ("Microsoft. XMLHTTP ");
}
Else if (window. XMLHttpRequest)
{
// Others
Req = new XMLHttpRequest ();
}
}

The onblur event of TextBox triggers an InitReq method. The parameter is the Value of this TextBox.

Let's take a look at the InitReq method: // initial it
Function InitReq (_ url)
{
Req. open ("GET", (url + _ url), true );
Req. onreadystatechange = HttpHandler;
Req. send (null );
}

Note that the req. onreadystatechange = HttpHandler statement indicates that the HttpHandler function is used to handle the onreadystatechange event of XMLHttpRequest. Once the onreadystatechange of XMLHttpRequest is triggered, the user-defined function will be executed. Of course, the name can be casual, not necessarily HttpHandler.
Below is my own HttpHandler function:

// Handler
Function HttpHandler ()
{
If (req. readyState = 4)
{
If (req. status = 200)
{
Var tt = document. getElementById ("test ");
Tt. innerHTML = req. responseText;
}
Else {alert ('error! ');}
}
}

Okay, so far our client functions have been completed. There are only three functions, which is simple. Haha.

This page has only one TextBox. You can enter some characters in it. When this TextBox loses focus, the page will have a request to the action. asp page. For convenience, action. asp simply returns the content entered by the user, indicating that the message is successfully received: <% if request. QueryString ("q") <> "then
Response. Write (request. QueryString ("q "))
End if
%>

It's all done here. You can try it and see if a progress bar will appear after the focus is lost in the text box, and then the page is refreshed as usual?

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

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

Get Started for Free

  • Sales Support

    1 on 1 presale consultation

    Chat Contact Sales

  • After-Sales Support

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

    Open a Ticket

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

    Learn More