aspose file tools*
The moose likes HTML, CSS and JavaScript and the fly likes How to write in AJAX Big Moose Saloon
  Search | Java FAQ | Recent Topics | Flagged Topics | Hot Topics | Zero Replies
Register / Login
JavaRanch » Java Forums » Engineering » HTML, CSS and JavaScript
Bookmark "How to write in AJAX" Watch "How to write in AJAX" New topic
Author

How to write in AJAX

anitha vasikarla
Greenhorn

Joined: Apr 22, 2008
Posts: 5
Hi
I am Anitha I have a task If I click one option box like country then corresponding states to appear,than I click states than next option box must display cities.please see this link you will get an idea http://www.bharatbloodbank.com/search.php How to do it in Ajax will you provide code or if any examples are available will you give that site name.



Thanks & Regards,
Anitha
Vilmantas Baranauskas
Ranch Hand

Joined: Dec 20, 2006
Posts: 89
There are many frameworks and many ways to do this.

In general you need to do following actions when user selects some value:
1. Send http request to server from JavaScript, e.g. ".../states/statex".
2. Use what comes back from server.

For the #1, here is code sample you could use:



For the #2, it depends what kind of data will be delivered back. You can deliver XML containing data and then use ajaxRequest.responseXML to retrieve it. Or, you can deliver HTML or JSON and use ajaxRequest.responseText to retrieve it.

One easy way which requires little JavaScript coding is to deliver back ready-to-use HTML snippet which you can insert inside your page, e.g.:



Author of <a href="http://www.newsinjector.com" target="_blank" rel="nofollow">NewsInjector</a>
anitha vasikarla
Greenhorn

Joined: Apr 22, 2008
Posts: 5
Hi,

var ajaxRequest;
function makeAjaxRequest(url, callback)
{
if (window.XMLHttpRequest)
{
ajaxRequest = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

ajaxRequest.open("GET", url, true);
ajaxRequest.onreadystatechange = callback;
ajaxRequest.send(null);
}
//some code will come here
.....
makeAjaxRequest("states/statex", updateCities);
//here also
......
function updateCities()
{
if (ajaxRequest.readyState == 4)
{
if (ajaxRequest.status == 200)
{
...
// something here
//some code will come here
}
else
{
alert("Cannot load data!");
}
}
}


you have given this code but iam not perfect in AJAX where can I provide states,countries,cities.will you provide code based on this question.
Vilmantas Baranauskas
Ranch Hand

Joined: Dec 20, 2006
Posts: 89
You need to have URLs which can deliver states, countries, cities, e.g.:
.../states?country=US
.../cities?state=IL
.../countries

Then you may write AJAX code to request each URL, e.g.



Note, that this is AJAX basics. I use no framework in these examples. It is good to understand how AJAX works but maybe you will find easier implementation using some AJAX framework.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61413
    
  67

Indeed. Ajax is a tricky business. There are lots of nuances and browser quirks that need to be taken into account.

My recommendation is to read this article in order to understand the basics of how Ajax works, and then to adopt a JS library such as Prototype or jQuery to do your Ajax for you.

But don't skip reading the article. Even when using a library, it's important to understand how Ajax works under the covers.


[Asking smart questions] [Bear's FrontMan] [About Bear] [Books by Bear]
anitha vasikarla
Greenhorn

Joined: Apr 22, 2008
Posts: 5
Hi,

var ajaxRequest;
function makeAjaxRequest(url, callback)
{
if (window.XMLHttpRequest)
{
ajaxRequest = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

ajaxRequest.open("GET", url, true);
ajaxRequest.onreadystatechange = callback;
ajaxRequest.send(null);
}
//some code will come here.............................................1
.....
makeAjaxRequest("states/statex", updateCities);
makeAjaxRequest(".../states?country=UK" + country, updateStates);
makeAjaxRequest(".../cities?state=Scotland" + state, updateCities);
makeAjaxRequest(".../cities?state=England" + state, updateCities);
makeAjaxRequest(".../cities?state=Wales" + state, updateCities);
makeAjaxRequest(".../states?country=US" + country, updateStates);
makeAjaxRequest(".../cities?state=Newyork" + state, updateCities);
makeAjaxRequest(".../cities?state=California" + state, updateCities);
makeAjaxRequest(".../cities?state=Pennsylvania" + state, updateCities);
makeAjaxRequest(".../cities?state=Washington" + state, updateCities);
makeAjaxRequest(".../cities?state=Maryland" + state, updateCities);
makeAjaxRequest(".../states?country=INDIA" + country, updateStates);
makeAjaxRequest(".../cities?state=Andrapradesh" + state, updateCities);
makeAjaxRequest(".../cities?state=Kerala" + state, updateCities);
makeAjaxRequest(".../cities?state=Maharashtra" + state, updateCities);


..................................................................................2
function updateCities()
{
if (ajaxRequest.readyState == 4)........................................4
{
if (ajaxRequest.status == 200)...............................5
{
...

//some code will come here.................................3
}
else
{
alert("Cannot load data!");
}
}
}


I dont know AJAX so Iam asking each and every line clearly I mentioned my doubts with 1,2,3,4,5.
at 1,2,3 these places will you please tell me which code will come.and please explain 4 and 5 lines and what is the purpose of those lines.
Bear Bibeault
Author and ninkuma
Marshal

Joined: Jan 10, 2002
Posts: 61413
    
  67

It's all explained in the article I linked to. Did you not read it?
 
I agree. Here's the link: http://aspose.com/file-tools
 
subject: How to write in AJAX