Home > Developer > Ajax

Implement Ajax using BOA CGI

Source: Internet
Author: User
Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

I mainly see a blog post on the Internet. The modification is as follows:

1. Create an HTML webpage file. File Name: test.html

<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> application of C + CGI + Ajax in S3C2440 </title>
<Script language = "JavaScript" src = "xmlhttpreq. js"> </SCRIPT>
</Head>
<Body>
<H3> get the current server time <P> current server time: <Div id = "current_time"> </div> </P>
<Input type = "button" value = "Submit" onclick = "sender ()"/>
</Body>
</Html>

2. Create a Javascript script file that implements asynchronous Ajax access to the server. File Name: xmlhttpreq. js

/*
* Create an asynchronous Access Object
*/
Function createxhr ()
{
VaR xhr;


    try 
    {
        xhr = new ActiveXObject("Msxml2.XMLHTTP");
    } 
    catch (e) 
    {
        try 
        {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");
        }
        catch(E) 
        {
            xhr = false;
        }
    }

    if (!xhr && typeof XMLHttpRequest != 'undefined') 
    {
        xhr = new XMLHttpRequest();
    }

    return xhr;
}

/*
* Asynchronous access submission
*/
Function sender ()
{
Xhr = createxhr ();

    if(xhr)
    {
        xhr.onreadystatechange=callbackFunction;
    

// The cur_time parameter is followed by test. cgi to prevent Ajax page caching.
Xhr. Open ("get", "cgi-bin/test. cgi? Cur_time = "+ new date (). gettime ());

Xhr. Send (null );
}
Else
{
// XMLHTTPRequest object creation failed
Alert ("the browser is not supported. Please change the browser! ");
}
}

/*
* Asynchronous callback function processing
*/
Function callbackfunction ()
{
If (xhr. readystate = 4)
{
If (xhr. Status = 200)
{
VaR returnvalue = xhr. responsetext;

If (returnvalue! = NULL & returnvalue. length> 0)
{
Document. getelementbyid ("current_time"). innerhtml = returnvalue;
}
Else
{
Alert ("the result is blank! ");
}
}
Else
{
Alert ("Page exception! ");
}
}
}

3. Create a server-side application. File Name: Test. c

#include <stdio.h>
#include <stdlib.h>
#include <time.h>

Int main (void)
{
Time_t current;
Struct TM * timeinfo;
Time (& Current );
Timeinfo = localtime (& Current );

// This sentence must be added; otherwise, page exceptions may occur during asynchronous access.
Printf ("content type: text/html \ n ");

    printf("%s", asctime(timeinfo));
}

Compile test. C on the terminal command line of Fedora 9 to generate the test. cgi file, as shown below:

Arm-Linux-gcc-O test. cgi test. c

4. Download The test.html and xmlhttpreq. js files to the WWW directory of the Development Board. (Note: The WWW directory is the document root directory of the BOA server. You can configure the DocumentRoot node in the/etc/BOA/boa. conf file of the Development Board to another directory. Then, these three files will be downloaded to the directory you configured ). Test. cgi is placed in the cgi-bin directory. This directory is the CGI configuration directory of BOA. Make sure that the CGI under this directory can be executed first.

5. connect the development board to the network, open the browser on the PC, and enter: http: // 192.168.1.230/test.html (note: this IP address is the IP address of your development board, also, this CIDR block must be the same as the pc cidr Block). The running effect is as follows ,:

After you click the submit button, the CGI program on the server is asynchronously accessed to obtain the system time on the server. You can see that after the button is submitted, the browser will retrieve the system time without refreshing it. Run the following command:

The above is based on some of the content copied by netizens.

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