Using Ajaxrequest for AJAX application Development (1)-First knowledge ajaxrequest
Objective
After releasing several versions of the Ajaxrequest class, many friends gradually used it, and many friends asked me if I had more detailed descriptions and examples. But because of the problem of time and the limited number of examples I can think of, I haven't written a few more examples. Having thought about it, I decided to write a tutorial on ajaxrequest in the hope of helping friends who use the Ajaxrequest class.
Get ready
Before using Ajaxrequest for AJAX development, you need to do the following:
Preparation knowledge: JavaScript basic syntax, Documentation object Model (DOM) knowledge, and at least one language to master background programming (I write examples in ASP as programming language).
Preparation tools: EditPlus or other text editors (Dreamweaver or Visual Web Developer can also), and WEB servers for local testing (IIS or Apache or Netbox or whatever).
Download the Ajaxrequest class: You can download the http://www.xujiwei.cn/works/ajaxrequest/to the latest version of the Ajaxrequest class.
To do AJAX development, you need to understand JS programming, this is the needs of J in Ajax, as well as background programming, this is the need for dynamic processing in the server, DOM used to process information, the results presented to the user. And the tool side, the text editor can choose you like, I prefer to use editplus.
As for the test Web server, it depends on the background programming language you use, such as ASP or asp.net is iis,php can choose Apache and so on. Another option for running an ASP is Netbox, but Netbox is not very good with UTF-8 support, and if you don't involve non-English output, consider choosing this lightweight server software.
As for why to build a test server locally rather than directly in the browser, because from the outset in the same environment with the server development, can be in the future development process to reduce many inexplicable errors.
Begin
In the tutorial example, I will write the JS code in a separate way from the XHTML code, where the Ajaxrequest class file Ajaxrequest.js is placed in the same directory as the example code.
hello,world!
By convention, with a "hello,world!" To start.
Helloworld.htm
Program code:
Copy Code code as follows:
<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en"
"Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<meta name= "Author" content= "Xujiwei"/>
<meta name= "Copyright" content= "www.xujiwei.cn"/>
<meta name= "description" content= "Hello,world"/>
<title>Hello,World!</title>
<!--contains ajaxrequest class files-->
<script type= "Text/javascript" src= "Ajaxrequest.js" ></script>
<!--JS code that contains the page needs-->
<script type= "Text/javascript" src= "Helloworld.js" ></script>
<body>
<!--a button, click Call Function Showhello, show welcome information-->
<button onclick= "Showhello ();" > Display hello,world!</button>
</body>
In helloworld.htm, we placed a button on the page that triggers the Showhello function to display the information obtained from the server.
Helloworld.js
Program code:
Copy Code code as follows:
Create a Ajaxrequest object that saves the object as a global variable, so that you only need to create a Ajaxrequest class object once in the entire page application, rather than creating it repeatedly.
var ajax=new ajaxrequest ();
/////////////////////////////////////////
Showhello
Description: Sends a request to the server and displays the return information
Parameters: None
Back: None
/////////////////////////////////////////
function Showhello () {
Use the Get method to obtain the contents of the file Helloworld.txt to the server.
and processing in the function mycallback
Ajax.get ("Helloworld.txt", mycallback);
}
/////////////////////////////////////////
Mycallback
Description: Sends a request to the server and displays the return information
Parameters: Obj-xmlhttprequest object, saving server-side return information
Back: None
/////////////////////////////////////////
function Mycallback (obj) {
Use alert to display the content returned by the service side
Obj.responsetext is the content of Helloworld.txt
alert (Obj.responsetext);
}
In Helloworld.js, you create a global variable Ajax that saves a Ajaxrequest object, and if you need to use ajaxrequest for more than one function, you don't need to re-create the Ajaxrequest class instance, just use Ajax directly. Because of the characteristics of the connection pool in the Ajaxrequest class, it does not appear that subsequent requests overwrite the previous request when the network latency is large.
Helloworld.txt
Program code:
hello,world!
Helloworld.txt for the content required by the client, welcome information "hello,world!".
Summary
In the previous tutorial, we wrote a small AJAX application that was used to get a text file from the server with the Ajaxrequest class on the client and display its contents. As can be seen, in the above program, we are simply using the Ajaxrequest get method, the completion of the process from the server to obtain file content.
In the next tutorial, we will continue to learn the use of ajaxrequest classes.
To be Continued ...
