Ajax Example

[iam_clint]

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
%>
 

[herocks]

Mind saying what the code dose?

[iam_clint]

it does an ajax query.

[acoder]

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.

[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...

[acoder]

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 ?

[herocks]

Eh, I just needa study the code more...

[cheogt]

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

[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 :)

[acoder]

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.resp onseText is only available after the readyState is 4, so the call must be made within the anonymous function onreadystatecha nge or a function within that anon. function.