Wednesday, 15 June 2016

Easy Making AJAX Grid Using PHP MySQL- Example Source Code

PHP GRID DEMO USING AJAX

AJAX GRID Using PHP -MySQL

Source Files

grid.php
getProduct.php
Config.php

grid.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 GRID DEMO</title>
<style>
#page{ width:400px; background:#F5F5F5; margin:0 auto}
h2{ color:#000033}
#updateArea{ width:400px; margin:0 auto}
table.grid {
width:100%;
font-family: verdana,arial,sans-serif;
font-size:11px;
color:#333333;
border-width: 1px;
border-color: #666666;
border-collapse: collapse;
}
table.grid th {
border-width: 1px;
padding: 5px;
border-style: solid;
border-color: #666666;
background-color: #F7F7F7;
}
table.grid td {
border-width: 1px;
padding: 5px;
border-style: solid;
border-color: #666666;
background-color: #ffffff;
}
</style>
<script>
function getProduct()
{

var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (xhttp.readyState == 4 && xhttp.status == 200)
{
document.getElementById("updateArea").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "getProduct.php", true);
xhttp.send();
}
</script>
</head>

<body>
<div id="page">
<h2 align="center">AJAX GRID DEMO</h2>
<p align="center"><input type="submit" name="submit" value="LOAD DATA" onclick="getProduct()" /></p>

<div id="updateArea">
<hr />
Grid Uplaoded
<hr />
</div>
<p align="center">AJAX Grid Demo</p>
</div>
</body>
</html>

getProduct.php

<?php

include("config.php");

$gq="select *from productmaster";

$gqres=mysqli_query($con,$gq);

$sno=1;

echo "<table class='grid'>";

echo "<tr>";

echo "<th>S.NO</th>";

echo "<th>PRODUCT ID</th>";

echo "<th>PRODUCT NAME</th>";

echo "</tr>";

while($gqrow=mysqli_fetch_array($gqres))

{

$sno=$sno+1;

echo "<tr>";

echo "<td>".$sno."</td>";

echo "<td>".$gqrow["productid"]."</td>";

echo "<td>".$gqrow["productname"]."</td>";

echo "</tr>";

}

echo "</table>";

config.php

<?php

$con=mysqli_connect("localhost","root","","griddemo");

if(mysqli_connect_errno())

{

echo "Failed".mysqli_connect_error();

}

The above code output is

Before Loaded Grid Demo

After Loaded Grid Demo

Any issues or problem to run please leave your comment section i will help to run..

Thank You!

AJAX with PHP-MySQL Example source code

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.

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();

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);
%>

Easy and Simple AJAX Example Source Code

Hi friends

Simple AJAX Program Source Code

In This post give easy and basic simple ajax program source code.
this code how to use ajax in webpage.

There are two page
1. Index.php (client Page)
2.getdata.php (Requested Server page)

Index.php

<!DOCTYPE html>
<html>
<head>
<script>
function updateData()
{
var xhttp;
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function()
{
if (xhttp.readyState == 4 && xhttp.status == 200)
{
document.getElementById("updateAreapart").innerHTML = xhttp.responseText;
}
};
xhttp.open("GET", "getdata.php", true);
xhttp.send();
}
</script>
</head>
<body>
<h3>Simple AJAX Program:</h3>
<input type="submut" name="submit" onlcick="updateData()">
<div id="updateAreapart">
</div>
</body>
</html>

getdata.php

<?php
echo "Hai welcome !";
echo "This is Server Response content";
?>

Explanation:

if you copy and paste above code and run the page.
First page runs display following output

When you click the button call javaScript function, the function we write js function..

that function started we give alert message box.. this check for javascript function call correct or wrong purpose.. finally this message we give commeneted line

after alert line.. we create XMLHttpRequest Object and Send Request and write onreadystatechange events..

Requested page getdata.php is available and response ready than updated area in body section the content will be updated that particular area without reloading the whole webpage.

you get following output without reloading the whole webpage

Note: AJAX Scripts only run Web Server.. does not run normal HTML way.. the above both files copy and paste XAMPP Server and run the scripts..

This is basic AJAX Program.. this you can understand you can make anything in your web application..
AJAX use many more situation to make good web apps
In personally we make more apps using AJAX Technology..

If anything doubt.. please give comment and contact my mail id..
Am ready to solve your problems

Thank You!

Next section will come more live AJAX Example code and explanation..

keep it touch our blog!

Tuesday, 14 June 2016

Easy Learn AJAX- Beginners AJAX Tutorials Part 5- Server Response Method

Hi Friends

In this section will see that how to Server Response to browser(client) and what basics response come back to browser

AJAX Server Response to browser

There are two methods property in server response
1.responseText
2.responseXML

the above XMLHttpRequest object to get response data as string than we can use above method in following way
xhttp.responseText

the above XMLHttpRequest object to get response data as XML than we can use above method in following way
xhttp.responseText

Ok fine!

Then how to use this code in script and how to update particular part without reloading the whole webpage

document.getElementById("updateArea").innerHTML = xhttp.responseText;
document.getElementById("updateArea").innerHTML = xhttp.responseTextXML;

This above code inside the onreadystatechange event like it

xhttp.onreadystatechange = function()
{
if (xhttp.readyState == 4 && xhttp.status == 200) {
document.getElementById("updateArea").innerHTML = xhttp.responseText;
}

};

Next section will post Live time example scripts

Thank You!

Easy Learn AJAX- Beginners AJAX Tutorials Part 4- Send Request to a Server

Hi Friends

In this section how to send request to a server. last section we create XMLHttpRequest Object in successfully. that object is xhhtp.

Ok fine!

To send request to a server we can use following methos of XMLHttpRequest object like xhhtp

1. Open()
2. Send()

Basic Syntax of above methods

xhttp.open()

Note:

A small request than we can use Async="False" Method
A Husge request the we can use Async="True" Method
If we can use Async="True" then Must Write OnreadyStateChange Event
when Async="False" Then do not write OnreadyStateChange Event

xhttp.send()

This method we can use same like that..

Example 1 : Async is False method
<head>
<script>
function myfunction()
{
var xhttp;
if (window.XMLHttpRequest)
{
xhttp = new XMLHttpRequest(); // Modern browser
}
else
{
xhttp = new ActiveXObject("Microsoft.XMLHTTP"); // Older browser
}

xhttp.open("POST", "Customer.php", false);
xhttp.send();
}
</script></head>

Example 2 : Async is True method

<head>
<script>
function myfunction()
{
var xhttp;
if (window.XMLHttpRequest)
{
xhttp = new XMLHttpRequest(); // Modern browser
}
else
{
xhttp = new ActiveXObject("Microsoft.XMLHTTP"); // Older browser
}
xhhtp.onreadystatechange=function()
{
}

xhttp.open("POST", "Customer.php", True);
xhttp.send();
}
</script></head>

The onreadystatechange Event

When a request to a server is sent, we want to perform some actions based on the response.
The onreadystatechange event is triggered every time the readyState changes.
The readyState property holds the status of the XMLHttpRequest.
Three important properties of the XMLHttpRequest object:

1. onreadystatechange

It holds stores function

xhhtp.onreadystatechange=function()
{
}

2.readyState
xhttp.readystate = it holds status of XMLHttpRequest Object
0 to 4 States are available.
0 means Request not initialized
1 Sever connection established
2 Received Request
3 Request Processed
4 Request Finished and Ready to Respond
3.status
xhhtp.status = it holds status request and response
200 Page Found
404 Page Not Found

Finally we know in onreadystatechange event,
when Request Finished and ready for respond and update page found then response will ready!
i.e
xhttp.readyState == 4 && xhttp.status == 200

<head>
<script>
function myfunction()
{
var xhttp;
if (window.XMLHttpRequest)
{
xhttp = new XMLHttpRequest();   // Modern browser
}
else
{
xhttp = new ActiveXObject("Microsoft.XMLHTTP");  // Older browser
}
xhhtp.onreadystatechange=function()
{
   if (xhttp.readyState == 4 && xhttp.status == 200) {
---XML HTTP RESPONSE --- Next Section will see that

}
};
xhttp.open("POST", "Customer.php", True);
xhttp.send();
}
</script></head>

Thank You!

Easy Learn AJAX- Beginners AJAX Tutorials Part 3- Create XMLHttpRequest Object

Hi Friends

In this section will see

Why Create XMLHttpRequest Object?
How to Create XMLHttpRequest Object?
Examples XMLHttpRequest Object

Why XMLHttpRequest Object?

The XMLHttpRequest Object is used to to Exchange data with Server. this meas that is possible to update part of webpage without reloading the whole webpage.
All modern Browsers supports XMLHttpRequest Object because all moders browsers have built in this object.
If older browesr like IE below version we can create ActiveX Object

Basic Syntax for creating XMLHttpRequest Object and ActiveX Object

Variable_name(object_name)= new HttpRequest(); This is Modern Browser

Varibale_name(object_name)= new ActiveXObject("Microsift.XMLHTTP") This is Older Browser

How to Create XMLHttpRequest Object and ActiveX Object in one way

<head>
<script>
function myfunction()
{
var xhttp;
if (window.XMLHttpRequest)
{
xhttp = new XMLHttpRequest();   // Modern browser
}
else
{
xhttp = new ActiveXObject("Microsoft.XMLHTTP");  // Older browser
}
}
</script>
</head>

How to Check your browser Modern/Older Browser

<html>
<title>XMLHttpRequest Object</title>
<script>
function myfunction()
{
var xhttp;
if (window.XMLHttpRequest)
{
xhttp = new XMLHttpRequest();   // Modern browser
alert("You have Modern Browser!")
}
else
{
xhttp = new ActiveXObject("Microsoft.XMLHTTP");  // Older browser
alert("You have Older Browser!")
}
}
</script>

</head>

<body>
<input type="submit" name="submit" value="Check Browser" onclick="myfunction()" />
</body>

</html>

This above code

window.XMLHttpRequest supports will show msg in Modern Browser and we create that xhttp object for XMLHttpRequest method.
if does not support will show msg older browser and we create xhttp object for ActiveXObject Method.

I hope this section can clear your doubts and how to create and use in your script..

Thank you!

Easy Making webApps - Source code