by Swobodin

Ajax at The Server

Introduction
At the client browser, what Ajax does is that it calls a file at the server. This file at the server has to be an executable file. The name of this file is part of the URL used by the Ajax at the client. The function of this file is to look for the information requested from the server and send back to the client. The aim of this article is to show you how to send back the required text to the client browser.

I use the Perl and PHP languages for illustration.

You need basic knowledge in Ajax and Perl or PHP in order to understand this article.

To handle Ajax at the server, you do not need to learn any new standard or technology. All you need to know is how to send back information from the server to the client.

Type of data
The information sorted may be text in a text file, a whole text file, text in a database or an XML file. For simplicity we shall assume that the information sorted is just some text (a paragraph) residing somewhere in the server. It is the responsibility of this executable file to look for the required text in the server. Since the aim of this article is to see how the information is sent back, for simplicity again we shall not see how the executable file looks for the information in the server.

The Connection and Sending Information back
Once the connection is established between the client browser and the server (executable file), it is like there is a stream between the client and the browser. Any information that the executable file at the server sends to its standard output goes but to the stream and back to the client browser (not to the computer monitor of the server). So in the case of Perl, all you need to do to send back the information is to type

print $ string;

where $ string is a string variable containing the required text obtained from the server. In the case of PHP, all you need to do to send back the information is to type,

echo $ string;

where $ string is a string variable containing the required text obtained from the server.

The Query String
The query string is the data send by Ajax from the client browser. With the GET method, all the information after the ‘?’ character in the URL, is the query string. With the POST method, the query string is sent as the argument of the Ajax object send() method.

The executable file at the server uses the information in the query string to look for a particular text in the server. If there is no query string, the executable file should send a default text.

An example of a query string is:

          fname=John&lname=Smith

This means that first name is John and last name is Smith.

Illustration with Perl
Let us consider a simple Perl script called ajaxPerlSvr.pl at the server. This is the executable file at the server. This is the file name in the URL of Ajax at the client.

Assume that Ajax at the client sent the above query string. Let us say, the aim of the file, ajaxPerlSvr.pl at the server, is to extract the first name, John form the query string sent to the server, and then send back “John” to the client browser, as the requested text from the server. In practice, the “John” will be used to obtain (search) a particular text in the server and have the text obtained, sent to the client.

This is the content of the Perl file:

use CGI;

$ query = new CGI;

$ value = $ query->param(‘fname’);

print “Content-Type: text/html\n\n”;

print $ value;

Perl has a module called the CGI module. This module has functions that receive the query string. The first statement above imports the CGI module into your program. This module is actually a class. It has properties and methods to manipulate the query string. The next statement in the script creates an object from the class. The name of the object is $ query. This object has your query string.

The statement after, extracts the first name, “John” from the object, and assigns it to the variable, $ value. This statement needs some more explanation: Remember that the query string is made up of name/value pairs. The Perl CGI class has a method called, param(). If the argument of param() is the name of a name/value pair, then the param() method will return the value.

‘fname’ and ‘John’ form a name/value pair in our query string. So if the argument of the param() method is ‘fname’, the param() method will return, ‘John’. In our case, the object that uses the param() method is $ query. In order to call the method, param() of the object, $ query, you need to have “->” between the object and the method. The third statement should now be clear.

Once you have the required text in the Perl program, all you have to do is to use the print command to the send the text back to the client. Since there is a connection (stream) with the executable file, the text goes to the client instead of the server monitor. However, before you send the required text, you must first send the following information:

Content-Type: text/html\n\n

This explains why you have the first print statement. The required text is in the variable, $ value. The second print statement sends the required text.

Illustration with PHP
There are two PHP programs below. Each of these programs does exactly what the Perl program (code segment) above does. With PHP, if Ajax used POST to send the query string, then at the server, PHP will have the name/value pairs of the query string in an associative array, called $ _POST. This is an internal PHP array and it is globally accessible. An associative array consists of keys with corresponding values. For the query string name/value pairs, the $ _POST array keys are names, while the corresponding array values are query string values. The following PHP code is for the POST method:

<?php
     $ value = $ _POST["fname"];
     echo $ value
 ?>

This is a PHP executable file whose name has to be in the URL of the Ajax code at the client. There are two lines in the code. The first line uses the name, “fname” as key of the $ _POST associative array to obtain the value, “John”. This value is assigned to the variable, $ value. Remember, the associative array will always hold the query string sent. The second line in the code sends the value “John” into the stream of the connection.

The following code does the same thing, but for the GET method. Here PHP has the $ _GET associative array to hold the name/value pairs of the query string, sent by Ajax, using the GET method.

<?php
     $ value = $ _GET["fname"];
     echo $ value
 ?>

Conclusion
At the server there is no new standard or technology for Ajax. All you have to know is how a language gets the data from the query string sent and how it sends text (any string) back into a connection stream initiated from the client. You can use any language for this: C++, Borland Delphi, Visual Basic.net etc. I have used only perl and PHP for illustration.

Chrys

To arrive at any of the parts of this series, just type the corresponding title below in the Search Box of this page and click Search (use menu if available):

Making Ajax Request
Receiving Response to Ajax Request
Ajax at the Server
 

BPSwoopo – Penny auction script like Swoopo – PHP, AJAX Enabled

Build your penny auction site in minutes!

BPowerHouse BPSwoopo script is a powerful, scalable & fully-featured auction script that gives you a great opportunity to implement your ideas to the ultimately profitable online penny auction website like swoopo, bidster, madbid. It allows to manage entire online auction operation: create new auctions within seconds, view members auctions and use the auction extension settings tool.

BPowerHouse BPSwoopo will allow to setup comprehensive and robust auction site. Site administrator can adjust auctions time, step, bid increments, date formats, user authentication, graphic design layout and other parameters in admin panel. Auction payments are via PayPal and it is possible to integrate another payment processor.

BPowerHouse BPSwoopo provides your site visitors with an exciting online shopping experience that allows them to make enormous purchases of products, at up to 90% off.

Live Support window Administrator can support people who are having questions about issues on the site in real time.

AJAX-based homepage is showing all active auctions, while current bids and auction status (opened/active/closed) is updated in asynchronous mode – so you can see and follow all the development of the auction, which you are interested in, without even touching the mouse!

User Control Panel A detailed, user friendly control panel where the user can change profile details, view won auctions, view auctions watch list, increase account balance, view transaction history and view history of previous bids.

Upgrades and new versions are continuously released by BPowerHouse in order to satisfy customers requests and to stimulate the growing interest about their one of the best programs.

Main Features:

Users register and pay for participation
Customizable bid increment system
BPowerHouse Admin Panel
Easy and fast installation! No programming skills required!
Live demo is available on http://bpowerhouse.info/penny-auction-script-like-swoopo.htm” target=”_blank”>http://bpowerhouse.info/penny-auction-script-like-swoopo.htm

by SS&SS

BPowerHouse – Products – PHP AJAX DataGrid

Description: 
PHP AJAX DataGrid – is a powerful script, that allows you to display data in grid layout. It is very simple to set up and works with AJAX module. 

Technology: PHP, AJAX 

Database: MySQL 

Price: .90 

Main Features:

Columns Sorting
Paging
AJAX data retrieving

Our other scripts: 

Google Map User Location Control ASP.NET
Mini Blog
Mini CMS
BPEstate – Real-Estate Marketplace Script
BPHelpDesk – Support Tickets Application
BPDirectory – Business Directory Script
BPMembers – Company Network Script
BPTraveling – Traveling site
BPAutosales – Cars Sales Site
BPConferenceReporting – Reporting Web Application
BPHotels – Hotel site
BPower Unique Low Bid Auction
BPAuction

What is BPowerHouse? ( Read about the company ) 

Outsourcing is the process of subcontracting web and software development to an organization outside your own company. Try it today! Would you like to outsource your next project? Bookmark our homepage to make sure you don’t forget about our website next time you need to develop an IT project for yourself or your company. It’s easy, fun and very affordable to outsource your project with us. BPowerHouse helps webmasters, web designers, programmers, software developers and business owners to develop their projects. 

Outsource projects and save a lot of money. Getting affordable work, programming and custom web design done for your website has never been easier. Web Development doesn’t have to be expensive. Outsourcing will cut your expenses by more than 50%. If you never tried to contract work to another part of the world you have your chance today. We have a lot of satisfied clients around the world.

     ”Initially when we selected BPowerHouse (Alexander), they contacted us and we have had discussion on how my database should look like. Alexander spent about 2 hours in discussing with us to understand the product that we wanted to develop. After analyzing, the database we wanted to develop Alexander came with some suggestions, which were very good. While developing the database he was in chat with me many times and has given me the beta version so that I can test it. After testing, he has done great job in changing the database that would suite to our needs and added extra functions that we recommended. I am 100% satisfied with his work!”

Attorney Rahul Reddy, Texas, USA

More PHP Organizer Scripts Articles

Super Ajax Polling/Voting System using JQuery, Ajax, PHP and MySQL

Polling system or Voting system is very common in web sites. Voting can be about your site or blog or some other thing just to get the user attention and get your idea about your product.
I always tries to provide the users of 99Points.info some common but useful scripts which makes their effort succeeded. So after some voting system tutorials like
Digg style Voting now I have come to simple ajax based polling system. This is another series of Jquery. Hope You like it and don’t forget to subscribe and give your feed back in comments. Thanks !

So after some voting system tutorials like Digg style Voting now I have come to simple ajax based polling system.You can get facebook style comment script, facebook style extracting url data and many more. Visit 99Points.info

Polling system or Voting system is very common in web sites. Voting can be about your site or blog or some other thing just to get the user attention and get your idea about your product.
I always tries to provide the users of 99Points.info some common but useful scripts which makes their effort succeeded.

Polling system or Voting system is very common in web sites. Voting can be about your site or blog or some other thing just to get the user attention and get your idea about your product.
I always tries to provide the users of 99Points.info some common but useful scripts which makes their effort succeeded. thanks you !

Upload Image Without Refresh Page – Asynchronous Image File Upload Without Ajax

Through concept such as Ajax and scripting languages like PHP, we now have a much robust set tools with which to deal with imaging. Thorugh Ajax, we can dynamically load and display images without the rest of the page having to reload, which speeds up the process considerably. We also have more control over what the user sees while the screen or images load. Users are generally understanding of load times, provided that you let them know what is happening. Thorugh Ajax and a little PHP magic, we can help the user’s experience be a seamless and enjoyable as possible.

The basic uploading, manipulating and dynamically displaing images using PHP and Ajax.

Uploading Images
I suppose it is neccessary to bring a little bad news to Ajax at this point, it is not possible to process a file upload through the XMLHtrtpRequest Object. The reason of this is that javascript has no access to your computer’s file system. While this is somewhat disappointing, there are still ways to perform Ajax-like functionality for this wighout making use of the XMLHttpRequest Object. Clever developeres have discovered that you can use hidden iframes to post a form request, thereby allowing for a image upload wiothout refresh.

I am designing a website with ajax and php. My main target is doing everything without full page refresh. I have done everything completed. I solved it partially using IFRAME.

By setting the iframe’s CSS display property to none, the element is persent on the page to be utilized by the upload form, but not visible to the end user. by assiging a name to the iframe tag, you can use the target attribute in the form tag to post the request to the hidden iframe. Once you have the iframe configured, you can perform any uploads you like, and then use Ajax to perform any extra functionality. Consider the following example, which will allow yout to upload an image to a folder of your specification. Consider the code, which will allow you to create application.

An Ajax-enabled file upload system that uses hidden iframes to hide the upload

The code to create form, with a hidden iframe for processing

As you can see, you are using the same functionality and you will now use it to load the recently uploaded image into your

web page dynamically and without a screen refresh. The uploading function will still perform your form submission, but it is now coupled with a function called downloading, which will fire once the process_upload.php script has finished uploading the image (determined by the onload evernt). The doneuploading function takes ther parent frame of the hidden iframe and the fine name as arguments. It then users Ajax to dyanmically load the image the speicified element of ther parent frame.

Im trying to create a page for a picture framing site where users can upload images to see how they would look framed.

Uploading images can be broken down into the three following steps which will be looked at in turn:

* An HTML form with a browse button to allow the client to choose which file to upload
* A script to process the upload, validate the file, name it and place it in the file system
* Lastly a page to advise the client the upload was a success
* Is there a AJAX based solution or PHP based solution to check the filesize a user is trying to upload via a form.
* If the filesize exceeds more than 2 MB we want to give a message to the user that they need to upload a smaller file

size.

You can upload ZIP file of all your images in one shoot. You can upload image using zip file.
* You can create zip file for image, doc file and other file.
* This script find only jpg file uploaded and other file deleted.
* You can set which extension allowed or not allowed using this script uploaded.

Top 10 Ajax scripts

<!– @page { margin: 0.79in } P { margin-bottom: 0.08in } H3 { margin-bottom: 0.08in } H3.cjk { font-family: “Lucida Sans Unicode” } H3.ctl { font-family: “Tahoma” } –>

Image Zoomer:

Image zoomer script is generally called as an image magnifier. It is basically a CSS/DOM/Javascript. The script is very userfriendly and if we mouse over the picture, we can see a little zoom window with a magnified version of a part of the picture in it. The zoom ratio increases or decreases as per the mouse options. The attracting features are it is too Faster,Works on IE7,cleaner code to insert, can change the relative position of the zoom box,works with all types of imageformats.

35mm Photo Viewer:

Generally photography is an art.There is only one way to look at photos, but in this technical world there are an infinite number of ways to organize and present them.Photoviewer script is a DHTML-driven browser-based app which provides viewing of photos with a sortedcollection. In addition to it a few different CSS-driven “skins” are available and XML/XSLT functionality provides more dynamic data sources and updates. The additional features are Thumbnails and fun filled soundeffects.Development,Testing can be done with IE5,6,7 and opera,Netscape.

Cross-fade Anything:

CrossFade Anything is an unobtusive script that will reveal multiple elements one at a time with a transition effect.Both Ajax and Jquery scripts are used.There are 4 different transition styles supplied with the library, each one is different and specific.There is another option to add a class name inside the parent element.The attracting feature in the script is the best presentation with many fadein,Fadeout images.It is processed in such a way that, making all immediate descendants absolutely positioned to tile them on top of each other.

Codylindley-Rollover script:

The Rollover script is basically an ajax script and the links will be coded with a specific content within the script.The working demonstrates how the tool tip will flip horizontally depending upon the space between the tool tip and the right side of the window. We can easily adjust the browser window so that the links in the paragraphs are placed as close to the right side of the window to maintain the width and an image.The interesting feature of the script is it accounts for the custom widths.

Highslide JS:

Highslide JS is an image, media and gallery viewer written in JavaScript.By a Single click the content opens within the active browser window easily. After opening the image or HTML popup, the user can scroll further down or leave the page without closing it.The Source code is included for all the images.The important underlying feature is its Compatibility and safe degrading and no Popup blockers,no plugins like Flash or Java required. If the user has disabled JavaScript or using an old browser, the browser quickly redirects directly to the image itself or to a given HTML page.

Bubble Tooltips:

The bubbling tooltip consists of a simple combination effects. Both Java and Ajax scripts are use in bubbling.To create the puff popup bubble effect,Markup that assumes that JavaScript is disabled. It would be fair to say that the popup would be hidden from the CSS. Then the hidden popup, is correctly styled for good appearance. CSS requirement is too lessThe one piece of tricky logic initially used is the mouse over option which gives a brief explanation about the link and codes.

Dhtmlgoodies.com:

Dhtmlgoodies script is a perfect example of Pollscript or voting script which is a library of

both Dhtml and Ajax. Ajax is used to send the vote to the server and to return the results from the poll to the users specific browser.The special technic used in this script is no limitations for the number of votes per user. So there is no specific restriction for multiple voting but we can implement a restriction by setting the Javascript variable useCookiesToRememberCastedVotes.

Ajax Tabs Content Script:

Ajax Tabs scriptis a versatile Ajax Tabs Content script that display content pulled from external files inside a DIV and organized via CSS tabs. A fully unobtrusive, CSS and HTML based script, it supports practical features such as persistence of the active tab ie: when the page is reloaded, we can see 3 different types of modes such as an “IFRAME” mode, a “slideshow” mode, ability to expand/contract arbitrary DIVs on the same page at the same time, nested tabs, and much more.The interesting note is it supports multiple Ajax Tabs Contents on the same page.

AJAX Chat:

AJAX Chat is a free and fully customizable open source web chat software implemented in JavaScript, PHP and MySQL. The Sound support is implemented using Flash and the Socket support is done using Flash on client-side and Ruby on server-side. The client-side logic is written in JavaScript. The server-side logic is written in PHP. The chat messages are stored in a MySQL database. AJAX Chat integrates nicely with other PHP community software, Used as shoutbox and Optional visual update information.

AJAX instant edit script:

Using the Instant editor we can easily edit,update the content in the same page.The working process is too simple and a small piece of javascript reads all SPAN tags, checks if it has class=”editText” and a id.If the id is true, adds a onclick function. The onclick function will create a textfield or input depending on the size of the editable text. Someone has the ability to edit the field. When the text field is blurred, it will read the contents, and starts a XMLHttpRequest and sends the content + fieldname + any set vars to an update file. Then this file will update the database, and reply with the newly set text and the textfield will dissapear again.