AJAX Basic Example -
<script>
-
//set the variables.
-
function getArticle(id) {
-
var link = "/getNews.asp";
-
xmlhttpPost(link, id);
-
}
-
-
//Make the actual connection.
-
function xmlhttpPost(strURL, id) {
-
var xmlHttpReq = false;
-
var self = this;
-
// Mozilla/Safari
-
if (window.XMLHttpRequest) {
-
self.xmlHttpReq = new XMLHttpRequest();
-
}
-
// IE
-
else if (window.ActiveXObject) {
-
self.xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
-
}
-
self.xmlHttpReq.open('POST', strURL, true);
-
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
-
self.xmlHttpReq.onreadystatechange = function() {
-
if (self.xmlHttpReq.readyState == 4) { //ready state 4 means its complete.
-
updatepage(self.xmlHttpReq.responseText);
-
}
-
}
-
self.xmlHttpReq.send(getquerystring(id));
-
}
-
-
//set the query string to be sent
-
function getquerystring(id) {
-
qstr = 'data=' + escape(id); // NOTE: no '?' before querystring
-
return qstr;
-
}
-
-
//put the data on the page.
-
function updatepage(str) {
-
document.getElementById("data").innerHTML = str;
-
}
-
</script>
-
<select onchange="getArticle(this.value);">
-
<option value="1">Train hits car</option>
-
<option value="2">Airplane Crashes</option>
-
<option value="3">Mental Health</option>
-
</select>
-
<div id="data"></div>
-
Now for the getNews.asp --- not fully functional code but an example -
<%
-
news_id = request("id")
-
strSQL = "select * from news where news_id = " & new_id
-
rs.open strSQL, connection, 1, 1
-
if not rs.eof then
-
response.write rs("story")
-
end if
-
%>
-
20 33054
Mind saying what the code dose?
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.
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...
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 ?
Eh, I just needa study the code more...
- ajax=function(strURL,sSend){
-
var xmlHttpReq=false
-
var self=this
-
if (window.XMLHttpRequest)self.xmlHttpReq=new XMLHttpRequest()
-
else if(window.ActiveXObject)self.xmlHttpReq=new ActiveXObject("Microsoft.XMLHTTP")
-
self.xmlHttpReq.open('POST',strURL,false)
-
self.xmlHttpReq.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
-
self.xmlHttpReq.onreadystatechange=function(){
-
if (self.xmlHttpReq.readyState==4){
-
ajax.resul=self.xmlHttpReq
-
}
-
}
-
self.xmlHttpReq.send(sSend)
-
}
-
Hello i have made a little change on the main function, so you can use it like this: - function getArticle(id){
-
ajax('dataExample.php',id) // php,asp,...
-
alert(ajax.resul.responseText)
-
}
-
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
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 :)
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.
could somebody make a firefox compatable versoin? i officially threw out internet explorer. completely. gone. so sad. more secure. Yay Firefox!!!!!
i'm pretty sure my example works in firefox.
gits 5,390
Expert Mod 4TB
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: - var ajax = function(strURL, sSend, cb) {
-
var xmlHttpReq = false;
-
var self = this;
-
-
if (window.XMLHttpRequest) {
-
self.xmlHttpReq = new XMLHttpRequest;
-
} else if (window.ActiveXObject) {
-
try {
-
xmlHttpReq = new ActiveXObject('Msxml2.XMLHTTP');
-
} catch (ex) {
-
try {
-
xmlHttpReq = new ActiveXObject('Microsoft.XMLHTTP');
-
} catch (ex) {
-
}
-
}
-
}
-
-
self.xmlHttpReq.open('POST', strURL, false);
-
self.xmlHttpReq.setRequestHeader('Content-Type',
-
'application/x-www-form-urlencoded');
-
-
self.xmlHttpReq.onreadystatechange = function(cb) {
-
if (self.xmlHttpReq.readyState == 4) {
-
cb(self.xmlHttpReq);
-
}
-
}
-
-
// sSend is the id passed by getArticle later on ...
-
// build a query-string in case you need to use it
-
// i didn't do anything with it here
-
self.xmlHttpReq.send(sSend)
-
}
-
later on the call should look like this: - function getArticle(id) {
-
var cb = function(res) {
-
alert(res.responseText);
-
};
-
-
ajax('dataExample.php', id, cb);
-
}
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.
i'm pretty sure my example works in firefox.
Yes it does, but I think eragon was probably referring to cheogt's adapted code.
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.
forgive me im not at all ajax savvy. i will learn.
This is only an example. Also check out some of the tutorials in this thread.
Sorry for my first version, wasn't helpfull...
Final version, this one works on linux and windows, IE and FireFox -
ajax = function(strURL, sSend) {
-
var xmlHttpReq=false;
-
-
if (!window.ActiveXObject) ajax.req = new XMLHttpRequest();
-
else ajax.req = new ActiveXObject("Microsoft.XMLHTTP");
-
-
ajax.req.open('POST',strURL,false);
-
ajax.req.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
-
-
ajax.req.send(sSend);
-
return ajax.req;
-
}
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
gits 5,390
Expert Mod 4TB
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?
@gits
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 5,390
Expert Mod 4TB
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.
Sign in to post your reply or Sign up for a free account.
Similar topics
by: cbmeeks |
last post by:
I am trying to learn AJAX to do some cool stuff over the internet. So,
for practise, I decided to code a small site that simply prints out
quotes from William Shakespeare.
...
|
by: aaronwmail-usenet |
last post by:
I've published sample code that uses Python
on the server side to implement AJAX
type ahead completion for web forms. Please see
documentation with links to examples and downloads at
...
|
by: aaronwmail-usenet |
last post by:
xFeed AJAX data publication example code with
documentation is available:
See http://xsdb.sourceforge.net/xFeed.html for documentation.
See http://www.xFeedMe.com for live web page examples....
|
by: dileep |
last post by:
I am new to Ajax and i found some good tutorials from the net.but when i
downloaded the basic sample examples and try to execute i get the error
"specified file not found", even though the files...
|
by: meltedown |
last post by:
This is supposed ot be an example:
http://www.ajaxtutorial.net/index.php/2006/11/30/simple-ajax-using-prototype-part-2/
It says :
This example is probably the simplest example you will ever...
|
by: RamananKalirajan |
last post by:
Hi Guys I am new to AJAX. I am in need of an AJAX example which includes Prototype. My Requirement is from a prototype i must create a AJAX call and call a HTML file or Java file without server and...
|
by: taylorcarr |
last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
|
by: aa123db |
last post by:
Variable and constants
Use var or let for variables and const fror constants.
Var foo ='bar';
Let foo ='bar';const baz ='bar';
Functions
function $name$ ($parameters$) {
}
...
|
by: ryjfgjl |
last post by:
If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...
|
by: ryjfgjl |
last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
|
by: emmanuelkatto |
last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud.
Please let me know.
Thanks!
Emmanuel
|
by: nemocccc |
last post by:
hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?
|
by: Sonnysonu |
last post by:
This is the data of csv file
1 2 3
1 2 3
1 2 3
1 2 3
2 3
2 3
3
the lengths should be different i have to store the data by column-wise with in the specific length.
suppose the i have to...
|
by: Hystou |
last post by:
There are some requirements for setting up RAID:
1. The motherboard and BIOS support RAID configuration.
2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
|
by: jinu1996 |
last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
| |