Prototype support for Ajax
ajax.request class
The following code is an example:
<!--client: Index.htm-->
<script language= "javascript" type= text/javascript "src=" Prototype1.6.js "></script>
<script language=" javascript "
function Test () {
var myajax = new Ajax.request (
' data.html ',
{
Method: ' Get ',
oncomplete:showresponse
}
);
}
&nbsP function Showresponse (response) {
$ (' Mydiv '). Innerhtml=response.responsetext;
}
</script>
<body>
<input type= "button" value= "click" onclick= "Test ()"/>
<div id= "mydiv"/>
</body>
<!--server: Data.html-->
< Head>
<meta http-equiv= "Content-type content=" text/html; charset=gb2312 "
<script language=" javascript "type=" text/ JavaScript "src=" Prototype1.6.js "></script>
<body>
ajax.request DEMO
</body>
Ajax Action option attribute meaning:
method HTTP request method (Post/get/head)
parameters the list of values in the URL format passed in to the HTTP request, which is the part of the URL string after the question mark
asynchronous Do you want to make an asynchronous XMLHttpRequest request
postbody in the POST request mode, the contents of the incoming request body
requestheaders A list of HTTP headers to be passed along with the request, which must contain even several items
onxxxxxxx in the process of HTTP request, response, The response that is invoked when the state of the XMLHttpRequest object has changedfunction The response function has 5:onuninitialized, onloading, onloaded, oninteractive and oncomplete
onsuccess The response function that is invoked when the Ajax operation completes successfully, and the incoming arguments are the same as Onxxxxxx
onfailure The response function that is invoked when an AJAX operation request completes, but an error occurs, and the passed parameter is the same as onxxxxxx
onexception The response function that is invoked when an exception occurs in an AJAX operation that can receive two parameters, and the 1th parameter is the XMLHttpRequest object that executes the HTTP request , the 2nd parameter is an exception object
Ajax.updater class
The following code example:
<!--client:index.htm-->
<html>
<head>
<meta http-equiv= "Content-type" content= "text/html;charset=gb2312" >
<script language= "javascript" type= "Text/javascript" src= "Prototype1.6.js" ></script>
<script language= "JavaScript" >
function Test () {
var myajax = new Ajax.updater (
' Mydiv ',
' data.html ',
{
method: ' Get '
}
);
}
</script>
</head>
<body>
<input type= "button" value= "click" onclick= "Test ()"/>
<div id= "mydiv"/>
</body>
</html>
<!--service End:data.html-->
<html>
<head>
<meta http-equiv= "Content-type" content= "text/html;charset=gb2312" >
<script language= "javascript" type= "Text/javascript" src= "Prototype1.6.js" ></script>
</head>
<body>
ajax.request DEMO
</body>
</html>
In addition, the Ajax.updater class has another feature that, if the requested page content includes a Javascript,ajax.updater class that can execute the script, only in the Ajax operation options Adding a property "Evalscripts:true" is OK. The above example is modified to get the following example:
<!--client:index.htm-->
<html>
<head>
<meta http-equiv= "Content-type" content= "text/html;charset=gb2312" >
<script language= "javascript" type= "Text/javascript" src= "Prototype1.6.js" ></script>
<script language= "JavaScript" >
function Test () {
var myajax = new Ajax.updater (
' Mydiv ',
' Data.html ',
{
method: ' Get ',
evalscripts:true
}
);
}
</script>
</head>
<body>
<input type= "button" value= "click" onclick= "Test ()"/>
<div id= "mydiv"/>
</body>
</html>
<!--server: Data.html-->
< Head>
<meta http-equiv= "Content-type content=" text/html; charset=gb2312 "
<script language=" javascript "type=" text/ JavaScript "src=" Prototype1.6.js "></script>
<script language= "JavaScript" type= "Text/javascript"
sayhi = function () {
alert ("Heelo," + $F (' name ') + "!");
}
</script>
<body>
<Input type= "text" id= "name" value= "Ajax.updater DEMO"/>
<input Type= "button" value= "click Me" onclick= "Sayhi ()"/>
</body>
If we change the function of Sayhi blackbody in data.html to: function sayhi{...} or var sayhi = function () {...}, the program will not function correctly. This is because Ajax.updater executes the script in an eval way, rather than introducing the script content to the current page, declaring the scope of the Sayhi function declared with Var only within this script, outside of which other scripts cannot be accessed, The scope of the sayhi described in bold is the entire window.
Ajax.periodupdater class
in some AJAX applications, some page elements need to be updated periodically, such as weather forecasts, news, and so on. Implementing such a function usually uses the timer function in JavaScript settimeout, cleartimeout, and so on, with Ajax.peri The Odupdater class can be greatly simplified.
you need to specify 3 parameters to create an instance of a Ajax.periodupdater class:
container: The page element ID that will be updated;
URL: The URL address of the request;
Options:ajax operation Options
Like the
and Ajax.updater classes, the Ajax.periodupdater class also supports the dynamic execution of JavaScript scripts by adding (evalscripts:true) property values to the Ajax operation options.
The Ajax.periodupdater class supports two special AJAX operation options, frequency and decay. The frequency parameter is easy to understand, is to update the page element regularly, or to execute the script regularly, frequency refers to the time interval between two Ajax operations, in seconds, the default value is 2
The following code is an example:
<!--client:index.htm-->
<html>
<head>
<script language= "javascript" type= "Text/javascript" src= "Prototype1.6.js" ></script>
<script language= "JavaScript" >
function Test () {
var myajax = new Ajax.periodicalupdater (
' Mydiv ',
' data.html ',
{
method: ' Get ',
Evalscripts:true,
Frequency:1,
Decay:2
}
);
}
</script>
</head>
<body>
<input type= "button" value= "click" onclick= "Test ()"/>
<div id= ' mydiv '/>
</body>
</html>
<!--service End:data.html-->
<html>
<head>
<script language= "javascript" type= "Text/javascript" src= "Prototype1.6.js" ></script>
<script language= "javascript" type= "Text/javascript" >
count=9;//Manually change the number, we can see the value of index.htm page mydiv element being updated at the same time
$ (' MyDiv1 '). InnerHTML = "Count =" + Count + ":" + new Date () + "<br>";
</script>
</head>
<body>
<div id= ' myDiv1 '/>
</body>
</html>
Ajax.responders Object
This class maintains a list of running Ajax objects that you can use when you need to implement some global functionality. For example, after an AJAX request is issued, you need to prompt the user that the action is in progress, and then cancel the prompt after the operation, as follows:
<!--client:index.htm-->
<html>
<head>
<meta http-equiv= "Content-type" content= "text/html;charset=gb2312" >
<script language= "javascript" type= "Text/javascript" src= "Prototype1.6.js" ></script>
<script language= "JavaScript" >
function Test () {
var myajax = new Ajax.request (
' data.html ',
{
method: ' Get ',
Oncomplete:showresponse
}
);
}
function Showresponse (response) {
$ (' mydiv '). Innerhtml=response.responsetext;
}
var handle={
oncreate:function () {
element.show (' Loading '); When creating an AJAX request, display loading
},
oncomplete:function () {
/////When the request returns successfully, hide loading
If there are no other AJAX requests running at the moment
if (Ajax.activerequestcount = = 0) {
Element.hide (' loading ');
}
}
};
//registers the handle into the global Ajax.responders object to take effect
Ajax.Responders.register (handle);
</script>
</head>
<body>
<input type= "button" value= "click" onclick= "Test ()"/>
<div id= "mydiv"/>
<div id= "Loading" style= "Display:none" >
<img src= "Loading.gif" >loading ...
</div>
</body>
</html>
<!--service End:data.html-->
<meta http-equiv= "Content-type" content= "text/html;charset=gb2312" >
<body>
Ajax.responders DEMO
</body>
This defines a handle object that contains the OnCreate and OnComplete functions that invoke the OnCreate method when any Ajax request is made in the page, and the OnComplete method is invoked when the request completes.
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
