Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > insights

Ajax Example

iam_clint's Avatar
Forum Leader
  
Join Date: Jul 2006
Location: Oklahoma
Posts: 1,076
#1   Jun 21 '07
AJAX Basic Example
Expand|Select|Wrap|Line Numbers
  1. <script>
  2. //set the variables.
  3. function getArticle(id) {
  4.     var link = "/getNews.asp";
  5.     xmlhttpPost(link, id);
  6. }
  7.  
  8. //Make the actual connection.
  9. function xmlhttpPost(strURL, id) {
  10.     var xmlHttpReq = false;
  11.     var self = this;
  12.     // Mozilla/Safari
  13.     if (window.XMLHttpRequest) {
  14.         self.xmlHttpReq = new XMLHttpRequest();
  15.     }
  16.     // IE
  17.     else if (window.ActiveXObject) {
  18.         self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
  19.     }
  20.     self.xmlHttpReq.open('POST', strURL, true);
  21.     self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
  22.     self.xmlHttpReq.onreadystatechange = function() {
  23.         if (self.xmlHttpReq.readyState == 4) { //ready state 4 means its complete.
  24.             updatepage(self.xmlHttpReq.responseText);
  25.         }
  26.     }
  27.     self.xmlHttpReq.send(getquerystring(id));
  28. }
  29.  
  30. //set the query string to be sent
  31. function getquerystring(id) {
  32.     qstr = 'data=' + escape(id);  // NOTE: no '?' before querystring
  33.     return qstr;
  34. }
  35.  
  36. //put the data on the page.
  37. function updatepage(str) {
  38.     document.getElementById("data").innerHTML = str;
  39. }
  40. </script>
  41. <select onchange="getArticle(this.value);">
  42. <option value="1">Train hits car</option>
  43. <option value="2">Airplane Crashes</option>
  44. <option value="3">Mental Health</option>
  45. </select>
  46. <div id="data"></div>
  47.  

Now for the getNews.asp --- not fully functional code but an example
Expand|Select|Wrap|Line Numbers
  1. <%
  2. news_id = request("id")
  3. strSQL = "select * from news where news_id = " & new_id
  4. rs.open strSQL, connection, 1, 1
  5. if not rs.eof then
  6. response.write rs("story")
  7. end if
  8. %>
  9.  



Newbie
  
Join Date: Jun 2007
Posts: 5
#2   Jun 24 '07

re: Ajax Example

Mind saying what the code dose?
iam_clint's Avatar
Forum Leader
  
Join Date: Jul 2006
Location: Oklahoma
Posts: 1,076
#3   Jun 25 '07

re: Ajax Example

it does an ajax query.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#4   Jun 25 '07

re: Ajax Example

Quote:

Originally Posted by herocks

Mind saying what the code dose?

It gets the news articles from a database by selecting from a drop down without having to refresh/reload the page.

If you don't know Ajax is, maybe you should check out some tutorials.
Newbie
  
Join Date: Jun 2007
Posts: 5
#5   Jun 29 '07

re: Ajax Example

Sorry for my noobness. I looked at some AJAX tutorials and this makes a lot more sense but a few things I still don't get...
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#6   Jun 29 '07

re: Ajax Example

Quote:

Originally Posted by herocks

Sorry for my noobness. I looked at some AJAX tutorials and this makes a lot more sense but a few things I still don't get...

Like ?
Newbie
  
Join Date: Jun 2007
Posts: 5
#7   Jul 1 '07

re: Ajax Example

Eh, I just needa study the code more...
Newbie
  
Join Date: Oct 2007
Location: Venezuela
Posts: 5
#8   Oct 31 '07

re: Ajax Example

Expand|Select|Wrap|Line Numbers
  1. ajax=function(strURL,sSend){
  2.     var xmlHttpReq=false
  3.     var self=this
  4.     if (window.XMLHttpRequest)self.xmlHttpReq=new XMLHttpRequest()
  5.     else if(window.ActiveXObject)self.xmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP")
  6.     self.xmlHttpReq.open('POST',strURL,false)
  7.     self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
  8.     self.xmlHttpReq.onreadystatechange=function(){
  9.         if (self.xmlHttpReq.readyState==4){
  10.             ajax.resul=self.xmlHttpReq
  11.         }
  12.     }
  13.     self.xmlHttpReq.send(sSend)
  14. }
  15.  
Hello i have made a little change on the main function, so you can use it like this:
Expand|Select|Wrap|Line Numbers
  1. function getArticle(id){
  2.   ajax('dataExample.php',id) // php,asp,...
  3.   alert(ajax.resul.responseText)
  4. }
  5.  
Not a big deal but now you can use the data loaded directly with the javascript, and no need to load the data into a div continer, i hope it can be helpfull
Last edited by acoder; Oct 31 '07 at 05:10 PM. Reason: Added code tags
Newbie
  
Join Date: Oct 2007
Location: Venezuela
Posts: 5
#9   Oct 31 '07

re: Ajax Example

Sorry o forgot to tell that i couldn't make it work with Firefox, it works only with ie, if some one find a way.. please :)
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#10   Oct 31 '07

re: Ajax Example

Quote:

Originally Posted by cheogt

Sorry o forgot to tell that i couldn't make it work with Firefox, it works only with ie, if some one find a way.. please :)

ajax.resul.responseText is only available after the readyState is 4, so the call must be made within the anonymous function onreadystatechange or a function within that anon. function.
eragon's Avatar
Needs Regular Fix
  
Join Date: Mar 2007
Location: US
Posts: 428
#11   Nov 3 '07

re: Ajax Example

could somebody make a firefox compatable versoin? i officially threw out internet explorer. completely. gone. so sad. more secure. Yay Firefox!!!!!
iam_clint's Avatar
Forum Leader
  
Join Date: Jul 2006
Location: Oklahoma
Posts: 1,076
#12   Nov 4 '07

re: Ajax Example

i'm pretty sure my example works in firefox.
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,247
#13   Nov 4 '07

re: Ajax Example

ok ... let's fix the adapted code ... and a note: the original posted code in the article worked! ... but in case anybody wanted to use the adaptation we have to fix it the following way (for example):

first we adapt the ajax-function so that we may pass a callback to it, that may work with the request-response the correct way:

Expand|Select|Wrap|Line Numbers
  1. var ajax = function(strURL, sSend, cb) {
  2.     var xmlHttpReq = false;
  3.     var self       = this;
  4.  
  5.     if (window.XMLHttpRequest) {
  6.         self.xmlHttpReq = new XMLHttpRequest;
  7.     } else if (window.ActiveXObject) {
  8.         try {
  9.             xmlHttpReq = new ActiveXObject('Msxml2.XMLHTTP');
  10.         } catch (ex) {
  11.             try {
  12.                 xmlHttpReq = new ActiveXObject('Microsoft.XMLHTTP');
  13.             } catch (ex) {
  14.             }
  15.         }
  16.     }
  17.  
  18.     self.xmlHttpReq.open('POST', strURL, false);
  19.     self.xmlHttpReq.setRequestHeader('Content-Type', 
  20.             'application/x-www-form-urlencoded');
  21.  
  22.     self.xmlHttpReq.onreadystatechange = function(cb) {
  23.         if (self.xmlHttpReq.readyState == 4) {
  24.             cb(self.xmlHttpReq);
  25.         }
  26.     }
  27.  
  28.     // sSend is the id passed by getArticle later on ...
  29.     // build a query-string in case you need to use it
  30.     // i didn't do anything with it here
  31.     self.xmlHttpReq.send(sSend)
  32. }
  33.  
later on the call should look like this:

Expand|Select|Wrap|Line Numbers
  1. function getArticle(id) {
  2.     var cb = function(res) {
  3.         alert(res.responseText);
  4.     };
  5.  
  6.     ajax('dataExample.php', id, cb);
  7. }
kind regards

ps: and one more note to posters: please try to write the code in articles-sections a way more readable, use indentations, the var keywords etc. and use the semicolon to end your statements ... please! When adapting code then try not to post 'unready' code except you mark it as to be so.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#14   Nov 5 '07

re: Ajax Example

Quote:

Originally Posted by iam_clint

i'm pretty sure my example works in firefox.

Yes it does, but I think eragon was probably referring to cheogt's adapted code.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#15   Nov 5 '07

re: Ajax Example

Quote:

Originally Posted by eragon

could somebody make a firefox compatable versoin? i officially threw out internet explorer. completely. gone. so sad. more secure. Yay Firefox!!!!!

As pointed out, the original version in the first post does work in Firefox.

Even though you might hate Internet Explorer, it is still the most popular browser. You have no choice, but to support it (unless its a personal application which only you will use or all users will be using Firefox).

To help you, check out A Guide to Coding Cross-Browser Scripts and Browser Bugs, Quirks and Inconsistencies.
eragon's Avatar
Needs Regular Fix
  
Join Date: Mar 2007
Location: US
Posts: 428
#16   Nov 7 '07

re: Ajax Example

forgive me im not at all ajax savvy. i will learn.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,750
#17   Nov 7 '07

re: Ajax Example

This is only an example. Also check out some of the tutorials in this thread.
Newbie
  
Join Date: Oct 2007
Location: Venezuela
Posts: 5
#18   Nov 15 '07

re: Ajax Example

Sorry for my first version, wasn't helpfull...
Final version, this one works on linux and windows, IE and FireFox

Expand|Select|Wrap|Line Numbers
  1. ajax = function(strURL, sSend) {
  2.     var xmlHttpReq=false;
  3.  
  4.     if (!window.ActiveXObject) ajax.req = new XMLHttpRequest();
  5.     else ajax.req = new ActiveXObject("Microsoft.XMLHTTP");
  6.  
  7.     ajax.req.open('POST',strURL,false);
  8.     ajax.req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
  9.  
  10.     ajax.req.send(sSend);
  11.     return ajax.req;
  12. }
as simple as this but works, one can request string values like:
file *.php in the server:
.....// SQL results to string ->
.....echo "[['1','a Name','a LastName','an e-mail',["XY1F",234.23,1,56]]]"
file *.html in the local browser:
.....o=ajax('data.php',usr.id)
.....aData=eval(o.responseText)
there you have an array loaded with ajax from a Data Base

The diference is that this way we dont need to use a <div> tag to load the result, in the case of loading a sub-webpage one can use:
.....document.getElementById('anyDiv').innerHTML=o .responseText
but the usr will have to w8 a bit more
Last edited by gits; Nov 15 '07 at 08:27 PM. Reason: added code tags & make code readable
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,247
#19   Nov 15 '07

re: Ajax Example

the ajax-request is async ... when returning the request object you don't have the response already ... at least not in all cases? ... so this isn't working reliable?
Newbie
  
Join Date: Oct 2007
Location: Venezuela
Posts: 5
#20   Aug 24 '09

re: Ajax Example

Quote:

Originally Posted by gits View Post

the ajax-request is async ... when returning the request object you don't have the response already ... at least not in all cases? ... so this isn't working reliable?

The ajax is not always async, you can configure it, the example i gave does it online, no async, so you can load data from a data base and the browser waits(freeze?) until it get the answer.

I check the login in my systems like this, and more, it works good!
try it
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,247
#21   Aug 24 '09

re: Ajax Example

i see, i just overlooked the 3rd parameter in your open-method ... the XMLHttpRequest's open() method could use its 3rd parameter to set the request to sync mode ... then no callback is handled since no notification is sent for the request's readystate ... the browser freezes and waits for the response. so the browser basicly behaves as it does with a traditional page-reload - so it is much preferable to use the request-object async. even though you could use it sync and your example works.
Reply

« previous insight | next insight »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

/bytes/other

Forums
Visit our community forums for general discussions and latest on Bytes

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 229,155 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved