Posts Tagged ‘Ajax’

More javascript on the web: Microsoft Ajax CDN

Thursday, September 17th, 2009

ASP_Ajax

A few days ago said the possibility of using the infrastructure of Google to host JavaScript libraries for our applications. Well, now that Microsoft has launched a similar service, Microsoft Ajax CDN , A content distribution network where we can download the runtime libraries of scripts that we use in our applications.

Or in other words, we can make free use of these libraries, without limitation of bandwidth and regardless of whether or not for commercial purposes. Just be referenced from your code:

?View Code ASPNET
<script src="http://ajax.microsoft.com/ajax/jquery-1.3.2.min.js" 
        type="text/javascript"></script>

The main advantage of this method is the speed with which these files will be served, since it uses the infrastructure of the Redmond giant, while the cache is shared with other websites that are also used. It also provides the ability to use scripting to Web sites that do not have permission to upload files (such as platform blogger)

Unlike the Google service, since this CRC only time we can find the libraries that are officially part of the Microsoft development platform, such as those typical of ASP.NET Ajax, jQuery and those plugins that are added. The address http://www.asp.net/ajax/cdn/ can see the complete list of libraries, with their corresponding addresses download.

Additionally, Scott Guthrie said in his blog that the new control ScriptManager that come with ASP.NET 4.0 includes a property called EnableCdn which will activate the download of the Ajax libraries and all those necessary for the operation of controls, directly from their servers.

AjaxCDN_EnableCdn_160909

The drawbacks, as the same as the Google service: If you do not have network connectivity in development time, we really have it raw.

More information: http://www.asp.net/ajax/cdn/

Tags: , , , ,
Posted in ASP.NET | 13 Comments »

Let Google host your javascript libraries

Tuesday, September 15th, 2009

GoogleCode

An interesting possibility offered by Google developers use it as a CDN (content distribution network) for open source javascript libraries popular. In practice, this means is that in your web development, instead of going to your server for libraries that use scripting, you can directly reference and use the possibilities offered by this company in its servers.

This provides several advantages are not insignificant:

  • First, the discharge of these libraries will, for the client, probably faster than if you have to get from your server through the Internet. This is Google’s network infrastructure, and that means guarantees.
  • Second, and related to the above, if this is a high traffic website, the audience will surely be allowed infinitely greater than you can offer to another server.
  • Third, if the user has previously visited another site that also use the same library, will benefit from the local cache of the same, because your browser does not again discharged. And in any case, they would be taking advantage of Google’s cache optimizations.
  • fourth, do not consume bandwidth from your provider, although this is negligible. And I mean negligible bandwidth, not the provider ;-)
  • fifth, you can use the libraries from sites hosted somewhere where you could not, or is not easy, upload scripts, as the platform Blogger from which to write.

At this point includes: development frameworks, in all versions available:

  • jQuery
  • jQuery UI
  • Prototype
  • script_aculo_us
  • MooTools
  • Dojo
  • SWFObject
  • Yahoo! User Interface Library (YUI)

If you’re already using Google Ajax libraries (such as the Visualization API, or Google Maps), and get through the charger google.load (), you can also use it to download these frameworks. You can also do so through a direct reference, such as:

?View Code JAVASCRIPT
<script 
src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.2/prototype.js">
</script>

Oh, and not worry about changing versions, or anything. Google is committed to live indefinitely all distributions to be published and include updates as they appear.

Finally, and to provide a negative view, some people think that this is one more strategy for Google to get information about users’ browsing, code execution from its servers enable cookies and reading of data that could be used for purposes other than those provided on your website. Still others think it could be a source for the spread of malicious code if someone managed to hack these archives. Obviously not a good idea to use this option if you go to work in local mode, offline.

For more information on how to download and libraries available, you can visit the Developer Guide for Ajax libraries API.

Tags: , , ,
Posted in Ajax, JAVASCRIPT | 3 Comments »

5 ways to use Ajax with jQuery

Tuesday, August 25th, 2009

The people of Nettuts publishes an interesting article on using  jQuery with Ajax. Specifically the 5 ways that jQuery allows us to send asynchronous requests.

  • $.load()
  • $.get()
  • $.post()
  • $.getJSON()
  • $.getScript()

$. load ()

This is the feature I like most about jQuery already makes one of the most common tasks of developing with Ajax is as simple and straightforward as we shall see in this example:

$("#div_links").load("/Main_Page #jq-p-Getting-Started li");

This example brought to the documentation page on jQuery, it manages to launch a request to the URL /Main_Page (usa URL Rewrite) HTML response and take the #jq-p-Getting-Started li and inserted into #div_links
Just great, comfortable and fast.

$. get ()

This is the simple function with which we can launch the server via GET requests Ajax.

$.get("test.cgi", { name: "Venu", time: "7pm" },
  function(data){
    alert("Data Loaded: " + data);
  });

By passing 3 options, 2 of which are options (rather conditional) you can request to launch the file (1) with parameters (2) and treat the response through a callback (3rd).

$. post ()

Like the above, this feature lets you send POST requests using Ajax.

$.post("test.php", { name: "Venu", time: "7pm" },
  function(data){
    alert("Data Loaded: " + data);
  });

As easy as above.

$. getJSON ()

Although the above are able to specify the type of return, the best option is to use this method to obtain the response in JSON evaludada the callback function.

$.getJSON("test.js", { name: "Venu", time: "7pm" }, function(json){
  alert("JSON Data: " + json.users[3].name);
});

Taking into account the browser, the object will use native JSON or use a system based on eval().

$. getScript ()

Although technically not an Ajax request is a request to the server and therefore has a place in the post.

$.getScript("test.js", function(){
  alert("Script loaded and executed.");
});

With this method we can load a file asynchronously using JavaScript and the parameter (2) callback can execute Javascript code that is using the js file that we want to load (1).

Tags: , , , ,
Posted in Ajax, JAVASCRIPT | 24 Comments »

Preloaders.net: Loading of images in 3D

Saturday, August 22nd, 2009

Preloaders.net shows me, a site style ajaxload.info that allows us to generate images of “Loading” for our applications, but this can generate images with animations in 3D.

Tags: , ,
Posted in Ajax | No Comments »

What we can do ajax

Tuesday, July 14th, 2009

* Modifications to the browser, adding buttons, toolbars, bookmarks, icons, ….
* Access to local files
* Running music files or apply effects
* HotKeys gives conflicts in other browsers
* Access Hardware
* Comnicaciones extended HTTP and other protocols.
* Interaction with the Operating System

Anyway time to time 

Tags: , , ,
Posted in Ajax | No Comments »

AJAX Registration Page

Wednesday, February 18th, 2009

Here AJAX Registration Page with HTML & Javascript. Checking username, length, password match..

live_previewLive Preview downloadDownload

$(document).ready() :

The most commonly used command in jQuery is $(document).ready(). It makes sure code is executed only when a page is fully loaded. We often place code blocks inside this $(document).ready() event.

?View Code JAVASCRIPT
 
<script type="text/javascript" src="jquery-1.2.6.min.js"></script>
 
// Your Code
 
$(document).ready(function()
 
{
 
// Put all your jQuery goodness in here.
 
}

Checking Username Length:

When guest types something in Username field less than 3 characters and focus move from it to next field. An error will be occurred .

username3

?View Code JAVASCRIPT
 
usr = $("#txt_username").val();
 
if(usr.length >= 3) //checking username length
{
	// Checking username code here..
}
 
else
{
	//Error Message code here..
 
}

Chekcing Username:

When guest types something in Username field greater than or equal 3 characters and focus move from it to next field Then, A waiting message will be displayed with small image as loader.gif.

checkingusername

?View Code JAVASCRIPT
$("#div_status").html('<img src="loader.gif" align="absmiddle">&nbsp;Checking username....');

If Username is available:

if username available from database. Ajax will display like this, Otherwise, An error will be occurred.

usernameready

?View Code JAVASCRIPT
	$.ajax({
    type: "POST",
    url: "check_username.php",
    data: "username="+ usr,
    success: function(msg){
   $("#div_status").ajaxComplete(function(event, request, settings){
 
	if(msg == 'OK')
		{
			// If the username available, goes here.
		}
		else
		{
			//If the username not available, goes here.
		}

Checking Password:

When guest types something in password field less than 3 characters and focus move from it to next field. An error will be occurred .

password3

?View Code JAVASCRIPT
 
var str_confirm_password = $("#txt_confirm_password").val();
 
if(str_password.length  >=3)
{
	// Checking Password match code here..
}
else
{
	// Error message code here..
}

Checking Password Match:

When guest types something in Password & Confirm Password fields, and focus move from it to next field. Then, it will check value of both fields. If both field’s value are not same then, an error will be displayed.

If not match

passwordnotmatch

If match

passwordready

?View Code JAVASCRIPT
var str_password = $("#txt_password").val();
var str_confirm_password = $("#txt_confirm_password").val();
 
if(str_password!=str_confirm_password)
{
	// If not match, goes here,
}
else
{
	//If match, goes here.
}

“Sign Up Now” Button :

When guest push “Sign Up Now!” button. It goes to next page .

?View Code JAVASCRIPT
function fn_onclick() {
	if(str_status == "OK" && str_pwd_status =="OK" && str_password != '' && str_confirm_password != '' )
	{
		$("#div_msg").html('<div id="logged_in"> <br />' +
    	 'Thanks for Registering <br />' +
   		  '<img align="absmiddle" src="loader_bar.gif">' +
    	 '<br /> Please wait while we redirect you to welcome page...</div>');
 
		setTimeout('go_to_next_page()', 4000);
	}
}
 
function go_to_next_page()
{
	window.location = 'welcome.html';
}

.removeClass() & .addClass() functions :

.removeClass() & .addClass() functions are used for add styles into username & password fields. In code, ‘css_ok’ & ‘css_error’ regarding from ‘style.css’ . For instance these functions show the box green if the values entered in the boxes are correct & otherwise red color

.

?View Code JAVASCRIPT
<link rel="stylesheet" type="text/css" href="style.css" />
 
	// Your code here..
 
$("#txt_username").removeClass('css_ok');
$("#txt_username").addClass("css_error");

In style.css,

?View Code CSS
.css_ok
{
border: 1px solid green;
color: #333333;
}
.css_error
{
border: 1px solid #AC3962;
color: #333333;
}

live_previewLive Preview downloadDownload

Tags: ,
Posted in Ajax | No Comments »

Pure Ajax in Asp.Net 4.0

Monday, February 16th, 2009

Here is an interesting article on pure Ajax in Asp.Net 4.0.This article claims that the previous versions of Ajax is not partial post back.


Tags: , ,
Posted in Ajax | No Comments »

Ajax Based Search Engine With PHP and XML

Sunday, February 15th, 2009

Here Sample code of Ajax based search engine with PHP and XML

live_preview Live Preview          downloadDownload Code

 

This is the Javascript Code :

?View Code JAVASCRIPT
/* &lt;--------------------------&gt; */
/* XMLHTTPRequest Enable		*/
/* &lt;--------------------------&gt; */
function createObject() {
var request_type;
var browser = navigator.appName;
if(browser == "Microsoft Internet Explorer"){
request_type = new ActiveXObject("Microsoft.XMLHTTP");
}else{
request_type = new XMLHttpRequest();
}
return request_type;
}
 
var http = createObject();
 
/* &lt;--------------------------&gt; */
/* 		SEARCH				   */
/* &lt;--------------------------&gt; */
 
function fnSearchName() {
 
txtInput=encodeURI(document.getElementById('txtInput').value);
 
document.getElementById('divmsg').style.display = "block";
document.getElementById('divmsg').innerHTML = "Searching for <strong>" + txtInput+"</strong>";
// Set te random number to add to URL request
nocache = Math.random();
http.open('get', 'php_Search.php?name='+txtInput+'&amp;nocache = '+nocache);
 
http.onreadystatechange = fnSearchNameReply;
http.send(null);
}
function fnSearchNameReply() {
 
	var response = http.responseText;
	document.getElementById('divResult').innerHTML=response;
 
}

This is the PHP Code :

?View Code PHP
load("NameList.xml");
$x=$xmlDoc-&gt;getElementsByTagName('NAME');
for ($i=0; $i&lt;=$x-&gt;length-1; $i++)
{
//Process only element nodes
if ($x-&gt;item($i)-&gt;nodeType==1)
  {
  if ($x-&gt;item($i)-&gt;childNodes-&gt;item(0)-&gt;nodeValue == $q)
    {
    $y=($x-&gt;item($i)-&gt;parentNode);
    }
  }
}
$cd=($y-&gt;childNodes);
for ($i=0;$i&lt;$cd-&gt;length;$i++)
{
//Process only element nodes
if ($cd-&gt;item($i)-&gt;nodeType==1)
  {
  echo($cd-&gt;item($i)-&gt;nodeName);
  echo(": ");
  echo($cd-&gt;item($i)-&gt;childNodes-&gt;item(0)-&gt;nodeValue);
  echo("");
  }
}
 
?&gt;

Tags: , , , ,
Posted in Ajax | No Comments »