Loading...
Cancel
Loading...
Why do you need AJAX instead of your traditional Web designing/Developing method??
———————————————————————————————
How easy to surf one 100% data driven web site? I think its not so easy because it take too time to load every module when I press each link. That’s the great problem. You need only details information or one article but your web browser is loading every modules as well as graphics. How funny things. You want to know one’s name but he will give you all of his history as well as his Grand grand father information @-)
I think some people have some know how about game programming or animation programming etc… or concept..
Think you are designing one game or something animation related program. But when your end user run this game every time (for refreshing each motion) it loads every module to represent changes. Can you imagine how disgusting program that will??..
That’s the same thing happing for web technologies. You are developing one 100% data driven web site but how its possible without refreshing web pages to load dynamic content??
Of course its one great question.
To resolve this problem you should use the concept of AJAX.
How can AJAX help you?
———————————————————————————————
Let’s see the background of your portal.
You portal provides some information based services like Stock update stock graps, dynamic blog reader. Mail box, map browser, books information browser, online store, etc.. etc.. blah blah….
Why do your page reload when user press each link ??
>> Ofcourse you want to load some new content from your data base using server parsed scripting language like PHP, JSP, ASP, Perl, Ruby, Python etc…
Your portal (I am thinking its one bulky from the content and information) contains many item and each time it loads every module and it consumes your bandwidth and also patient of your portal visitor..
For example people pressed on only search button and submit button or next article navigation link but its load each module from the beginning. People don’t like to load each module every time.
AJAX can help you to get rid from these unexpected events.
Ajax’s main purpose is hidden in its successfully concept.
If you use AJAX based development methodology your user will feel powered to surf your website.
That time it will like Press and see the dynamic content.. no repetition loading which was already loaded for that module.
How can I do it using PHP(bcz we are from PHPXperts)?
———————————————————————————————
Very simply why you can do it
I am showing one solution but if you get good solution don’t forget to share with us:D
Create one HTML file
Suppose: test1.html
————————-
<html>
<head>
<title>Send mail with AJAX</title>
<script src=”javascript.js”></script>
</head>
<body>
<form onAction=”return actionSendEmail()” name=”form1”>
Email address: <input type=”text” name=”txtEmail” /><br />
Subject: <input type=”text” name=”txtSubject” /><br />
Content: <textarea name=”txtBody”></textarea><br />
<input type=”submit” value=”Send mail”/>
</form>
<div id=”status”></div>
<iframe id=”action_frame” style=”display:none”></iframe>
</body>
</html>
Create one Javascript file
Suppose: javascript.js
—————————–
var isLoop=true;
function actionSendEmail() {
var getEmail=document.form1.txtEmail.value;
var getSubject=document.form1.txtSubject.value;
var getBody=document.form1.txtBody.value;
// build URL
var url=”send_mail.php?to=”+getEmail+
“&subj=”+getSubject+
“&msg=”+getBody;
// set status as pending…
setStatus(“Wait…”);
// send request
sendRequest(url);
// start wait for success function
waitForSuccess();
// stop form to submit this page.
return false;
}
function setStatus(msg) {
var objDiv=document.getElementById(”status”);
objDiv.innerHTML=html;
}
function sendRequest(url) {
var objIframe=document.getElementById(”action_frame”);
objIframe.src=url;
}
function getResponse() {
var objIframe=document.getElementById(”action_frame”);
var iFrame=objIframe.contentWindow.document;
return iFrame.body.innerHTML;
}
function clearResponse() {
var objIframe=document.getElementById(”action_frame”);
var iFrame=objIframe.contentWindow.document;
iFrame.body.innerHTML=”";
}
function waitForSuccess() {
var rExp=new RegExp(’\\+OK\\s*(.+)’,”i”);
var rExp2=new RegExp(’\\-ERR\\s*(.+)’,”i”);
if(getResponse().search(rExp) !=-1) {
isLoop=false;
performAction(getResponse().match(rExp));
clearResponse();
}
else if(getResponse().search(rExp2) !=-1) {
isLoop=false;
errorAction(getResponse().match(rExp));
clearResponse();
}
// loop
if(isLoop==true) {
window.setTimeout(”waitForSuccess()”,500);
}
else {
// loop break
isLoop=true;
}
}
function performAction(resp) {
setStatus(“Thank you for your email”);
}
function errorAction() {
setStatus(“failed to send email”);
}
Now write one PHP file
Suppose: send_mail.php
——————————
< ?php
$getEmail=$_REQUEST[‘to’];
$getSubj=$_REQUEST[‘subj’];
$getMsg=$_REQUEST[‘msg’];
// now send mail
if(@mail($getEmail, $getSubj, $getMsg))
echo “+OK Email sent”;
else
echo “-ERR Email failed to send”;
?>
that’s it……
Wow!!
You could complete your first AJAX project
!!! But one thing here I did not use any XML (ajaX) is missed….
Sometimes to optimize your product you should use solid text dependent response and request…
Checkout this site: http://www.ajaxmatters.com/
Thank you..
CEO
Tech Dreamer Corporation.
http://hasan.we4tech.com
http://we4tech.com
http://wap.we4tech.com
| www.flickr.com |
Leave a reply