Hai Friends..
In this section we will see following topics
How to use AJAX-PHP?
How to use AJAX-ASP.Net?
How to use AJAX-JSP?
Am explain single files and explain how to use AJAX in PHP,ASP.Net and JSP... Its very easy to understand and you can use AJAX in any kind of Server Side Scripting like PHP,ASP,JSP...
AJAX with PHP-MYSQL
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AJAX-PHP MYSQL EXAMPLE </title>
<style>
#container{ width:900px; margin:0 auto;}
#header{ width:100%; height:75px; background-color:#FFCC00; border-bottom:3px solid #FF6600}
#header h1{ color:#FF0033; padding-top:20px;}
#search{ width:100%; height:60px; padding-top:20px; text-align:right}
#content{ width:100%;}
#leftcontent{ width:70%; float:left;}
#updateArea { width:100%; border:1px solid #666666;}
#updateArea p{ padding:10px;}
#rightcontent{ width:25%; float:left}
#footer{ width:100%; height:30px; background:#FFCC00; border-top:3px solid #FF6600}
</style>
<script>
function getResult()
{
var searchkey=document.getElementById("searchkey").value;
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200)
{
document.getElementById("updateArea").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "search.php?searchkey="+searchkey, true);
xhttp.send();
}
</script>
</head>
<body>
<div id="container">
<div id="header"><h1>AJAX-PHP MySQL DEMO</h1></div>
<div id="search">
Search Keywords
<input type="text" id="searchkey" style="width:300px; padding:3px; border:1px solid #0099CC" />
<input type="submit" name="submit" value="SHOW RESULT" onclick="getResult()" />
</div>
<div id="content">
<div id="leftcontent">
<h3>Welcome to AJAX Example</h3>
<div id="updateArea">
<p>AJAX is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.
Examples of applications using AJAX: Google Maps, Gmail, YouTube, and Facebook.</p>
</div>
</div>
<div id="rightcontent">
<h2>AJAX Tutorials</h2>
<ul>
<li>AJAX Introduction</li>
<li>AJAX Working</li>
<li>AJAX Methods</li>
<li>AJAX Examples</li>
<li>AJAX PHP</li>
<li>AJAX ASP</li>
<li>AJAX JSP</li>
</ul>
<br />
<img src="images/Ajax-programing.jpg" />
</div>
</div>
<div style="clear:both"></div>
<div id="footer">
AJAX Tutorials
</div>
</div>
</body>
</html>
search.php
<?php
$searchkeyword=$_GET["searchkey"];
echo "<h2>Your Search Keyword is</h2>";
echo $searchkeyword;
?>
the above code copy paste and save index.php and search.php in your server and run the script.. you get following output.
In this section we will see following topics
How to use AJAX-PHP?
How to use AJAX-ASP.Net?
How to use AJAX-JSP?
Am explain single files and explain how to use AJAX in PHP,ASP.Net and JSP... Its very easy to understand and you can use AJAX in any kind of Server Side Scripting like PHP,ASP,JSP...
AJAX with PHP-MYSQL
index.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>AJAX-PHP MYSQL EXAMPLE </title>
<style>
#container{ width:900px; margin:0 auto;}
#header{ width:100%; height:75px; background-color:#FFCC00; border-bottom:3px solid #FF6600}
#header h1{ color:#FF0033; padding-top:20px;}
#search{ width:100%; height:60px; padding-top:20px; text-align:right}
#content{ width:100%;}
#leftcontent{ width:70%; float:left;}
#updateArea { width:100%; border:1px solid #666666;}
#updateArea p{ padding:10px;}
#rightcontent{ width:25%; float:left}
#footer{ width:100%; height:30px; background:#FFCC00; border-top:3px solid #FF6600}
</style>
<script>
function getResult()
{
var searchkey=document.getElementById("searchkey").value;
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200)
{
document.getElementById("updateArea").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "search.php?searchkey="+searchkey, true);
xhttp.send();
}
</script>
</head>
<body>
<div id="container">
<div id="header"><h1>AJAX-PHP MySQL DEMO</h1></div>
<div id="search">
Search Keywords
<input type="text" id="searchkey" style="width:300px; padding:3px; border:1px solid #0099CC" />
<input type="submit" name="submit" value="SHOW RESULT" onclick="getResult()" />
</div>
<div id="content">
<div id="leftcontent">
<h3>Welcome to AJAX Example</h3>
<div id="updateArea">
<p>AJAX is a technique for creating fast and dynamic web pages.
AJAX allows web pages to be updated asynchronously by exchanging small amounts of data with the server behind the scenes. This means that it is possible to update parts of a web page, without reloading the whole page.
Classic web pages, (which do not use AJAX) must reload the entire page if the content should change.
Examples of applications using AJAX: Google Maps, Gmail, YouTube, and Facebook.</p>
</div>
</div>
<div id="rightcontent">
<h2>AJAX Tutorials</h2>
<ul>
<li>AJAX Introduction</li>
<li>AJAX Working</li>
<li>AJAX Methods</li>
<li>AJAX Examples</li>
<li>AJAX PHP</li>
<li>AJAX ASP</li>
<li>AJAX JSP</li>
</ul>
<br />
<img src="images/Ajax-programing.jpg" />
</div>
</div>
<div style="clear:both"></div>
<div id="footer">
AJAX Tutorials
</div>
</div>
</body>
</html>
search.php
<?php
$searchkeyword=$_GET["searchkey"];
echo "<h2>Your Search Keyword is</h2>";
echo $searchkeyword;
?>
the above code copy paste and save index.php and search.php in your server and run the script.. you get following output.
Explanation:
The above code run your web server.. you get above output..
that page you enter any keyword in search box
and click the show result button...
the getResult() function will be called in run time..
The js function first we get run time input in document.getElementById("searchkey").value method.
that input received and store the variable searchkey
var searchkey=document.getElementById("searchkey").value;
Next create XMLHttpRequest Object xhhtp
var xhttp;
xhttp = new XMLHttpRequest();
xhttp = new XMLHttpRequest();
Next send the Request to a server like search.php with passing parameter like the way
xhttp.open("GET", "search.php?searchkey="+searchkey, true);
xhttp.send();
Next request send server page.. that page received coming parameter in following methods
<?php
$searchkeyword=$_GET["searchkey"];
echo "<h2>Your Search Keyword is</h2>";
echo $searchkeyword;
?>
Next Search.php response is Ready (That means onreadystatechange event state is 4) and search.php is found( its means page found status 200) the response is ready..
Next that response come back to browser, and updated particular part in without reloading the wholepage.
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200)
{
document.getElementById("updateArea").innerHTML = xhttp.responseText;
}
};
The output is
Note:
You can use same little bit change and you use ASP.NET and JSP
AJAX - ASP.NET
1. Just Change requested server page code
xhttp.open("GET", "search.aspx?searchkey="+searchkey, true);
xhttp.send();
2. in Received server page you received parameter in ASP.Net Code way
<%
Dim searchkeyword As String=request.getParameter("searchkey")
response.Write( "<h2>Your Search Keyword is</h2>")
response.write(searchkeyword)
%>
AJAX - JSP
1. Just Change requested server page code
xhttp.open("GET", "search.jsp?searchkey="+searchkey, true);
xhttp.send();
2. in Received server page you received parameter in ASP.Net Code way
<%
String searchkeyword As String=request.getParameter("searchkey");
System.out.println( "<h2>Your Search Keyword is</h2>");
System.out.println(searchkeyword);
%>
xhttp.send();
Next request send server page.. that page received coming parameter in following methods
<?php
$searchkeyword=$_GET["searchkey"];
echo "<h2>Your Search Keyword is</h2>";
echo $searchkeyword;
?>
Next Search.php response is Ready (That means onreadystatechange event state is 4) and search.php is found( its means page found status 200) the response is ready..
Next that response come back to browser, and updated particular part in without reloading the wholepage.
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200)
{
document.getElementById("updateArea").innerHTML = xhttp.responseText;
}
};
The output is
You can use same little bit change and you use ASP.NET and JSP
AJAX - ASP.NET
1. Just Change requested server page code
xhttp.open("GET", "search.aspx?searchkey="+searchkey, true);
xhttp.send();
2. in Received server page you received parameter in ASP.Net Code way
<%
Dim searchkeyword As String=request.getParameter("searchkey")
response.Write( "<h2>Your Search Keyword is</h2>")
response.write(searchkeyword)
%>
AJAX - JSP
1. Just Change requested server page code
xhttp.open("GET", "search.jsp?searchkey="+searchkey, true);
xhttp.send();
2. in Received server page you received parameter in ASP.Net Code way
<%
String searchkeyword As String=request.getParameter("searchkey");
System.out.println( "<h2>Your Search Keyword is</h2>");
System.out.println(searchkeyword);
%>
No comments:
Post a Comment