DOM Using AJAX
In this article i will tell how to create DOM programmatically.Before creating DOM Elements i have given a sample program which i going to create using DOM
<body>
Hello Dude! Here’s a cool list of colors for you:
<br/>
<div id=”myDivElement”>
<ul>
<li>Black</li>
<li>Orange</li>
<li>Pink</li>
</ul>
</div>
</body>
Know i am going to create the above program using JavaScript by declaring as a string.
<html>
<head>
<title>Client Side Techniques</title>
<script type=”text/javascript” src=”call.js”></script>
</head>
<body onload=”process()”>
Hai see the beautiful list of colors
<br/>
<div id=”myDivElement” />
</body>
</html>
Call.js
function process()
{
var string;
string = “<ul>”
+ “<li>Black</li>”
+ “<li>Orange</li>”
+ “<li>Pink</li>”
+ “</ul>”;
myDiv = document.getElementById(”myDivElement”);
myDiv.innerHTML = string;
}
Know i will create the above program using DOM
<html>
<head>
<title>DOM Demo</title>
<script type=”text/javascript” src=”Dom-Demo1.js”></script>
</head>
<body onload=”process()”>
<br/>
<div id=”myDivElement” />
</body>
</html>
function process()
{
text=document.createTextNode(”Here is a cool list of colors:”);
ul=document.createElement(”ul”);
liBlack=document.createElement(”li”);
textBlack=document.createTextNode(”Black”);
liBlack.appendChild(textBlack);
liOrange=document.createElement(”li”);
textOrange=document.createTextNode(”Orange”);
liOrange.appendChild(textOrange);
liBlue=document.createElement(”li”);
textBlue=document.createTextNode(”Blue”);
liBlue.appendChild(textBlue);
ul.appendChild(liBlack);
ul.appendChild(liOrange);
ul.appendChild(liBlue);
myDiv = document.getElementById(”myDivElement”);
// add content to the <div> element
myDiv.appendChild(text);
myDiv.appendChild(ul);
}
Ready-State-Values
Initially copy the XMLHttp-Initialize.js script file from the blog and run to know the ready state values of AJAX .And also create a txt file of name async.txt and type some text into it.
Ready-State-Values.html
<html>
<script type=”text/javascript” src=”XMLHttp-Initialize.js”></script>
<script type=”text/javascript”>
function process()
{
if(xhr)
{
try
{
xhr.open(”GET”, “async.txt”, true);
xhr.onreadystatechange = handleRequestStateChange;
xhr.send(null);
}
catch(e)
{
alert(”Can’t connect to server:\n” + e.toString());
}
}
}
function handleRequestStateChange()
{
myDiv = document.getElementById(”myDivElement”);
// display the status of the request
if (xhr.readyState == 1)
{
myDiv.innerHTML += “Request status: 1 (loading) <br/>”;
}
else if (xhr.readyState == 2)
{
myDiv.innerHTML += “Request status: 2 (loaded) <br/>”;
}
else if (xhr.readyState == 3)
{
myDiv.innerHTML += “Request status: 3 (interactive) <br/>”;
}
// when readyState is 4, we also read the server response
else if (xhr.readyState == 4)
{
// continue only if HTTP status is “OK”
if (xhr.status == 200)
{
try
{
// read the message from the server
response = xhr.responseText;
// display the message
myDiv.innerHTML += “Request status: 4 (complete). Server said: <br/>”;
myDiv.innerHTML += response;
}
catch(e)
{
alert(”Error reading the response: ” + e.toString());
}
}
else
{
// display status message
alert(”There was a problem retrieving the data:\n” + xmlHttp.statusText);
}
}
}
</script>
<body onload=’process()’>
Hello, server!
<br/>
<div id=”myDivElement” />
</body>
</html>
Initializing XMLHttpRequest Object
This is the standard way of initializing XMLHttpRequest Object
XMLHttp-Initialize.js
var xhr;
if(window.ActiveXObject)
{
try
{
xhr = new ActiveXObject(”Microsoft.XMLHTTP”);
}
catch (e)
{
xhr = false;
}
}
else
{
try
{
xhr = new XMLHttpRequest();
}
catch (e)
{
xhr = false;
}
}
Download Code
AJAX Introduction
AJAX Introduction
In traditional JavaScript coding, if you want to get any information from a database or a file on the server, or send user information to a server, you will have to make an HTML form and GET or POST data to the server. The user will have to click the “Submit” button to send/get the information, wait for the server to respond, then a new page will load with the results.
Because the server returns a new page each time the user submits input, traditional web applications can run slowly and tend to be less user-friendly.
With AJAX, your JavaScript communicates directly with the server, through the JavaScript XMLHttpRequest object. With an HTTP request, a web page can make a request to, and get a response from a web server – without reloading the page. The user will stay on the same page, and he or she will not notice that scripts request pages, or send data to a server in the background.
Python Notes
Hey recently i learnt Python,i have prepared notes of it is u find usefull do find time to download.
Sending Data using GET method
sendingdata-GET.html <html> <head> <title>XMLHttpRequest - Sending Data with GET Query Strings </title> <script type="text/javascript"> var xhr = false; if (window.XMLHttpRequest) { xhr = new XMLHttpRequest(); } else if (window.ActiveXObject) { xhr = new ActiveXObject("Microsoft.XMLHTTP"); } function sendRequest(url) { var value = document.getElementById("t1").value; var url = "http://localhost/Sending-Data-GET.php"; var newurl=url+"?"+"t1="+value; if (xhr) { alert("xhr exists"); xhr.open("GET",newurl,true); xhr.onreadystatechange = function() { if (xhr.readyState == 4 && xhr.status == 200) { var responseOutput = document.getElementById("responseOutput"); responseOutput.innerHTML = xhr.responseText; } } } xhr.send(null); } </script> </head> <body> <h3>Send Data Using GET method Using Ajax</h3> <form action="#" method="GET"> <input type="text" name="t1" id="t1"> <input type="button" name="rating" onclick="sendRequest();"> </form> <br />
<div id="responseOutput"> </div> </body> </html> Sending-Data-GET.php <? $v=$_GET['t1']; echo "Server Side Coding $v"; ?>
Display Time continiously
Time-Continous.html This sample code gets the time from server and display continiously using AJAX. <html> <head> <title>AJAX with PHP: Quickstart</title> <script type="text/javascript"> // stores the reference to the XMLHttpRequest object var xmlHttp=null; if(window.ActiveXObject) { try { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { xmlHttp = false; } } // if running Mozilla or other browsers else { try { xmlHttp = new XMLHttpRequest(); } catch (e) { xmlHttp = false; } } // make asynchronous HTTP request using the XMLHttpRequest object function process() { if(xmlHttp) { // proceed only if the xmlHttp object isn't busy if (xmlHttp.readyState == 4 || xmlHttp.readyState == 0) { xmlHttp.open("GET", "time.asp", true); xmlHttp.onreadystatechange = handleServerResponse; } else setTimeout('process()', 1000); } xmlHttp.send(null); } // executed automatically when a message is received from the server function handleServerResponse() { // move forward only if the transaction has completed if (xmlHttp.readyState == 4) { // status of 200 indicates the transaction completed successfully if (xmlHttp.status == 200) { // extract the XML retrieved from the server xmlResponse = xmlHttp.responseText; document.getElementById("divMessage").innerHTML = '<i>' + xmlResponse + '</i>'; // restart sequence setTimeout('process()', 1000); } // a HTTP status different than 200 signals an error else { alert("There was a problem accessing the server: " + xmlHttp.statusText); } } } </script> </head> <body onload='process()'> Server Time: <div id="divMessage" /> </body> </html> Time.asp <% response.expires=-1 response.write(time) %>
Check whether ur account has Hacked or Not
Has your email been hacked? Google released a new feature in GMail whereby you can see if more than one person is logged into your account. So if you are afraid that someone has hacked into your GMail account and is accessing it without your knowledge, you can now actually track who last logged in and if more than one person is logged in at the same time.
First log into your Gmail account and scroll all the way down to the bottom. You’ll see a line that says “Last account activity” and then the information for who logged in and how long ago.
How To create A JAR File
Hi friends follow the steps carefully to create the jar file.
Consider the following example
//Here the main class name is Sample
class Sample
{
public static void main(String ar[])
{
———–
————
}
}
Step 1 : Create the text file that lists the main class name and save it as mainClass.txt
Main-Class:Sample
Note :After typing the above text press Enter so the file contains two lines one is text and the oteher is blank line.
Step 2 : Now go to command prompt and type
jar cmf mainClass.txt example.jar *.class
Step 3 :Jar file will be created sucessfully
AJAX andXML
Hi before be telling about AJAX and XML Let be tell u what is XML .XML stands for Extensible Markup Language which is an International standards of data exchange .Briefly when a server sends any data to client it actually the XML data coming from server to client and the browser which acts as an interpreter interprets all the XML tags into human readable format which is XSLT.
<html>
<head>
<title>Using Ajax and XML</title>
<script language = “javascript”>
function getGuest()
{
var xhr;
if (window.ActiveXObject)
{
xhr = new ActiveXObject(”Microsoft.XMLHTTP”);
}
else if (window.XMLHttpRequest)
{
xhr = new XMLHttpRequest();
xhr.overrideMimeType(”text/xml”);
}
xhr.onreadystatechange = function()
{
if (xhr.readyState == 4 && xhr.status == 200)
{
var xmlDocument = xhr.responseXML;
removeWhitespace(xmlDocument);
displayGuest(xmlDocument);
}
}
xhr.open(”GET”, “students.xml”, true);
xhr.send(null);
}
function displayGuest (xmldoc)
{
var eventsNode, eventNode, peopleNode;
var firstNameNode, lastNameNode, displayText;
//This goes to inventory Node
eventsNode = xmldoc.documentElement;
eventNode = eventsNode.firstChild;<!–here the actuall code lies here the firstchild will refer to computer science –>
peopleNode = eventNode.firstChild;<!–Same as Above–>
personNode = peopleNode.firstChild;
alert(personNode.firstChild.nodeValue);
displayText = “The Luckypersonis ” + personNode.firstChild.nodeValue;
var target = document.getElementById(”targetDiv”);
target.innerHTML=displayText;
}
function removeWhitespace(xml)
{
var loopIndex;
for (loopIndex = 0; loopIndex < xml.childNodes.length;loopIndex++)
{
var currentNode = xml.childNodes[loopIndex];
if (currentNode.nodeType == 1) {
removeWhitespace(currentNode);
}
if (((/^\s+$/.test(currentNode.nodeValue))) &&
(currentNode.nodeType == 3)) {
xml.removeChild(xml.childNodes[loopIndex--]);
}
}
}
</script>
</head>
<body>
<h1>Using Ajax and XML</h1>
<form>
<input type = “button” value = “Get the tech guy”
onclick = “getGuest()”>
</form>
<div id=”targetDiv” width =100 height=100>
Who is the Techi???????????
</div>
</body>
</html>
<?xml version=”1.0″?>
<students>
<computerscience>
<section-A>
<student1>Naveen</student1>
<student2>Niraj</student>
</section-A>
<section-B>
<student1>Radhesh</student1>
<student2>Rakesh</student>
</section-B>
</computerscience>
<electronics>
<section-A>
<student1>Balraj</student1>
<student2>Parthu</student>
</section-A>
</electronics>
</students>
