Ajaxlines Feed

Ajaxlines Feed http://www.ajaxlines.com Ajaxlines provides Asynchronous JavaScript and XML Resources, Tutorials, Websites and Toolkits. en-us Conditional Preloading Better Ajax Conditional preloading is a smart way of providing information to the user. Searching for information could be hastened when conditional preloading is activated since information is gradually made available for the user as the users key-in the data they are looking for. In order to pull this off, developers has to work with different web languages. Building an Ajax based application is a little bit challenging and conditional preloading is definitely one of those functions that could really confuse developers in no time. When properly coded, conditional preloading will ensure that the users experienced will be enhanced. On the other hand, poorly coded conditional preloading will only diminish the functions of the application. Conditional preloading works with JavaScript, CSS, PHP, Images and other web languages. Everything will be on play during the conditional preloading and their functions will be fully realized when the application has been successfully rendered. As we have already indicated, combining these web languages is definitely a challenge for developers but the trick actually is to compress the functions. This will enable the languages to work hand in hand without compromising the function. Some will say that compressing web languages will diminish the function of the application. But this is not the case in conditional preloading. Although preloading requires a good number of web languages, it does nOt require a lot of coding to ensure for that this function to work properly. Aside from the web languages in conditional preloading, the location of the function should also be considered. Developers have to ensure that the application has the power to support conditional preloading. Ideally, this function has to be placed at the start of the application since it is usually used for search engines of the online application. But there are other online applications that requires conditional preloading to be at the middle of the application. To ensure that the conditional preloading will work even though the rest of the functions are already loaded, developers have to use “search caching”. Think of it as an interactive CSS – with the help of JavaScript the information is loaded as the user encodes the information needed. CSS on the other hand will stream the information. This function will eventually be wrapped with the web language used by the developer such as HTML or PHP. The challenge for developers is to ensure that conditional preloading works successfully even though bandwidth is already exhausted in other functions. To solve this problem, developers have to separate the online application to the conditional preloading in terms of caching. For the online application, developers could point the cached data to the user while the conditional preloading will be loaded from the server. When the data is cached in the server, there is more space and the data could be asynchronously streamed from the server. More often than not, server caching will ensure that the online application will work as planned. source: <a href="http://www.ajaxwith.com">ajaxwith</a> http://www.ajaxlines.com/ajax/stuff/article/conditional_preloading_better_ajax.php Mon, 07 Jul 2008 8:07:37 EDT http://www.ajaxlines.com/ajax/stuff/article/conditional_preloading_better_ajax.php A lightweight AJAX.NET-enabled grid control Managing lists of items from databases is the bread and butter of most web applications, but creating an user-friendly grid can be problematic. The obvious solution of creating Microsoft grid controls in an Ajax.Net Update panel can create very large HTML pages with long response times when a substantial amount of data is being worked with. Also, every grid has to be created individually on each page, and that makes it hard to create and maintain a common "look and feel". This lightweight grid outputs very compact HTML and uses javascript to dynamically generate input or select boxes when updating. It includes built-in Ajaxed sorting and filtering which is very user-friendly, and throws in csv export for free. It has a fixed table header and scrolling contents, to facilitate use with large amounts of data. Many different grids can be very quickly generated in a standard way using an XML control file and a single common style sheet. Multiple AjaxGrids can be defined and used, even on the same page. You can customise grid column data to include links, images, etc and to support your own custom validations. <img width="1025" height="386" alt="" src="/ajax/images/uploaded/1215348398.png " /> Background Most developers will dip their toes into the seductive water of Ajax.Net by using the Update panel, but calling Ajax methods directly can be much more flexible and efficient. Any HTML element that is updated server-side by ASP.NET code must contain a long and "decorated" id, and these are used extensively in a typical grid and update panel. But if you generate your HTML directly then you can rely on Javascript to walk through the DOM to assign events to the element, to pop up HTML elements dynamically for the user to edit into on request and to identify any element that has changed. AJAX allows you to do most of the heavy lifting server-side, so that you don find yourself attempting to write an entire application in Javascript (a real performance "gotcha"). Because the HTML is so much more compact, there is much less data to transfer. Large numbers of rows can be returned efficiently to users. This implementation includes a way of side-stepping paging in most cases and under user control, even for large amounts of data. With the fixed grid header and scrolling data section, the user is scrolling experience can really take advantage of the smooth scrolling and background updating which browsers are optimised for. This approach is especially kind to your dial-up browsers. This control remembers the user is preferences for each grid during the session, and can be set up to remember them between sessions too. Thanks to AJAX.NET the user is data in the browser can also be always available server-side; you could extend the control to remember all the data that the user enters (even on a keystroke-by-keystroke basis), and even allow switching off the browser mid-session and resume working later at the same point - just as if it was a local application. Naive users especially will appreciate the security of not losing entered data by mistake. Using the Code The source files are set up as a complete ASP.NET 2.0 website. This code uses two tables of a database set up by the open source "Tackle" application for management of the SCRUM process, which itself uses AJAX.NET using an Update panel. It is an interesting comparison. You can download it from here. (I have also included a minimal database .mdf file for a sample database, if you don want to bother with this). You will need to edit the connection string in AjaxGrid.db.cs. It assumes SQLExpress implementation of the database. Your own implementation of this control will almost certainly include an edited stylesheet to match your own application branding (you might like to improve the graphics too!). Lastly, you will want to edit ajaxgrid.xml to define and format each grid in your web application. The source files This control doesn work well as a completely stand-alone assembly, because you need to include its .css and .js files and ajaxgrid.xml in the containing website. You will probably also want to adapt the core source files to the needs of your web application. Default.aspx and app.css are dummies for your own target web application. Default.aspx.cs shows how to serialise and deserialise "profile" data and how to register custom validation and postback methods for each page. ajaxgrid.xml specifies the language-specific texts and the format and contents of each grid. Each grid is named, and the SQL table, primary key and basic query string are defined. Each column of the grid is then defined, to include the data type, the displayable header and SQL column name. Where a column is restricted in the available options, a static or database-generated list can be specified. You can define as many grids as you like and they will all look and act the same. This file is loaded into static arrays when the web application loads to ensure efficient access at runtime. web.config shows how to set up the Ajax.Net subsystem to use web services in JSON format for Ajax. AjaxGrid.Webservices.cs contain the actual Ajax methods called by Javascript. AjaxGrid.db.cs implements database access for the grids. Any production web application should implement MultipleActiveResultSets, defend against SQL injection and implement asynchronous I/O, so this control does all this. However asynchronous I/O is a problem for AJAX.NET because there is currently no async handler for JSON available and Ajax callbacks are still restricted to synchronous I/O only. Don confuse asynchronous Ajax calls from the client (no problem) with asynchronous handling of the server requests (required for efficient use of server threads). There is a discussion of this here. AjaxGrid.main.cs is the core code for this control. It contains methods to paint or repaint the control, or just the data part of the control, by generating HTML as a string. The HTML can be used to populate the control server-side (inital rendering of page or postback) or client-side (in response to an Ajax call). Each row can contain many cells of different types (as defined by the XML control file), and there is scope for creating new methods for handling other data types - such as data, currency or images. AjaxGrid.js is the supporting javascript for the control. It shows how to use javascript to walk through the table cells and their contents, and how to position pop up edit controls to overlay the grid cells. AjaxGrid.css is the supporting stylesheet for the control. By including this stylesheet as a separate file, the control dramatically reduces the style information that needs to be included in each page. AjaxGrid.ascx/AjaxGrid.ascx.cs is the actual control. It is of interest for showing how an asynchronous IO operation is launched from an ASP.NET page. What the code does The server "manually" generates a string containing HTML using a StringBuilder object. The HTML can then be used to populate the control server-side in C#:            divGrid.InnerHtml = AjaxGrid.Paint(Session["GridProfile"], gridId); or to populate the control client-side from an AJAX callback in javascript:            divGrid.innerHTML =  response.html; <img width="764" height="573" alt="" src="/ajax/images/uploaded/1215348427.png" /> When the "add new row" image is clicked, an extra row is added to the header table. This allows the user to see and edit the new row wherever the data table is scrolled to; once the columns have been filled in and the new row is accepted, the tables will automatically be repainted and the new row will then appear in the dat table in its proper sort order. Points of Interest This control illustrates an interesting technique for making texts set up by javascript language-independent, by calling back to the server via AJAX. In many cases, the same thing can be accomplished by customising the javascript file to each individual user, but calling back to the server on demand reduces the amount of unnecessary data sent to the browser and can be easier to maintain. An AJAX application will present differently on your local machine (where there is little latency) and on the internet. Although the application correctly handles multiple outstanding AJAX calls, it can be helpful to the user to show an animated GIF file while an AJAX response is outstanding. There are no definite rules about whether to initiate an Ajax call on every keypress or when the "onchange" event handler fires (except beware if some other javascript event click handler is called by (say) clicking a button, you may lose notification of the onchange operation). Where a new row is to be created, all columns must be default or filled in before creating a new row in the database and it is necessary to have a button to indicate that the row is now ready to be created. Nevertheless it is convenient to AJAX each column up to the server as it is completed. One possible implementation of updates from the grid is to save them up in the user is Session data and only actually action the updates when the user explicitly requests with a "Save" command. This mimics many desktop applications in allowing the user to see how the updates look before committing them to the database. There are implications to this if multiple users can see the same data, especially if the saved updates are stored between Sessions. But even without these refinements, there is always going to be a window between the user reading and writing row data. Using database locks (possibly supplemented by Sql Server notifications when row data changes) are complex to implement and may significantly impact performance. A lightweight solution is to record when and who the data was last changed by and notify the user if that differs from when the row data was read. In many cases users can be quite tolerant of being told that they must repeat the edit and update because in the real world it is often an error if two people mistakenly work on the same task at the same time. In the following SQL snippet from a stored procedure to update a row, contention is detected before the update is actioned and the update is abandoned if someone else has editted the row since the original data was read.     -- @editdate DATETIME parameter is the date that the record was last edited (remembered from read)     -- @userid INT parameter is the caller is id     -- @newdate DATETIME OUT parameter is the new date that the record was last edited (or null if not updated)     -- @editid INT OUT parameter is the person who made that last edit     -- each table so protected needs two new columns:     -- editdate DATETIME is the date last edited     -- updaterId INT is the person who last updated the record     IF @editdate IS NOT NULL     BEGIN         SELECT @editid = updaterId FROM [table]             WHERE rowid=@rowid AND editdate <= @editdate         IF @editid IS NOT NULL AND @editid <> @userid         BEGIN             SELECT @newdate =NULL             RETURN         END     END     SELECT @newdate = GETDATE()     SELECT @editid = @userid By the way, if the last editer was the caller, then that is considered ok. It is possible that the user has created problems for themselves by working from two different machines or two different browsers, but most likely they will be quite annoyed if the website prevents them updating their own edits. You could also change the AJAX callback when each cell is updated to include both the new and original values (the original value is still present despite being overlayed by the edit popup). This allows a more fine-grained approach where the update is refused only if a particular column of the row has been changed by someone else, rather than the entire record. One major source of difficulty in a web application is management of postbacks and random use of the back button. This is much less of a problem for Ajax-enabled applications, because the user cannot initiate the same operation twice by refreshing while waiting a response and the back button will take the user right out of the current page. If you have a button which mustn be pushed twice, add some custom javascript to disable it when pressed. source: <a href="http://www.codeproject.com">codeproject</a> http://www.ajaxlines.com/ajax/stuff/article/a_lightweight_ajaxnetenabled_grid_control.php Sun, 06 Jul 2008 8:51:48 EDT http://www.ajaxlines.com/ajax/stuff/article/a_lightweight_ajaxnetenabled_grid_control.php 25 Excellent Ajax Techniques and Examples Ajax allows for rich-internet applications that mimic the responsiveness and complex user interfaces typically associated with desktop applications. Moving applications to the web browser opens many possibilities, including the ability to save user data, connecting with other users for collaboration and sharing, and making deployment and using the application easier since web browsers are standard-issue with most computers regardless of operating system. If you’re interested in expanding your understanding of Ajax techniques and practices, check out these 25 hand-picked Ajax articles and tutorials that outline various methods and concepts involved in the development of Ajax-based applications. Though most are geared for budding and intermediate developers, veterans might find a trick or two they haven’t encountered before. 1. Ajax RSS reader Ajax RSS reader - Screenshot Build a simple RSS reader that takes remote XML data from RSS feeds using Ajax, PHP, and MySQL. This example allows users to view feed content from multiple sources in one page. At the bottom of the article, you’ll find an animated demonstration of the RSS reader. 2. Ajax Desktop Tutorial Ajax Desktop Tutorial - Screenshot This tutorial is a step-by-step guide on how to create a desktop/homepage similar to Pageflake and Netvibes. The goal of this tutorial is to showcase some common techiques involved in developing web-based applications like manipulating the Document Object Model (DOM), listening to events (i.e. certain mouse movements), and working with remote data.     * Ajax Desktop demo 3. Ajax for Chat Learn to build a simple web-based chat client using asynchronous JavaScript, XML, and PHP. The tutorial’s example utilizes the Prototype JS framework, MySQL, and PHP. 4. Create your own information space with Ajax and del.icio.us This article outlines the basic foundations of using Ajax alongside an API service. It uses the del.icio.us API, but the methods and concepts can be adapted to other popular services such as Digg’s or Flickr’s. It’s an essential resource for those contemplating on creating web applications that use remote XML data - a couple of live examples are popurls and SocialBlade, which obtains information from social media sites using available API services. This tutorial requires you to register (for free). 5. Ultra-lightweight Charts For AJAX <img src="/ajax/images/uploaded/1215346388.gif " alt="" /> See how to create a super-lightweight (1.78 KB) charting component using Flash with Ajax. The example allows you to generate visual graphs using dynamically-loaded data. The solution involves ActionScript-JavaScript communication, and covers the use of the setData and setStyle ActionScript methods for generating and styling the charts. 6. Quick Calendar Using AJAX and PHP <img src="/ajax/images/uploaded/1215346436.gif" alt="" /> Learn how to create a calendar component using Ajax and PHP. Ajax is used for navigating through the calendar months without refreshing the page.     * Quick Calendar demo 7. How to integrate Google Calendar in your website using AJAX <img src="/ajax/images/uploaded/1215346497.gif " alt="" /> This tutorial shows you how to create a web page component that calls a publicly available Google calendar. Google Calendar allows you to easily create, share, and manage events and is an excellent feature for community websites.     * AJAX calendar demo 8. Edit In Place with AJAX Using jQuery <img src="/ajax/images/uploaded/1215346519.gif" alt="" /> In this example, users are given the ability to edit the XHTML of the web page they’re currently viewing. The example is a proof-of-concept – presenting how this functionality can be achieved using jQuery. Normally, you’d want to send the user’s edits to server-side code to perform processes such as validation or saving the changes in a database.     * Edit In Place demo 1     * Edit In Place demo 2 9. Creating an AJAX Rating Widget <img src="/ajax/images/uploaded/1215346546.gif" alt="" /> Learn the concepts of creating a rating system without prompting the user to click a submit button or refreshing the page. The tutorial showcases how you can do this in a variety of ways by including examples for the following four JavaScript frameworks/libraries: Dojo, jQuery, mootools, and Prototype JS. 10. AJAX file upload tutorial <img src="/ajax/images/uploaded/1215346571.gif " alt="" /> In this tutorial, you’re shown how to create a file uploader. The tutorial uses JavaScript and PHP.     * AJAX File Uploader demo 11. Use AJAX and PHP to Build your Mailing List This tutorial from SitePoint walks you through the development of a mailing list form that accepts submissions asynchronously. It uses MySQL for storing the data inputted by the user and Prototype JS for simplifying Ajax requests and binding event handlers. 12. Safer Contact Forms Without CAPTCHAs <img src="/ajax/images/uploaded/1215346609.jpg" alt="" /> One way to reduce spam from public web forms is to implement a system to verify if the submitter is human by using image CAPTCHAs. Problems arise with accessibility when individuals using visual assistive technologies are presented with the test (and thus cannot continue on). This simple technique uses an Ajax call to a server-side script to drop a cookie on the user’s computer.     * Safer Form demo 13. Using AJAX with CAPTCHA <img src="/ajax/images/uploaded/1215346647.jpg" alt="" /> Avoiding the use of image-based CAPTCHAs is a good idea. With that said, many sites still prefer using this technique to distinguish between humans and computers. If forgoing web accessibility is appropriate for your situation, this article outlines a unique method for administering CAPTCHA tests. The user is presented with a sequence of descriptions (i.e. Animal, Costume, Boy), and asked to click on a set of images in sequential order. The clicks are recorded and validated, returning the appropriate status message. Though probably not an ideal solution to CAPTCHAs, it does outline a fundamental technique for developing responsive user interfaces - use it for inspiration. 14. Ajax-based login form <img src="/ajax/images/uploaded/1215346676.gif " alt="" /> Create a basic login form that asynchronously validates the inputted data. The example uses the jQuery form plugin and PHP to process the request.     * Ajax-based login form demo 15. Nice Ajax effect for message box using Mootools <img src="/ajax/images/uploaded/1215346706.gif " alt="" /> In this example, a message box that fades after a specified duration is displayed when the user clicks on the “save” button. This is a model for supplying users with the status of their request, and an real Ajax request should typically happen when the user clicks on the “save” button.     * Nice Ajax Effects for messages box demo 16. AutoCompleter Tutorial <img src="/ajax/images/uploaded/1215346732.gif " alt="" /> The AutoCompleter tutorial teaches you how auto completion of input fields can be accomplished. The example uses jQuery, PHP, and MySQL.     * AutoCompleter tutorial demo 17. Auto-populating Select Boxes using jQuery & AJAX <img src="/ajax/images/uploaded/1215346763.gif " alt="" /> A key technique in Ajax applications is to populate content without a page refresh. In this tutorial, you’ll witness how this is done with a PHP and JavaScript (jQuery to make it easier).     * Auto-populating Select Boxes demo 18. Build an Ajax Dropdown Menu Here’s a basic example of working with external data to load content into a drop-down menu - from our beloved Webmonkey. Though the example uses a text file, you can use your own data source when applying the technique to your own purposes.     * Ajax Dropdown Menu demo 19. Ajax/PHP Shoutbox Tutorial <img src="/ajax/images/uploaded/1215346794.gif " alt="" /> Make an Ajax-powered shoutbox using PHP and JavaScript. This tutorial walks you through the server-side and client-side requirements of creating a shoutbox, which can be adapted to other functions such as a commenting system.     * AJAX Shoutbox demo 20. Building Tabbed Content <img src="/ajax/images/uploaded/1215346816.gif " alt="" /> Learn how to build a tabbed content component with the data populated via Ajax. The tutorial uses PHP and Prototype JS.     * Building Tabbed Content demo 21. How to Load In and Animate Content with jQuery <img src="/ajax/images/uploaded/1215346840.jpg " alt="" /> This step-by-step tutorial shows you how to load data into a web page using jQuery to handle the Ajax request and manipulation of the DOM.     * Load In and Animate Content demo Best practices and workaround techniques to common issues 22. The Hows and Whys of Degradable Ajax <img src="/ajax/images/uploaded/1215346862.gif " alt="" /> This article discusses the concept of creating Ajax-based applications that degrades effectively when JavaScript is not detected, providing increased accessibility and bulletproof-ness. Completely successful degradation means that an application is still usable and information is still accessible without reliance to JavaScript or CSS.     * Degradable Ajax demo 23. Avoid unnecessary Ajax traffic with session state This article presents a method for minimizing unneeded database/computational processes and avoiding large status updates if no changes have occurred. By using client cookies to keep track of the session’s state, you can cut down on processes that may be redundant. Though the article presents an example using Python for server code – the model remains the same in virtually any language you use. 24. A Better Ajax Back Button Solution Here’s a workaround to issues pertaining to Ajax-loaded content breaking web browser controls and bookmarking capabilities. The solution involves firing off a function at a set interval that checks the #value of the URL, and then presenting the correct content. It restores the ability to bookmark the content. In Part 2 of the article, you’ll see a working example and additional discussion of this method.     * A Better Ajax Back Button demo 25. Making Ajax Work with Screen Readers <img src="/ajax/images/uploaded/1215346892.gif " alt="" /> One of the biggest drawbacks of loading content via Ajax is that it fails to indicate an update of the content to users who are reliant on screen readers. For people who are not visually-impaired – messages and status indicators can be visual queues that the content is changing; this isn’t effective for users with visual impairments. This article draws out the underlying issues and proposes techniques to make Ajax-based applications work with screen readers. There we have it… some brilliant Ajax techniques and examples. I hope you’ve found some links of interest that will help you in a future project or in advancing your command of Ajax. source: <a href="http://www.3car.blogspot.com">3car.blogspot</a> http://www.ajaxlines.com/ajax/stuff/article/_excellent_ajax_techniques_and_examples.php Sun, 06 Jul 2008 8:09:14 EDT http://www.ajaxlines.com/ajax/stuff/article/_excellent_ajax_techniques_and_examples.php ASP.NET MVC & Threads I have a method that handles sending of emails.  I wrote it so that it would run asynchronously, so that it won’t slow down the web app.  It looks like this: protected static void SendMail(string to, string subject, string body) {     try     {         using (var bgw = new BackgroundWorker())         {             bgw.DoWork += new DoWorkEventHandler(delegate                                                      {                                                          try                                                          {                                                              Thread.Sleep(15000);                                                              using (MailMessage message = new MailMessage())                                                              {                                                                  message.From = new MailAddress(AdminEmail,                                                                                                 AdminName);                                                                  message.To.Add(new MailAddress(to));                                                                  message.Subject = subject;                                                                  message.Body = body;                                                                  message.IsBodyHtml = false;                                                                  SmtpClient mailClient = new SmtpClient();                                                                  mailClient.Send(message);                                                              }                                                          }                                                          catch (Exception ex)                                                          {                                                              Utils.Log(ex);                                                          }                                                      });             bgw.RunWorkerAsync();         }     }     catch (Exception ex)     {         Utils.Log(ex);     } } I added the Thread.Sleep(15000) to see if it works.  To my surprise, it didn’t.  For some reason, the web request doesn’t return until the email thread is done executing.  When I step through the code, it runs through the code right away without waiting and calls the return method on the controller as expected.  But the response is actually never sent to the server until the thread completes - which defies the whole point of it being asynchronous. What am I doing wrong?  Is this a bug in the MVC framework?  Or did I just overlook something? [UPDATE] I am not sure what’s wrong with the code above but I re-wrote it as show below and it works very well. protected static void SendMail(string to, string subject, string body) {    try    {        var t1 = new Thread(SendMailAsync);        t1.Start(new string[] {to, subject, body});    }    catch (Exception ex)    {        Utils.Log(ex);    } } private static void SendMailAsync(object emailInfo) {    try    {        var paramArray = emailInfo as string[];        if (paramArray != null)        {            var to = paramArray[0];            var subject = paramArray[1];            var body = paramArray[2];            using (MailMessage message = new MailMessage())            {                message.From = new MailAddress(AdminEmail,                                               AdminName);                message.To.Add(new MailAddress(to));                message.Subject = subject;                message.Body = body;                message.IsBodyHtml = false;                var mailClient = new SmtpClient();                mailClient.Send(message);            }        }    }    catch (Exception ex)    {        Utils.Log(ex);    } } source: <a href="http://www.emadibrahim.com">emadibrahim</a> http://www.ajaxlines.com/ajax/stuff/article/aspnet_mvc__threads.php Thu, 03 Jul 2008 5:51:45 EDT http://www.ajaxlines.com/ajax/stuff/article/aspnet_mvc__threads.php How to add Google Maps to your website A picture is worth a thousand words is a proverb that refers to the idea that a picture can explain a complex situation in more meaningful way than 1000 or more words. You can see more details on this proverb by following the above link but we are here talking about slightly different topic. A map is worth telling 1000 ways to reach certain place. I guess 1000 doesn match with this proverb which i just created  but map really gives you clear picture and location of your destination. It is very good practice to provide map of the place on your website if you want to let people know about your contacts and want that they should visit your location or office. Earlier maps on websites used to be static and you could not interact with maps to zoom and explore different directions etc. But now in the Era of Ajax and Google Maps and other similar websites, it is very much possible to use map information for common use. Other than visiting these maps related websites you can also embed the related map of related place in your website. <img width="446" height="274" alt="" src="/ajax/images/uploaded/1215069474.png" /> In starting, it was slightly tricky to embed Google maps in your website and you needed an application key for that which introduce another step towards including maps in your website but now it is probably easier than writing an email. 1. Go to maps.google.com 2. Search for the location 3. Once you think that final location is in middle of map with appropriate zoom level, click on Link to this Page on right top of map. 4. It will open a small window there which will give you two things:     * Link to this map for sending it over email or IM     * HTML to paste in your website. 5. Copy and paste this HTML in your website and That is it. <img width="515" height="455" src="/ajax/images/uploaded/1215070412.png " alt="" /> You can further customize by clicking Customize and Preview embedded Map and it will let you choose the size of map according to your need or space requirements on your website and then you can copy and paste HTML in Text area below the preview. See How it will look like: <img width="508" height="345" src="/ajax/images/uploaded/1215070447.jpg" alt="" /> source: <a href="http://www.techiegyan.com">techiegyan</a> http://www.ajaxlines.com/ajax/stuff/article/how_to_add_google_maps_to_your_website.php Thu, 03 Jul 2008 3:17:11 EDT http://www.ajaxlines.com/ajax/stuff/article/how_to_add_google_maps_to_your_website.php Speeding Up Post Load Script Post-load script maybe one of the most challenging tasks for developers especially those that use a framework for building an Ajax application. In a framework setting, developers will always work in a setting wherein JavaScript is involved. When post load happens, developers will be limited in their functions since the functions may need to run without the help of JavaScript. Without the proper coding, developers might slow down the process instead of speeding them up since asynchronous streaming of information is not there because JavaScript is not used. Some usually see this as a disadvantage but if you know where to post load script, you may be able to use its delay to your advantage. An Ajax application, although asynchronous, does not have to relay all information at once. They still have to function like a website wherein some things have to be delayed a little bit so that it could make way for more important functions. Because it does not use JavaScript, it might not be asynchronous but it will be used in a better way such as loading additional functions that does not have to be loaded from the server. Before doing that, developers have to ensure the actual use of the function so that they do not have to rearrange the function again. Post load script should be used when all things have been loaded. If this is the first function that should be used, then it should never be the post load script in the first place. Post load script should bring the information needed when everything else are in place. Post load script does not even need time related function to ensure it is loaded when everything else are in place. All the developers have to do is to place the script right after the function so that the browser will naturally execute the function located on top of the post load script. Any post load script could be used in the application which means it is not even a requirement that the post load script and the actual function are related. The post load script could be used as a tool for transitioning from one function to another or the post load script could be used as a complement for the function. Aside from the location of the coding, the source of the script should be reliable enough for developers to efficiently build the application. The only challenge in post load scripting is to ensure that the script will be loaded on time. Post load script could come from the server or it could come from an outside source. When it the post load script comes from the server, there is no problem but when it is loaded from the outside source, developers have to make sure that the outside source is reliable when the function is needed.  If it does not load on time then the post load script could be the cause of the Ajax application to slow down but when the post load script has a reliable source, the application will be faster than regularly coded Ajax application. source: <a href="http://www.ajaxwith.com">ajaxwith</a> http://www.ajaxlines.com/ajax/stuff/article/speeding_up_post_load_script.php Wed, 02 Jul 2008 7:45:10 EDT http://www.ajaxlines.com/ajax/stuff/article/speeding_up_post_load_script.php Simple AJAX Methodology What is AJAX? Well you can see what is it stand for behind the word to the left image shown. But - for those who just heard AJAX acronym - what does it like? What does it purposed to? Many of AJAX online documentation you can pointed to and learned, but anyway, this official wiki page is a good start. As personally for me, AJAX give many useful things in a web programming. Generally, it can eliminated some limitations you will face in a pure HTML page. And somehow, it can make website more attractive & increasing interactivity. Moreover, this blog article would like describe out about a simple AJAX implementation, especially just for beginner programmer like me ;-). AJAX technology is not a latest one in World Wide Web but it’s almost new to me. I’m not an expert but this is my first experience to AJAX and I’d like to share about it to you. Think about a job but you have to force finished it only with one tool. And this was happened to me when I had to create a web chat module written in PHP. Basically, a common rule acceptable chat application is that it has capability to refresh the display automatically when everyone leave a message, for example: Yahoo Messenger or IRC. In a regular HTML page (web based application), you can use a META tag but it will refresh the whole page in a specified time. Look at an example below:     <meta equiv="refresh" content="5;URL=chat.php"> The lack is, the message you type in a input box will lost when the time achieved (5 second to get the page refreshed automatically – chat.php). Give it 60 second and you will get an unreliable chat application since there are long duration time to rendering a new screen. The point is, you will never have a good chat application with above technique. But the mighty AJAX can. How? First of all, take a subject to the database side. This will hold the whole messages from users. Create a table contains 2 row in MySQL just like below script. (database name: chat)     # MySQL-Front Dump 2.5     #     # Host: xxx Database: chat     # --------------------------------------------------------     # Server version 4.1.11     USE chat;     #     # Table structure for table chat     #     DROP TABLE IF EXISTS chat;     CREATE TABLE chat (     pesan text,     time time NOT NULL default 0:00:00     ) ENGINE=MyISAM DEFAULT CHARSET=latin1; This is a simple table, you can rearrange it to your needs later. Anyway, look at the picture below and this what’s looks like with MySQLFront <img src="/ajax/images/uploaded/1214997169.jpg " alt="" /> Finally, I remade & simplify the chat AJAX script until it contain only 2 files; the chat library (chat.lib.php) & the form page (index.php). <img src="/ajax/images/uploaded/1214997200.jpg " alt="" /> Take a look at complete chat.lib.php class below:     <?php     class chat     {     var $host="your_db_host_server";     var $user="your_db_user";     var $db="chat";     var $pass="your_db_password";     function connect_easy($query)     {     $b = array();     if(!$connect = mysql_connect($this->host,$this->user,$this->pass));     if(!$dbr = mysql_select_db($this->db));     if(!($result = mysql_query($query)));     @$num = mysql_num_rows($result);     @$num2 = mysql_num_fields($result);     for($x=0;$x<$num;$x++)     {     $a = mysql_fetch_array($result);     for($i=0;$i<$num2;$i++)     {     $b[$x][$i] = html_entity_decode($a[$i]);     }     }     return $b;     }     function show($a)     {     if(count($a)>0)     {     $a=array_reverse($a);     if(count($a)<9)     $end=count($a);     else     $end=9;     for($i=0;$i<$end;$i++)     {     echo "".$a[$i][1].": ".$a[$i][0]." ";     }     }     }     } All you need to do is change the variable of $host, $user and $pass and make an appropriate with your existing database server. Globally, this class has 2 function; the connection query & retrieval argument. Next, copy below script as form page and rename it as index.php.     <?     session_start();     require_once("chat.lib.php");     $action=$_GET["action"];     switch ($action)     {     case arefresh : $refresh = new chat();     $query="select * from chat";     $a=$refresh->connect_easy($query);     $refresh->show($a);     exit;     break;     case isubmit: $submit = new chat();     $query="insert into chat values (".$_GET["chat"].",NOW())"; $submit->connect_easy($query);     exit;     break;     }     ?>     <html>     <head>     <title>AJAX Chat</title>     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">     <script language="JavaScript">     function ajaxConstructor()     {     var request_;     var browser = navigator.appName;     if(browser == "Microsoft Internet Explorer")     {     request_ = new ActiveXObject("Microsoft.XMLHTTP");     }     else     {     request_ = new XMLHttpRequest();     }     return request_;     }     var http = new Array();     var http2 = new Array();     function getRefresh()     {     var curDateTime = new Date();     http[curDateTime] = ajaxConstructor();     http[curDateTime].open(get, index.php?action=refresh);     http[curDateTime].onreadystatechange = function()     {     if (http[curDateTime].readyState == 4)     {     if (http[curDateTime].status == 200 || http[curDateTime].status == 304)     {     var response = http[curDateTime].responseText;     document.getElementById(ajax_chat).innerHTML = response;     }     }     }     http[curDateTime].send(null);     }     function getSubmit()     {     var curDateTime = new Date();     http2[curDateTime] = ajaxConstructor();     http2[curDateTime].open(get, index.php?action=submit&chat= + document.ajax.chat.value);     http2[curDateTime].send(null);     }     function kirim()     {     getSubmit();     document.ajax.chat.value=" ";     }     function refreshLayar()     {     getRefresh();     window.setTimeout("refreshLayar()", 2000);     }     </script>     </head>     <body onLoad="refreshLayar()">     <div id="ajax_chat" style="overflow=auto; width: 375px; height: 200px; border: 1px;" align="left"></div>     <form action="JavaScript: kirim()" method="get" name="ajax">     Tulis Pesan:     <input name="chat" type="text">     <input type="button" value="Kirim" onClick="kirim()">     </form>     </body>     </html> All the both files must stay in the same path of a web server and make sure that you have a valid parameter database connection described earlier in chat.lib.php. Take a test and call the index page from any browser available from client. <img src="/ajax/images/uploaded/1214997243.jpg " alt="" /> That’s it & you’re done. The explanation of index page is very much simple. It contains some of core chat functions in JavaScript; the AJAX constructor, refreshing display, submit message & auto render screen in 2 second!. Got it? Well, class dismissed & hope this lesson benefit to us. source: <a href="http://www.paparadit.blogspot.com">paparadit.blogspot</a> http://www.ajaxlines.com/ajax/stuff/article/simple_ajax_methodology.php Wed, 02 Jul 2008 7:22:55 EDT http://www.ajaxlines.com/ajax/stuff/article/simple_ajax_methodology.php Javascript Ajax Class A JavaScript Ajax class for client / server communication. The Ajax request objects are stored in an array so that its possible for multiple requests to be running simultaneously. view plaincopy to clipboardprint?    1.       /*    2.         _________    3.        |  INFO   |__________________________________________________________________    4.        |                                                                            |    5.        | ajax.js                                                                    |    6.        | Version 1.0.1 - 03/09/2007                                                 |    7.        | Copyright 2007 Karl Payne                                                  |    8.        |____________________________________________________________________________|    9.         _________________   10.        | RELEASE HISTORY |__________________________________________________________   11.        |                                                                            |   12.        | * v1.01 20-07-07 Chaged repsone type for plain text from responseXML to    |   13.        |   responseText                                                             |   14.        | * v1.00 17-07-07 Initial public development release                        |   15.        |____________________________________________________________________________|   16.         _________   17.        | LICENSE |__________________________________________________________________   18.        |                                                                            |   19.        | This program is free software; you can redistribute it and/or modify       |   20.        | it under the terms of the GNU General Public License as published by       |   21.        | the Free Software Foundation; either version 3 of the License, or          |   22.        | (at your option) any later version.                                        |   23.        |                                                                            |   24.        | This program is distributed in the hope that it will be useful,            |   25.        | but WITHOUT ANY WARRANTY; without even the implied warranty of             |   26.        | MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the              |   27.        | GNU General Public License for more details.                               |   28.        |                                                                            |   29.        | You should have received a copy of the GNU General Public License          |   30.        | along with this program.  If not, see <http://www.gnu.org/licenses/>       |   31.        |____________________________________________________________________________|   32.         _________   33.        | CREDIT  |__________________________________________________________________   34.        |                                                                            |   35.        | This program wouldn have been possible without the following resources   |   36.        | http://www.drakware.com/?d=2006-08                                         |   37.        | http://javascript.about.com/library/blajax08.htm                           |   38.        | http://www.wrox.com - for most of the other stuff                          |   39.        |____________________________________________________________________________|   40.       */   41.          42.       /////////////////////////////////////////////////////////////////////////////////////////////////////////////   43.          44.       // determine whether its possible to use the XML HTTP request object (Mozilla et all first then IE)   45.       // typeof XMLHttpRequest returns function, instead of "object" as suggested by wrox.com   46.       var bXmlHttpSupport = (typeof XMLHttpRequest != "undefined" || window.ActiveXObject);   47.          48.       // builds a paramater string for use in a post request   49.       function addPostParam(sParams, sParamName, sParamValue) {   50.           // check if the current paramater string is longer than 0 chars (2 would be the min surely? a=)   51.           if (sParams.length > 0) {   52.               sParams += "&";   53.           }   54.           // url encode both the paramater and the variable   55.           return sParams + encodeURIComponent(sParamName) + "="  + encodeURIComponent(sParamValue);   56.       }   57.          58.       // adds a variable to a url string and returns it   59.       function addURLParam(sURL, sParamName, sParamValue) {   60.           // if there is already variables in the url add an & otherwise start the query string off with a ?   61.           sURL += (sURL.indexOf("?") == -1 ? "?" : "&");   62.           // url encode both the paramater and the variable   63.           sURL += encodeURIComponent(sParamName) + "=" + encodeURIComponent(sParamValue);   64.           return sURL;   65.       }   66.          67.       // allows us to use the same object name (as IE) in all supporting browsers XMLHttpRequest   68.       if (typeof XMLHttpRequest == "undefined" && window.ActiveXObject) {   69.           function XMLHttpRequest() {   70.               // an array of different versions in reverse order, so we try the latest version first   71.               var arrSignatures = ["MSXML2.XMLHTTP.5.0", "MSXML2.XMLHTTP.4.0",   72.                                    "MSXML2.XMLHTTP.3.0", "MSXML2.XMLHTTP",   73.                                    "Microsoft.XMLHTTP"];   74.               // loop through the array of versions   75.               for (var i=0; i < arrSignatures.length; i++) {   76.                   try {   77.                       // try and create an object using the current name   78.                       var oRequest = new ActiveXObject(arrSignatures[i]);   79.                       return oRequest;   80.                   } catch (oError) {   81.                       //ignore   82.                   }   83.               }   84.               throw new Error("MSXML is not installed on your system.");   85.           }   86.       }   87.          88.       // stores a global array of request objects   89.       var aRequests = new Array();    90.          91.       // creates an array of objects so multiple ajax calls can be made simultaneously, each using their own object   92.       function AJAX_Broker(lockStatus) {   93.           // if = 1 locks the object so only the correct object is requests can access it   94.           this.locked = lockStatus;   95.           // no need to check the browser capabilities here   96.           // this function is only called if it works   97.           this.oRequest = new XMLHttpRequest();   98.       }    99.         100.       function AJAX_get(sURL, fnCallback) {  101.           // check if the broweser supports XMLHttp  102.           if (bXmlHttpSupport) {  103.               var pos = -1;  104.               // search the array for an unlocked object  105.               for (var i=0; i<aRequests.length; i++) {  106.                   if (aRequests[i].locked == 1) {  107.                       pos = i;  108.                       break;  109.                   }  110.               }  111.               // if we couldnt find a spare one  112.               if (pos == -1) {  113.                   // create a new one, passing in the unlock code = 1  114.                   pos = aRequests.length;  115.                   aRequests[pos] = new AJAX_Broker(1);  116.               }  117.               if (aRequests[pos].oRequest) {  118.                   // set the freed property of our new object to 0 to prevent anything else using it  119.                   aRequests[pos].locked = 0;  120.                   // type, url, asynchronous  121.                   aRequests[pos].oRequest.open("GET", sURL, true);  122.                   // assign an event handler to watch for state changes  123.                   aRequests[pos].oRequest.onreadystatechange = function() {  124.                       // check if the response is ready to be dealt with  125.                       if (AJAX_change(pos)) {  126.                           // get the content type (search for xml because it could be: "text/xml; charset=ISO-8859-1")  127.                           sContentType = aRequests[pos].oRequest.getResponseHeader("Content-Type");  128.                           if (sContentType.indexOf("xml") == -1) {  129.                               // pass the response as plain text to our callback function  130.                               fnCallback(aRequests[pos].oRequest.responseText);  131.                           } else {  132.                               // pass the XML response to our callback function  133.                               fnCallback(aRequests[pos].oRequest.responseXML);  134.                           }  135.                       }  136.                   }  137.                   // send it all off and let the event handler do its work  138.                   aRequests[pos].oRequest.send(null);  139.               }  140.           } else {  141.               alert("Your browser doesn support HTTP get requests.");  142.           }  143.       }  144.         145.       function AJAX_post(sURL, sParams, fnCallback) {  146.           // check if the broweser supports XMLHttp  147.           if (bXmlHttpSupport) {  148.               var pos = -1;  149.               // search the array for an unlocked object  150.               for (var i=0; i<aRequests.length; i++) {  151.                   if (aRequests[i].locked == 1) {  152.                       pos = i;  153.                       break;  154.                   }  155.               }  156.               // if we couldnt find a spare one  157.               if (pos == -1) {  158.                   // create a new one, passing in the unlock code = 1  159.                   pos = aRequests.length;  160.                   aRequests[pos] = new AJAX_Broker(1);  161.               }  162.               if (aRequests[pos].oRequest) {  163.                   // set the freed property of our new object to 0 to prevent anything else using it  164.                   aRequests[pos].locked = 0;  165.                   // type, url, asynchronous  166.                   aRequests[pos].oRequest.open("POST", sURL, true);  167.                   // assign an event handler to watch for state changes  168.                   aRequests[pos].oRequest.onreadystatechange = function() {  169.                       // check if the response is ready to be dealt with  170.                       if (AJAX_change(pos)) {  171.                           // get the content type (search for xml because it could be: "text/xml; charset=ISO-8859-1")  172.                           sContentType = aRequests[pos].oRequest.getResponseHeader("Content-Type");  173.                           if (sContentType.indexOf("xml") == -1) {  174.                               // pass the response as plain text to our callback function  175.                               fnCallback(aRequests[pos].oRequest.responseText);  176.                           } else {  177.                               // pass the XML response to our callback function  178.                               fnCallback(aRequests[pos].oRequest.responseXML);  179.                           }  180.                       }  181.                   }  182.                   // setRequestHeader must be called after open to prevent an uncaught exception  183.                   aRequests[pos].oRequest.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  184.                   // send it all off and let the event handler do its work  185.                   aRequests[pos].oRequest.send(sParams);  186.               }  187.           } else {  188.               alert("Your browser doesn support HTTP post requests.");  189.           }  190.       }   191.         192.       // event handler  193.       function AJAX_change(pos) {  194.           // a few checks ..  195.           // - that a position was passed in - should pretty much always be the case  196.           // - that its freed - again pretty useless as we should have just created it in the get or post functions  197.           // that the ready state is 4 (completely loaded)  198.           if (typeof(aRequests[pos]) != undefined &&  199.               aRequests[pos].locked == 0 &&  200.               aRequests[pos].oRequest.readyState == 4 ) {  201.               // check the headers status : 200 =  OK || 304 = Not Modified  202.               // some advan