Vikram Goyal's Blog

Your 30 second guide to AJAX

Chances are, if you have been building web applications for a little over a year and have used javascript even a little bit, you already know how to build AJAX applications. To use AJAX, you need to know the properties and methods of a Javascript object called XMLHttpRequest. All recent browsers support this object, but of course, as with other cross browser issues, it is instantiated differently in IE and others. The following creates this object across all browsers.


var xmlHttp;
function createXMLHttpRequest() {
  if(window.ActiveXObject) {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } else if(window.XMLHttpRequest) {
    xmlHttp = new XMLHttpRequest();
  }
}

Now, having obtained an instance of this object, you can use it like any other Javascript object. Of course, the nice thing about it is that it can make HTTP requests to a back end process independent of the containing document or browser requests.

So the steps are:

1. Create this object.

2. Tell this object which method will handle response from the server.

// handleServerResponse is a method in your javascript code.
xmlHttp.onreadystatechange = handleServerResponse;

3. Make your request:

xmlHttp.open("GET", "YOUR URL"); // can use POST or PUT as well

4. Send your request:

// the parameter to this method can be an optional request parameter
xmlHttp.send(null);

5. Handle the response from the server in the method that you designated earlier.


function handleServerResponse() {

  if(xmlHttp.readyState == 4) { // the state when the request has completed
    if (xmlHttp.status == 200) { // the HTTP status code returned from the server
      var server_response = xmlHttp.responseText; // the servers response, use this with DHTML to modify current page
    }
  }
}

Everything else that you hear about AJAX, trust me, is just clever Javascript that is used to manipulate the DOM of the current document based on this asynchronous request to the server. Your server side code is not affected (unless you are coding specifically for AJAX).

There are other methods and properties of the XMLHttpRequest object and these can be looked up here.

I couldn't believe how simple it really was. The hype around this technology is mostly to do with AJAX patterns and clever stuff that is done using asynchronous requests and manipulating the browsers DOM on the fly. So if you know how to manipulate the DOM using Javascript, you now know how to manipulate the DOM without needing to make the whole page refresh.

Comments

• Bravo!

  Posted by: johnreynolds on June 20, 2006 at 07:19 AM

• Now that you've seen this intro, let me save you years of browser hacking and version management and html: http://www.nextapp.com/platform/echo2/echo/

  Posted by: ilazarte on June 20, 2006 at 10:15 AM

• A follow up on the prior post, seriously... for anything but the most trivial Ajax applications, you should never do it from scratch. Instead use an existing framework that fits your needs. Some other frameworks to consider are ThinWire RIA Ajax Framework, Dojo Toolkit and Prototype. Each toolkit has it's merits, so first understand your needs and goals and then consider the options.

  Posted by: pra9ma on June 20, 2006 at 10:33 AM

• Again with link :)
  Echo2 Web Application Platform

  Posted by: ilazarte on June 20, 2006 at 10:43 AM

• THANK YOU. Really, cutting through marketing hype is a pain in the back - even open source web sites abound with buzz words these days.

  Posted by: ctreber on June 21, 2006 at 03:50 AM

• 水晶礼品纪念品 婴儿纪念品专家 婴儿纪念品专家 胎毛绣 胎毛坠 胎毛手链 胎毛笔 胎毛笔 水晶礼品公司 水晶工艺品厂 人体克隆艺术 水晶炫彩晶足印 水晶足印 立体宝宝印 古法琉璃 琉璃工艺品 天然水晶 天然水晶 创业致富项目 创业致富项目 水晶礼品公司 周易 在线免费周易算命 起名 取名 在线免费起名测名 胎毛笔 婴儿纪念品 婴幼儿纪念品 水晶手足印 炫彩晶足印 雅克丽晶足印 脐带印章 胎毛章 起名 测名 改名 爱婴理发 婴儿理发 婴儿摄影 连锁加盟 特许经营 水晶奖杯 水晶奖牌 友情链接 互惠链接 友情连接 互惠连接 友情链接 友情连接

  Posted by: hexiang99 on March 05, 2007 at 09:07 AM

• 盛大金属制造有限公司是以生产钢管、无缝钢管、无缝管以及销售为一体得大型文件柜更衣柜流通企业。我们提供论文发表和同声传译同声传译设备等Google排名服务，专注于企业的SEO优化培训！

  Posted by: jlj714 on October 21, 2007 at 08:32 PM

• 网站优化-搜索引擎优化-Google排名-Google左侧排名-SEO

  Posted by: jlj714 on October 21, 2007 at 08:33 PM

• 博澳流水线以丰富的经验和先进的计算机辅助设计生产线来满足客户的要求，设计出合理的工业流水线.

  Posted by: sunhuanjun on November 18, 2007 at 10:43 PM

• ليبيا

  شباب ليبيا

  games

  مسجات

  برامج

  ليبيا

  libya

  رياضة

  أفلام

  برامج نوكيا

  أخبار ليبيا

  فيديو

  صور

  ماسنجر

  ليبيانا

  شفرة art

  مسجات جميلة

  قرآن كريم

  غرائب

  محول 3gp

  عقارات ليبيا

  Posted by: mohaned on April 08, 2008 at 03:13 PM

This work is licensed under a Creative Commons License.