asp.net consultancy chorley ASP.NET Server Side Scripting Wigan
Website Development Radcliffe

IT Services And Support

Email : ren@techsolus.co.uk
Mobile Phone : 0788 68 41 411
Answerphone : 01204 469683
bespoke invoice systems Standish Information Technology Advice Worsley
    development systems Ramsbottom
data manipulation Farnworth access databases Whitefield SQL connections Atherton
online accessible software Leyland software compatible Coppull


Get connected and Online Tottington
remote management Makerfield code and design Aspull

AJAX Hello World or My First Ajax - 16/05/2012

AJAX is not actually a programming language in itself, it's just a fancy way of using javascript to update PART of a page rather than the whole page.  The most commonly seen example of this is Google's search box, by the time you've type "inter" Google's already suggested your looking for "internet" and "internal" etc etc.  You do not need to submit the page and the page is not renewed. 

So what's happening.  In the case of Google we can use Javascript's "OnKeyUp" to run a script each time a key is pressed and released.  This calls a piece of javascript that quite simply gets a web page in the background.  So you type "i", you release the key, OnKeyUp a script goes to google and tells them "i" has been pressed, google very quickly searches for popular searches beginning with "i" and returns a list.  The javascript reads this list an pops it into the web page, below the search box.

So, if you have a textbox to type in, you'd need to use the OnKeyUp javascript, like this

<input name="x1" type="text" id="x1" onkeyup="getnames()" />

So here our input bax is called "x1" and when a key is released, onkeyup, the javascript function getnames is called.  So here is getnames...

<script type="text/javascript">

function getnames()
{
var xmlhttp;
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","http://mywebpage.com/getname.aspx?x1=" + document.getElementById("x1").value, true);
xmlhttp.send();
}
</script>

Yikes!  That looks complex.  And even to a geek like me it is a little.  The first problem is that IE 5 and 6 work different to IE 7 onwards...that's the "XMLHttpRequest" versus the "ActiveXObject("Microsoft.XMLHTTP" bits.  Then there's this readystate thingy.  From what I can glean it basically means when you get something back from the server and the status is 200 then may MyDiv's innerHTML whatever is sent from the page.

So if you know where to use Javascript and can copy paste, this lot should get you going...
 

Post A Comment

Name Comment
programming services asp.net specialist
Valid XHTML 1.0 Transitional
Admin
GD