A simple feedback of AJAX for beginners

Website script holds large importance as far as popularity and usage convenience are concerned. As an innovative web language AJAX may not be very popular as it has come quite recently as compared with other web languages which have been around for last 10 years or more. For beginners a quick feedback of AJAX can be helpful.

AJAX is really faster in its application as it does not need connection to server every time you ask for the information. Call back process for required information from users is capable enough to avoid sluggishness of page view. Data updation has been made quite simple and there is no need to review the entire contents. The system can select the bits to update. AJAX uses those scripts which are normally supported by all major browsers.

If you are planning to develop a new website, you can try AJAX. Online tutorials are available to get basic start up guidelines also.

Life Cycle of AJAX

A Typical Life Cycle or Process of AJAX

Life cycle of AJAX is more similar to a traditional GUI than a traditional web application. It has DOM objects who acts like GUI widgets. The used script has capacity to register even listeners on DOM objects and respond accordingly after manipulating DOM.

There is an important part of the event-processing cycle in server is evoked sometimes. As the server calls are asynchronous, the even listening and event responding are done separately.

The normal AJAX life cycle consists of following stages:

1. The webpage is visited by internet users simply by clicking the targetted link or searching an URL. Thereafter the page gets initialised and loaded. In order to handle the user input callbacks are present in the system which acts after this.
2. When a key is pressed it’s called an event which is a query or click in common words. On such events browser sends the information request to the server which in turn responds to give back required information as bites.
3. The response of the server is translated through callback process to made viewable to the user.
4. The callback function then updates the DOM objects and javascript variables if present.
5. Generally the process of requesting information and giving callbacks are free to server to increase convenience and speed.
6. Some AJAX applications are short term and terminated once the request is completed.

AJAX: Introduction and Advantage

Basics of AJAX:

AJAX is defined or termed as Asynchronous Javascript and XML. It’s a new avtar of modern day website creation. AJAX is one of the programming techniques which has primarily made popular after 2005 by Google. No doubt about it that AJAX has set innovative and new standads of programming. AJAX has enabled webmasters create better, faster and more user-friendly web applications with its base of Javascript and HTTP.

AJAX is based on 4 web standards which are well defined and supported by all major browsers.

1. JavaScript
2. XML
3. HTML
4. CSS

Basic Advantage of AJAX

Faster Updation: If you want to update the data base of your web AJAX provides an unique feature to reduce consumption of time. Unlike other web languages where you need to update the entire data base every time you need to update the contents, however with AJAX you need to spend time only on updation of the contents which actually requires to be done so. AJAX selects the contents from the web which needs updation giving eage to the process.

Faster Response: AJAX enables faster responses to the inputs even if the changes are not done on server. The unique advantage of AJAX is its ability to reload the individual pages separately giving a user friendly benefit and users may perceive the site functioning faster.

Faster Connection: With AJAX it’s not required to connect the webpage with server every time. Some times it saves the interaction between them to increase functionality and speed. It allows webpage to request for smaller bits of information rather than asking for the entire page to load again and again which increases speed as well. AJAX is a technology related to browser which is independent of web server.

ASP.NET: Disable, Enable Validator Using Javascript

Doing this is pretty easy, if you know how or what method to use. I wanted to disable a Validator for a province TextBox if the country DropDownList chosen is USA because the state DropDownList will be enabled so the province should be inactive. Doing this server-side may be easy, but I wanted to use client-side Javascript so that no request will be sent whenever the OnChange event of the country’s DropDownList gets fired. Luckily, there is already a pre-made function in Javascript that disables Validators.

provinceValidator = document.getElementById(’ProvinceValidator’);
ValidatorEnable(provinceValidator, false);

Just set the second parameter as either true or false to enable and disable a Validator. I hope this will help those who have no clue how to go about it like I did until I found out about this function.

Regex For Creating Usernames

A regular expression (called regex) is a way for a programmer to instruct how a program should look for a specified pattern in text and then what it should do when each pattern match is found. Rather than going through each character of a string and doing matches, regex makes life easier for programmers to do search and matches. This sample regex is a good pattern for use in creating usernames.

The regex below means that only alphanumeric (only lowercase letters) are allowed including an underscore and a dot.

^[a-z0-9_.]$

ASP.NET: ValidationSummary For A CreateUserWizard Control

ASP.NET provides a control that uses the Membership API to create users on the fly via the CreateUserWizard control. The only drawback with this control is that you cannot include any other details like first name, last name, address and others. You would have to place all other details as a separate page, called a Wizard Step. When you use forms, naturally, you would have to use validation in order to have the correct data that will be stored in your database.

ASP.NET also has a nifty control called ValidationSummary that collects all errors of controls found in the tag and displays them as either a List or a Bulleted List. I typically got stuck for half a day looking for a solution because my ValidationSummary control does not display when it is in the CreateUserStep of my wizard. You can use a property called ValidationGroup to specify which set of controls will be collected by the ValidationSummary control for display. You do this by giving the ValidationGroup a name, which is case-sensitive by the way. My problem persisted because the ValidationSummary control for my CreateUserStep has a different name. I later found out that you would have to use the CreateUserWizard’s ID as the ValidationSummary’s ValidationGroup’s name for this to work. See the sample code below.

<asp:ValidationSummary runat=”server” ID=”InfoVS”
ShowSummary=”true” DisplayMode=”BulletList” ValidationGroup=”PersonalVG”
HeaderText=”Please review the following errors:”
/>
<asp:ValidationSummary runat=”server” ID=”AddUserVS”
ShowSummary=”true” DisplayMode=”BulletList” ValidationGroup=”AddUserWizard”
HeaderText=”Please review the following errors:”
/>

first name

username
password
confirm password
email

Your account has been successfully created.

I specifically added a StartNavigationTemplate tag and overrode the asp:Button and its properties because the validation does not work if you do not set the button’s CausesValidation property to true. Hence, your ValidationSummary control would show nothing since no validation took place. Notice that my ValidationSummary’s ValidationGroup is called PersonalVG. You can name it any way you want but to use the ValidationSummary’s ValidationGroup for the CreateUserStep, you would have to use the CreateUserWizard’s ID for this to work. Otherwise, no validation error messages will be displayed and you will just be stuck on the CreateUserStep page.

ASP.NET: Get Access Of Control Within A CreateUserWizard

Getting access to a control from within c# is straightforward. You just call the ID name and call the method or property that you want to use. If you are going to get access to a control from within a CreateUserWizard control and your code may look something like

you call the Label control by

Label lbl = (Label) RegisterUserWizard.CreateUserStep.ContentTemplate.label;

ASP.NET: GridView Control

One of the reasons why I’m impressed with asp.net’s rich set of controls is its GridView control. This control displays your data in a table structure complete with delete, update and select features. It even has paging in case you have lots of records in your database. The best thing about this paging is that everything is done for you, the links, the paging number, the paging labels and others. If you click a page link, it will retrieve the next set of record(s) for you without changing any SQL query. For example, you can use this SQL query to retrieve all records of the table.

select * from [table_name];

In MySQL, you would need to supply the LIMIT keyword in order to get a specific set of rows. With GridView’s paging feature enabled, everything is done for you. Neat huh. Took me like a day in getting this one to work though because I had problems with the update and delete function. Since I am using MySQL, turns out when you do parameters in your query commands, the @ sign does not work because it is only for MS SQL. You would have to change the @ to ?.

Take this sample asp.net code for a GridView control as an example. This assumes you have a working database connection to MySQL. If you do not know how to connect to a MySQL in asp.net, go here to use the custom MySQLProvider classes by Rakotomalala Andriniaina.

<asp:SqlDataSource ID=”srcUsers” runat=”server”
ProviderName=”MySql.Data.MySqlClient”
ConnectionString=”"
SelectCommand=”select pkid, username, email, creationdate from users”
DeleteCommand=”delete from users where pkid = ?pkid”
UpdateCommand=”update users set email = ?email where pkid = ?pkid”
>

<PagerSettings Mode=”NextPrevious” PreviousPageText=”" />

If you read e-books regarding asp.net, the queries used are for MS SQL. It’s been a long time since I dabbled with MS SQL, so when I read about it, I thought the @ sign for parameters were required for any database used. Took me some time to know that ? has to be used. See the DeleteCommand and UpdateCommand properties of the SqlDataSource tag.

How you design your GridView control is up to you. With styles, you can override how the table would look like. The other GridView like control that I had used before that looks like asp.net’s version is the datagrid taglib for Java. The downside with using the taglib is that if your SQL query returns lots of rows, it may not load fast and may use up resources in doing so because it gets all records at one time. Asp.net’s GridView control totally impressed me in more ways.

Email Using JavaMail

JavaMail, a technology from Java allows programmers to develop code that can send emails whether in plain text or HTML. Here’s a short easy code to send email to a recipient.

public static boolean send(String replyTo, String from_email, String to_email, String subject, String body, String type) {
boolean sent = false;
try {
Properties prop = new Properties();
prop.setProperty(”mail.smtp.localhost”, “localhost”);
prop.setProperty(”mail.smtp.port”, “25″);
Session session = Session.getDefaultInstance(prop);

Message msg = new MimeMessage(session);
msg.setSubject(subject);

InternetAddress from = new InternetAddress(from_email);
InternetAddress to = new InternetAddress(to_email);
msg.addRecipient(Message.RecipientType.TO, to);
msg.setFrom(from);

Multipart multipart = new MimeMultipart(”related”);

BodyPart htmlPart = new MimeBodyPart();
if (type.equals(”html”)) htmlPart.setContent(body, “text/html”);
else htmlPart.setContent(body, “text/plain”);

multipart.addBodyPart(htmlPart);
msg.setContent(multipart);

Transport transport = session.getTransport(”smtp”);
transport.connect(USERNAME, PASSWORD); // username, password to connect to smtp server
transport.sendMessage(msg, msg.getAllRecipients());
transport.close();

} catch (Exception e) {
System.err.println(”[MailTool] send() : ” + e.getMessage());
e.printStackTrace();
}

return sent;
}

Notice the line that says transport.connect(USERNAME, PASSWORD);

That line is optional in case you have set your SMTP server for authentication before emails are sent out by the mail server. The method also provides the option to let you send the email as plain text or HTML. Just set the value to html if you want it to be sent as HTML.

The Javascript Keyword var

I made this post to remind me that after so many years of using Javascript, I now know what the purpose of the keyword var really is for. The purpose for using the var keyword on a variable is to make it locally scoped. This means that if you use that inside a function, the variable’s scope is gone once the function is finished processing. I never noticed any difference with using a var or not simply because there never came a point in time that I would be having problems with the values of a variable. Until now. When I had problems with the values on a single variable, I was confused why. I tried to add the var keyword thinking, who knows right? And it worked! That was the time I decided to look up the purpose of the var keyword in Google and found the answer.

I laugh at myself why I discovered this until now after so many years. But hey, better late than never right? At least now I know he he he :D.