Cổng vào tri thức => Tin học => Topic started by: saos@ngmo on 31/07/07, 17:44 Return to Full Version
Title: làm quen cùng AJAX
Post by: saos@ngmo on 31/07/07, 17:44
Post by: saos@ngmo on 31/07/07, 17:44
Auto-refreshing dynamic content using AJAX
Using AJAX, it is possible to regularly auto-refresh a section of a webpage containing dynamic content without reloading the whole page.
Auto-refreshing dynamic content using AJAX
The script uses an XMLHTTPRequest to retrieve a dynamic page which is then inserted into the output page.
This content is then refreshed automatically using the Javascript setTimeout() function.
First of all you need a dynamic content page.
I've used a simple ASP date & time script as an example and named the page time.asp:
<% Response.CacheControl = "no-cache" %>
<%= Date %> @ <%= Time %>
You need to include the line:
<% Response.CacheControl = "no-cache" %>
As Internet Explorer will cache this page otherwise, and the content will not be updated on the output page.
Next, place the following script in the head of the output page:
<script type="text/javascript">
var page = "time.asp";
function ajax(url,target)
{
// native XMLHttpRequest object
document.getElementById(target).innerHTML = 'sending...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send(null);
// IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send();
}
}
setTimeout("ajax(page,'scriptoutput')", 10000);
}
function ajaxDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200 || req.status == 304) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="ajax error:\n" +
req.statusText;
}
}
}
</script>
Set the variable for your dynamic content page at the top of the script:
var page = "time.asp";
Adjust the content reload time (currently set at 10000 milli-seconds or 10 seconds):
setTimeout("ajax(page,'scriptoutput')", 10000);
Add an onload event to the page's body tag to call the script:
<body onload="ajax(page,'scriptoutput')">
Define an area for the content - in this case is just a span within a paragraph:
<p>Current Server date & time (updated every 10 seconds):
<span id="scriptoutput"></span></p>
Finally, save the page and upload it along with time.asp to the same folder in your webspace.
Nguồn: http://www.openhosting.co.uk/articles/webdev/6004/
Using AJAX, it is possible to regularly auto-refresh a section of a webpage containing dynamic content without reloading the whole page.
Auto-refreshing dynamic content using AJAX
The script uses an XMLHTTPRequest to retrieve a dynamic page which is then inserted into the output page.
This content is then refreshed automatically using the Javascript setTimeout() function.
First of all you need a dynamic content page.
I've used a simple ASP date & time script as an example and named the page time.asp:
<% Response.CacheControl = "no-cache" %>
<%= Date %> @ <%= Time %>
You need to include the line:
<% Response.CacheControl = "no-cache" %>
As Internet Explorer will cache this page otherwise, and the content will not be updated on the output page.
Next, place the following script in the head of the output page:
<script type="text/javascript">
var page = "time.asp";
function ajax(url,target)
{
// native XMLHttpRequest object
document.getElementById(target).innerHTML = 'sending...';
if (window.XMLHttpRequest) {
req = new XMLHttpRequest();
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send(null);
// IE/Windows ActiveX version
} else if (window.ActiveXObject) {
req = new ActiveXObject("Microsoft.XMLHTTP");
if (req) {
req.onreadystatechange = function() {ajaxDone(target);};
req.open("GET", url, true);
req.send();
}
}
setTimeout("ajax(page,'scriptoutput')", 10000);
}
function ajaxDone(target) {
// only if req is "loaded"
if (req.readyState == 4) {
// only if "OK"
if (req.status == 200 || req.status == 304) {
results = req.responseText;
document.getElementById(target).innerHTML = results;
} else {
document.getElementById(target).innerHTML="ajax error:\n" +
req.statusText;
}
}
}
</script>
Set the variable for your dynamic content page at the top of the script:
var page = "time.asp";
Adjust the content reload time (currently set at 10000 milli-seconds or 10 seconds):
setTimeout("ajax(page,'scriptoutput')", 10000);
Add an onload event to the page's body tag to call the script:
<body onload="ajax(page,'scriptoutput')">
Define an area for the content - in this case is just a span within a paragraph:
<p>Current Server date & time (updated every 10 seconds):
<span id="scriptoutput"></span></p>
Finally, save the page and upload it along with time.asp to the same folder in your webspace.
Nguồn: http://www.openhosting.co.uk/articles/webdev/6004/
Title: Re: Thay đổi thời gian thực mà không cần load lại trang - AJAX
Post by: saos@ngmo on 27/08/07, 15:57
Post by: saos@ngmo on 27/08/07, 15:57
1 ví dụ rất đơn giản và dễ hiểu về AJAX, đã là webmaster thì nên quan tâm tới web 2.0
http://www.openajax.net/wordpress/code/sample1/client.html
source, very simple:
http://www.openajax.net/wordpress/code/sample1/client.html.txt
http://www.openajax.net/wordpress/code/sample1/server-php.txt
upload lên host có PHP để test
Nguồn:
http://www.openajax.net/wordpress/simple-ajax/
http://www.openajax.net/wordpress/code/sample1/client.html
source, very simple:
http://www.openajax.net/wordpress/code/sample1/client.html.txt
http://www.openajax.net/wordpress/code/sample1/server-php.txt
upload lên host có PHP để test
Nguồn:
http://www.openajax.net/wordpress/simple-ajax/
Title: Re: Thay đổi thời gian thực mà không cần load lại trang - AJAX
Post by: saos@ngmo on 27/08/07, 16:02
Post by: saos@ngmo on 27/08/07, 16:02
1 ví dụ nữa, thậm chí còn simple hơn về AJAX:
I find a lot of this AJAX stuff a bit of a hype. Lots of people have
been using similar things long before it became "AJAX". And it really
isn't as complicated as a lot of people make it out to be. Here is a
simple example from one of my apps. First the Javascript:
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function sndReq(action) {
http.open('get', 'rpc.php?action='+action);
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
var update = new Array();
if(response.indexOf('|' != -1)) {
update = response.split('|');
document.getElementById(update[0]).innerHTML = update[1];
}
}
}
This creates a request object along with a send request and handle
response function. So to actually use it, you could include this js in
your page. Then to make one of these backend requests you would tie it
to something. Like an onclick event or a straight href like this:
<a href="javascript:sndReq('foo')">[foo]</a>
That means that when someone clicks on that link what actually happens
is that a backend request to rpc.php?action=foo will be sent.
In rpc.php you might have something like this:
switch($_REQUEST['action']) {
case 'foo':
/ do something /
echo "foo|foo done";
break;
...
}
Now, look at handleResponse. It parses the "foo|foo done" string and
splits it on the '|' and uses whatever is before the '|' as the dom
element id in your page and the part after as the new innerHTML of that
element. That means if you have a div tag like this in your page:
<div id="foo">
</div>
Once you click on that link, that will dynamically be changed to:
<div id="foo">
foo done
</div>
That's all there is to it. Everything else is just building on top of
this. Replacing my simple response "id|text" syntax with a richer XML
format and makine the request much more complicated as well. Before you
blindly install large "AJAX" libraries, have a go at rolling your own
functionality so you know exactly how it works and you only make it as
complicated as you need. Often you don't need much more than what I
have shown here.
Expanding this approach a bit to send multiple parameters in the
request, for example, would be really simple. Something like:
function sndReqArg(action,arg) {
http.open('get', 'rpc.php?action='+action+'&arg='+arg);
http.onreadystatechange = handleResponse;
http.send(null);
}
And your handleResponse can easily be expanded to do much more
interesting things than just replacing the contents of a div.
nguồn http://rajshekhar.net/blog/archives/85-Rasmus-30-second-AJAX-Tutorial.html
I find a lot of this AJAX stuff a bit of a hype. Lots of people have
been using similar things long before it became "AJAX". And it really
isn't as complicated as a lot of people make it out to be. Here is a
simple example from one of my apps. First the Javascript:
function createRequestObject() {
var ro;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
ro = new ActiveXObject("Microsoft.XMLHTTP");
}else{
ro = new XMLHttpRequest();
}
return ro;
}
var http = createRequestObject();
function sndReq(action) {
http.open('get', 'rpc.php?action='+action);
http.onreadystatechange = handleResponse;
http.send(null);
}
function handleResponse() {
if(http.readyState == 4){
var response = http.responseText;
var update = new Array();
if(response.indexOf('|' != -1)) {
update = response.split('|');
document.getElementById(update[0]).innerHTML = update[1];
}
}
}
This creates a request object along with a send request and handle
response function. So to actually use it, you could include this js in
your page. Then to make one of these backend requests you would tie it
to something. Like an onclick event or a straight href like this:
<a href="javascript:sndReq('foo')">[foo]</a>
That means that when someone clicks on that link what actually happens
is that a backend request to rpc.php?action=foo will be sent.
In rpc.php you might have something like this:
switch($_REQUEST['action']) {
case 'foo':
/ do something /
echo "foo|foo done";
break;
...
}
Now, look at handleResponse. It parses the "foo|foo done" string and
splits it on the '|' and uses whatever is before the '|' as the dom
element id in your page and the part after as the new innerHTML of that
element. That means if you have a div tag like this in your page:
<div id="foo">
</div>
Once you click on that link, that will dynamically be changed to:
<div id="foo">
foo done
</div>
That's all there is to it. Everything else is just building on top of
this. Replacing my simple response "id|text" syntax with a richer XML
format and makine the request much more complicated as well. Before you
blindly install large "AJAX" libraries, have a go at rolling your own
functionality so you know exactly how it works and you only make it as
complicated as you need. Often you don't need much more than what I
have shown here.
Expanding this approach a bit to send multiple parameters in the
request, for example, would be really simple. Something like:
function sndReqArg(action,arg) {
http.open('get', 'rpc.php?action='+action+'&arg='+arg);
http.onreadystatechange = handleResponse;
http.send(null);
}
And your handleResponse can easily be expanded to do much more
interesting things than just replacing the contents of a div.
nguồn http://rajshekhar.net/blog/archives/85-Rasmus-30-second-AJAX-Tutorial.html