JQuery ajaxGet Example

DOM stands for Document Object Model which gives standards for accessing HTML elements and the attributes. These can be manipulated using Jquery ajaxGet() method. Using HTTP GET request data can be loaded from the server. When we access the server without reloading the web page, then we could pass the information for request to the server by using GET option. The purpose of the GET is to get the information. Browsers will cache the result from the GET request and if same request is made again then they will display the caches result rather than rerunning the entire request.

JQuery ajaxGet Syntax

$.get(url, [data], [success], [dataType] )

Where,

url: Address to which request is sent.
Data: It is the key/value pair which is sent to the requested url. It is optional parameter.
Success: It is the optional callback function, executed when the data is loaded successfully.
DataType: It is the dataType of the data expected by the callback function. Default datatype expected are: “html”, “xml”, “json” and “script”.

Note: In the above syntax of ajaxGet square bracket represents the optional parameters to be used.

JQuery ajaxGet Example

Below example demonstrates the three Jquery Get methods such as text(), html() and val() to manipulate DOM and a jquery method to get attribute value.

<!DOCTYPE html>
<head>
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
$(document).ready(function(){
  $("#button1").click(function(){
    alert("Text: " + $("#d1").text());
  });
  $("#button2").click(function(){
    alert("HTML: " + $("#d1").html());
  });
  $("#button3").click(function(){
      alert("value: " + $("#d2").val());
  });
  $("#button4").click(function(){
         alert($("#d3").attr("href"));
  });
});
</script>
</head>
<body>
<p id="d1">Note: observe the representation of word <em>emphasized</em> in text and html method.</p>

<p>Name:<input type="text" id="d2" value="Incredible India"></p>
<p><a href="http://dummy.com" id="d3">dummy.com</a></p>
<button id="button1">Returns Text</button>
<button id="button2">Returns HTML</button>
<button id="button3">Returns Value</button>
<button id="button4">Returns href Value</button>
</body>
</html>

In the above example, we have shown how the word emphasized is manipulated in the text() method and in the HTML method.
alert(“Text: ” + $(“#d1″).text()): Here #d1 is used as selector for tag p content. When user clicks the button <button id=”button1”>Returns Text</button>, text() method is invoked which returns the plain text data.
alert(“HTML: ” + $(“#d1″).html(): Here same #d1 is used as selector for tag p content .When user clicks the button <button id=”button2”>Returns HTML</button>, html() method is invoked which returns the data in html format.
alert(“value: ” + $(“#d2”).val()):It returns the value of the input field on the server.
alert($(“#d3”).attr(“href”)):It returns the attribute value for the selector id d3.