Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





what is ajax() and load() function in ajax?

What is $.ajax() Function ?

$.ajax() :Performs An Asynchronous Request.

  • ▪  The ajax() method is used to perform an AJAX (asynchronous HTTP) request.
  • ▪  All jQuery AJAX methods use the ajax() method. This method is mostly used for requests where the other methods cannot be used.
  • Syntax :- $.ajax({name:value, name:value, ... })
  • The parameters specifies one or more name/value pairs for the AJAX request.
  • jQuery ajax() Method :-
    $.ajax({
    url: url,
    data: data,
    success: success,
    dataType: dataType
    });
  • Description :-
  • url
    Type: String
    A string containing the URL to which the request is sent.
  • data
    Type:PlainObject or String
    A plain object or string that is sent to the server with the request.
  • success
    Type:Function(PlainObject data, String textStatus, jqXHR jqXHR )
    A callback function that is executed if the request succeeds. Required if dataType is provided, but you can use null or jQuery.noop as a placeholder.
  • dataType
    Type:String
    The type of data expected from the server. Default: Intelligent Guess (xml, json, script, or html). The success callback function is passed the returned data, which will be an XML root element, text string, JavaScript file, or JSON object, depending on the MIME type of the response. It is also passed the text status of the response.

Example :- Change the text of a element using an AJAX request:

File name : index.php

<html> <head> <title>The jQuery Result Example</title>
</head>
<body>
<h2>THIS IS RESULT...</h2>
<p id="p1"> This is some text in a paragraph. </p>
<div id="div1" > </div >
</body>
</html>

File name : index.php

<html> <head> <title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
< script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#btn").click(function(){
$.ajax({url:"demo.txt", success:function(result){$("#div1").html(result);}}) }); });
</script>
</head>
<body>
</body>
</html>

File name : index.php


jQuery - AJAX load() Method :-

The load() method loads data from a server and puts the returned data into the selected element.

Syntax: $(selector).load(URL,data,callback);

The required URL parameter specifies the URL you wish to load.

The optional data parameter specifies a set of querystring key/value pairs to send along with the request. The optional callback parameter is the name of a function to be executed after the load() method is completed.


The load( url, data, callback ) method loads data from the server and places the returned HTML into the matched element.

Here is the description of all the parameters used by this method −

  • Syntax :- [selector].load( url, [data], [callback] )
  • url − The URL of the server-side resource to which the request is sent. It could be a PHP, or JSP script which generates data dynamically or out of a database.
  • data − This optional parameter represents an object whose properties are serialized into properly encoded parameters to be passed to the request. If specified, the request is made using the POST method. If omitted, the GET method is used.
  • callback − A callback function invoked after the response data has been loaded into the elements of the matched set. The first parameter passed to this function is the response text received from the server and second parameter is the status code.
  • Callback :- a function that is executed when the request completes. It has three additional parameters (response, status, xhr).
    • response - contains the result data from the request.
    • status - contains the status of the request, one of the strings "success", "notmodified", "error", "timeout", or "parsererror".
    • xhr - contains the XMLHttpRequest object

File name : index.php

<html> <head> <title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
< script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#btn").click(function(event){
$('#sta').load('result.html'); }); });
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="sta" style="background-color:cc0;"> mahtab </div>
<input type="button" id=“btn" value="Load Data" />
</body>
</html>

File name : index.php

File Name:- result.html

<html> <head> <title>The jQuery Result Example</title>
</head>
<body>
<h1>THIS IS RESULT...</h1>
</body>
</html>

Example :- Another Example.

File name : index.php

File Name:- index.php

<html> <head> <title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
< script type="text/javascript" language="javascript">
$(function(){ $("#tt").load("content.html");}); </script>
</head>
<body>
<div id="tt"> </div> </body>
</html>

File name : index.php

File Name:- content.html

<html> <head> <title>The jQuery Result Example</title>
</head>
<body>
< id="divContent"> <b>This is external content</b> </div> </body>
</html>

Example

File name : index.php

<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$('#stage').load('/jquery/result.html');
});
});
</script>
</head>

<body>
<p>Click on the button to load /jquery/result.html file −</p>

<div id = "stage" style = "background-color:cc0;">
STAGE
</div>

<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>

File name : result.html

THIS IS RESULT...


Example :- Another Example 2.

File name : index.php

File Name:- index.php

<html> <head> <title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
< script type="text/javascript" language="javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo.txt");
});
});
</script>
</head>
<body>
<div id="div1"> <h2>Let jQuery AJAX Change This Text</h2> </div>
<button>Get External Content. </button>
</body>
</html>

File name : index.php

File Name:- demo.txt

<html> <head> <title>The jQuery Result Example</title>
</head>
<body>
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
</body>
</html>

It is also possible to add a jQuery selector to the URL parameter.

The following example loads the content of the element with id="p1", inside the file "demo_test.txt", into a specific element:

Example :- $("#div1").load("demo_test.txt #p1");


Example :- Another Example 3.

File name : index.php

File Name:- index.php

<html> <head> <title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
< script type="text/javascript" language="javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt #p1");
});
});
</script>
</head>
<body>
<div id="div1"> <h2>Let jQuery AJAX Change This Text</h2> </div>
<button>Get External Content. </button>
</body>
</html>

File name : index.php

File Name:- demo_test.txt

<html> <head> <title>The jQuery Result Example</title>
</head>
<body>
<h2>jQuery and AJAX is FUN!!!</h2>
<p id="p1">This is some text in a paragraph.</p>
</body>
</html>

  • The optional callback parameter specifies a callback function to run when the load() method is completed. The callback function can have different parameters:
  • responseTxt - contains the resulting content if the call succeeds
  • statusTxt - contains the status of the call
  • xhr - contains the XMLHttpRequest object

The following example displays an alert box after the load() method completes. If the load() method has succeeded, it displays "External content loaded successfully!", and if it fails it displays an error message:

Example :- Another Example 4.

File name : index.php

File Name:- index.php

<html> <head> <title>The jQuery Example</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
< script type="text/javascript" language="javascript">
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("demo_test.txt",function(responseTxt,statusTxt,xhr) {
if(statusTxt=="success") alert("External content loaded successfully!");
if(statusTxt=="error") alert("Error: "+xhr.status+": "+xhr.statusText); });
});
});
</script>
</head>
<body>
<div id="div1"> <h2>Let jQuery AJAX Change This Text</h2> </div>
<button>Get External Content. </button>
</body>
</html>

Passing Data to the Server

Many times you collect input from the user and you pass that input to the server for further processing. JQuery AJAX made it easy enough to pass collected data to the server using data parameter of any available Ajax method.

File name : index.php

<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
var name = $("#name").val();
$("#stage").load('/jquery/result.php', {"name":name} );
});
});
</script>
</head>

<body>
<p>Enter your name and click on the button:</p>
<input type = "input" id = "name" size = "40" /><br />

<div id = "stage" style = "background-color:cc0;">
STAGE
</div>

<input type = "button" id = "driver" value = "Show Result" />
</body>
</html>

File name : result.php

<?php
if( $_REQUEST["name"] ){
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>

Example :-

File name : mypage.php

<html>
<head>
<title></title>
</head>
<body>
<h2> My Result Page.</h2>
</body>
</html>

File name : index.php

<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>

<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.ajax( {
url:'mypage.php',
success:function(data) {
$('#stage').html(data);
}
});
});
});
</script>
</head>

<body>
<p>Click on the button to load result.html file:</p>

<div id = "stage" style = "background-color:blue;">
STAGE
</div>

<input type = "button" id = "driver" value = "Load Data" />
</body>
</html>





Previous Next


Trending Tutorials


PHP

PHP

100+ Tutorials
oops

PHP OOPs

80+ Tutorial
Codeigniter

Codeigniter

100+ Tutorial
Laravel

Laravel

100+ Tutorials
Node.js

NODE.JS

100+ Tutorials
Javascript

Javascript

100+ Tutorials


Review & Rating

0.0 / 5

0 Review

5
(0)

4
(0)

3
(0)

2
(0)

1
(0)

Write Review Here


Most Popular Tutorials

 Important Link