Sunday, 7 August 2016

Ajax with jQuery Part

Ajax stands for Asynchronous Javascript And Xml. Ajax is just a means of loading data from the server to the web browser without reloading the whole page.
Basically, what Ajax does is make use of the JavaScript-based XMLHttpRequest object to send and receive information to and from a web server asynchronously, in the background, without interfering with the user's experience.
Ajax has become so popular that you hardly find an application that doesn't use Ajax to some extent. The example of some large-scale Ajax-driven online applications are: Gmail, Google Maps, Google Docs, YouTube, Facebook, Flickr, etc.

Ajax with jQuery:

Different browsers implement the Ajax differently that means if you're adopting the typical JavaScript way to implement the Ajax you have to write the different code for different browsers to ensure that Ajax would work cross-browser.
But, fortunately jQuery simplifies the process of implementing Ajax by taking care of those browser differences. It offers simple methods such as load(), $.get(), $.post(), etc. to implement the Ajax that works seamlessly across all the browsers.
In the upcoming chapters you will learn how to load data from the server as well as how to send and receive data using HTTP GET and POST method through jQuery Ajax.
More Details: http://goo.gl/6eKDsB

Friday, 5 August 2016

jQuery Traversing Example

The jQuery selectors we've seen so far only allow us to select the elements down the DOM tree. But there are many occasions when you need to select a parent or ancestor element; that is where jQuery's DOM traversal methods come into play. With these traversal methods, we can go up, down, and all around the DOM tree very easily.

DOM traversing is one of the prominent features of the jQuery. To make the most it you need to understand the relationships between the elements in a DOM tree.
The above diagram showing the parent/child relationships between the elements:
  • The <body> element is the parent of the <div> element, and an ancestor of everything inside of it. The enclosed <div> element is the parent of <h1><p> and<ul> elements, and a child of the <body> element.
  • The elements <h1><p> and <ul> are siblings, since they share the same parent.
  • The <h1> element is a child of the <div> element and a descendant of the <body>element. This element does not have any children.
  • The <p> element is the parent of <em> element, child of the <div> element and adescendant of the <body> element. The containing <em> element is a child of this <p>element and a descendant of the <div> and <body> element.
  • Similarly, the <ul> element is the parent of <li> elements, child of the <div> element and a descendant of the <body> element. The containing <li> elements are the childof this <ul> element and a descendant of the <div> and <body> element. Also, both the <li> elements are siblings.
More Details: http://goo.gl/6eKDsB