Use AJAXRequest for AJAX application development (1)-First knowledge of AJAXRequest
Preface
After several versions of the AJAXRequest class were released, many friends gradually used it, and many friends asked me if I had more detailed instructions and examples. However, due to time issues and limited examples I can think of, I have not written several examples. After thinking about it, I decided to write a tutorial on AJAXRequest, hoping to help my friends who use the AJAXRequest class.
Preparation
Before using AJAXRequest for AJAX development, you need to make the following preparations:
Preparation knowledge: Basic JavaScript syntax, knowledge about the Document Object Model (DOM), and at least one background programming language (I wrote an example using ASP as the programming language ).
Preparation tools: EditPlus or other text editors (either Dreamweaver or Visual Web Developer), and Web servers for local testing (IIS, Apache, NetBox, or others ).
Download the AJAXRequest class: you can download the latest version of the ajaxrequestclass at http://www.xujiwei.cn/works/ajaxrequest.
To conduct AJAX development, you need to understand JS programming. This is the need for J in AJAX and background programming. This requires dynamic processing on the server and DOM for processing information, present the result to the user. In terms of tools, you can select your preferred text editor. I prefer EditPlus.
As for the Web server used for testing, it depends on the background programming language you use. For example, ASP or ASP. NET is IIS and PHP can be selected as Apache. Another option to run ASP is NetBox, but NetBox does not support UTF-8 very well. If it does not involve non-English output, you can consider choosing this lightweight server software.
As to why we need to build a test server locally instead of running it directly in a browser, it is because it was developed in a similar environment as the server from the very beginning, you can reduce many inexplicable errors in the future development process.
Start
In the examples of subsequent tutorials, I will write them in separate JavaScript code and XHTML code. The AJAXRequest class file ajaxrequest. JS is placed in the same directory of the sample code.
Hello, World!
By convention !" .
Helloworld.htm
Program code:
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN"
Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta name = "author" content = "xujiwei"/>
<Meta name = "copyright" content = "www.xujiwei.cn"/>
<Meta name = "description" content = "hello, world"/>
<Title> Hello, World! </Title>
<! -- Contains the AJAXRequest class file -->
<Script type = "text/javascript" src = "ajaxrequest. js"> </script>
<! -- Contains the JS Code required by the page -->
<Script type = "text/javascript" src = "helloworld. js"> </script>
</Head>
<Body>
<! -- A button and click showHello to display the welcome information -->
<Button onclick = "showHello ();"> Hello, World! </Button>
</Body>
</Html>
In helloworld.htm, we place a button on the page to trigger the showHello function and display the information obtained from the server.
Helloworld. js
Program code:
Copy codeThe Code is as follows:
// Create an AJAXRequest object and save it as a global variable. In this way, you only need to create an AJAXRequest class object once in the whole page application without creating it again.
Var ajax = new AJAXRequest ();
/////////////////////////////////////////
// ShowHello
// Description: sends a request to the server and displays the returned information.
// Parameter: None
// Return: None
/////////////////////////////////////////
Function showHello (){
// Use getaskto obtain the content of the helloworld.txt file from the service end,
// And process it in the mycallback Function
Ajax. get ("helloworld.txt", mycallback );
}
/////////////////////////////////////////
// Mycallback
// Description: sends a request to the server and displays the returned information.
// Parameter: obj-XMLHttpRequest object. Save the information returned by the server.
// Return: None
/////////////////////////////////////////
Function mycallback (obj ){
// Use alert to display the content returned by the server
// The content of obj.responsetextis helloworld.txt
Alert (obj. responseText );
}
In helloworld. in js, a global variable ajax is created to save an AJAXRequest object. If multiple functions need to use AJAXRequest, you do not need to recreate the AJAXRequest class instance, you only need to use ajax directly. Because the AJAXRequest class has the connection pool feature, there is no need to overwrite the previous request when the network latency is large.
Helloworld.txt
Program code:
Hello, World!
Helloworld.txt is the content required by the client. Welcome to the "Hello, World!" message !".
Summary
In the above tutorial, we wrote a small AJAX application to obtain a text file from the server using the AJAXRequest class on the client and display its content. As you can see, in the above program, we simply used the AJAXRequest get method to get the file content from the server.
In the next tutorial, we will continue to learn how to use the AJAXRequest class.
To be continued...
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
