Posted in Programming, Softwares, Web Tech

AMD in Javascript

AMD stands for Asynchronous Module Definition. In a nutshell, it’s a format or a specification for writing javascript.

So, what is a Javascript module?

Its a reusable code which exports specific objects, making them available for other modules through dependency references to be used their programs.

These modules can be loaded asynchronously, if desired.  That means, there’s  a huge improvement in website performance as the files are only loaded when they are needed.  Also, it provides developers with the flexibility to define order in which module dependencies have to be loaded and load multiple javascript files during runtime.

AMD implementation is used by jQuery, Dojo, Firebug etc. There are various javascipt module loaders like RequireJS,  Browserify,  Webpack, SystemJS

Posted in Web Tech

AJAX

What is AJAX?
AJAX stands for Asynchronous JavaScript and XML. It uses the XMLHttpRequest, which is a Javascript object used to communicate with server-side scripts. It can send as well as receive information in a variety of formats, including JSON, XML, HTML, and even text files.

AJAX’s most unique characteristic, is its “asynchronous” nature, which means it can do all of this without having to refresh the page. This lets you update portions of a page based upon user events.

With AJAX you can

  • Update a web page without reloading the page
  • Request data from a server – after the page has loaded
  • Receive data from a server – after the page has loaded
  • Send data to a server – in the background

Steps of AJAX Operation

  1. A client event occurs.
  2. An XMLHttpRequest object is created.
  3. The XMLHttpRequest object is configured.
  4. The XMLHttpRequest object makes an asynchronous request to the Webserver.
  5. The Webserver returns the result containing XML document.
  6. The XMLHttpRequest object calls the callback() function and processes the result.
  7. The HTML DOM is updated.

XMLHttpRequest Methods:

  • abort(): Cancels the current request.
  • open(method, URL, async, userName, password): Specifies the method, URL, and other optional attributes of a request.The method parameter can have a value of HTTP methods “GET”, “POST”, “HEAD”, “PUT” and “DELETE”.
  • send(content): Sends the request.
  • getAllResponseHeaders(): Returns the complete set of HTTP headers as a string.
  • getResponseHeader(headerName): Returns the value of the specified HTTP header.
  • setRequestHeader(label, value): Adds a label/value pair to the HTTP header to be sent.

XMLHttpRequest Properties:

  • onreadystatechange: An event handler for an event that fires at every state change.
  • readyState: Holds the status of the XMLHttpRequest. Changes from 0 to 4:
    0: request not initialized
    1: server connection established
    2: request received
    3: processing request
    4: request finished and response is ready
  • responseText: Returns the response as a string.
  • status: Returns the status as a number. eg. 200: “OK”; 404: Page not found

List of some famous web applications that make use of AJAX.
Google Maps: A user can drag an entire map by using the mouse, rather than clicking on a button.
Google Suggest: As you type, Google will offer suggestions. Use the arrow keys to navigate the results.
Gmail: Gmail is a webmail, built on the idea that email can be more intuitive, efficient and useful.