Tag Archives: ajax

AJAX dataTypes in jQuery. Format and access.

javascript, micro tutorial, , ,

AJAX calls in jQuery

Just because I don’t want to write the same content twice, I’ll say that in jQuery the AJAX calls can be done by various ways, because there are many wrappers that helps you do this job depending of what you want from your application. However you can find more about $.ajax which is the main topic of this post in my previous post, where I described really in breve what it does and how it does it. Yet again just to be correct I’ll add that you can find more, of course, on the docs page of jQuery about AJAX.

Supported data types by $.ajax

In fact the $.ajax object according to the docs page support a large set of options that can specify the custom type of call you’d like to use in your application. Continue reading AJAX dataTypes in jQuery. Format and access. →

$.ajax in jQuery

javascript, micro tutorial, , ,

AJAX and jQuery

Just in breve as a powerful JavaScript library jQuery wraps the ability to call XHR within a built in interface. There are several ways to implement asynchronous calls. In fact you can call either .load or .post to perform custom calls.

$.load

In the case of .load you can chain it on every returned object from a custom jQuery selector: $(‘div’).load(.. than the content of the DIV is filled with the returned text.

But what if I want a OK and Error handlers?

The .load method doesn’t give such “complex” functionality. Than the built in $.ajax method comes in help. You can specify the URI, method, data, dataType, onSuccess, onError handlers, etc. Continue reading $.ajax in jQuery →

jQuery – stop an ajax call!

javascript, micro tutorial, , ,

It’s a simple task with no simple question, although in jQuery, as I mentioned now, everything is very simple. Even this task.

In a short example we’ve a simple AJAX call with very large request.

xhr = $.ajax({
    url : 'www.example.com?some-large-call',
    success : function(responseText) {
        // some DOM manipulation
    }
});

But what if something changes the data we’d like to request with this call even before the response has come. For example I click on a category in the site but before all the data has come I’d prefer to see other category’s data. Continue reading jQuery – stop an ajax call! →

Read The Anchor Part of The URL … with PHP

javascript, micro tutorial, PHP, web development, , , , ,

The Problem

Well usually the URL is formed like so – http://example.com/index.php#anchor1, if you have anchors, of course. And the problems is simple to define. With PHP you cannot grab the anchor part of the link (that anchor1 in the example). That’s of course normal behaviour, the anchors are used by the client (your browser usually) to position the page at a specific location, and being a client side technique is simple to guess that PHP cannot access them.

Why We Need Such a Thing?

Today the web is more and more full of such an Ajax rich applications, almost every one of them don’t refresh the page and use anchors to save the path of the user, and that’s how they manage the bookmarks of a specific state in the page. We often need this technique, cause every other change in the URL, but the anchors, invoke a reload of the page, which is bad. But however why don’t we use directly this anchors from the Ajax application? That’s because we’d like to speed up things. We load the page with an anchor in the URL, like so:

http://example.com/index.php#load-me-first

but in that case the page should load, than the JavaScript should grab the anchor, and than to process via Ajax request the data from the server … and even that is not enough, cause than the data should be placed on the right place in the page.

Note: In fact, most of the fully flash based sites work on the same schema.

We need the initial load to happen directly with PHP which is much more faster. But the problem is that, as I said PHP cannot read the anchor of the link. If you have http://example.com/index.php#load-me-first, none of the _SERVER variables will return the anchor, because as I noticed that’s client side issue.

The Solution

Well we need to combine the client and server side techniques to solve the problem. There comes JavaScript combined with PHP and all this is made with the help of the Cookies.

Let see the situation. If we have an anchor in the URL we can easily grab this with JavaScript:

<script>
 
var query = location.href.split('#');
 
</script>

Now the query[1] has the value of the anchor part of the URL. Now you can set this in a cookie.

<script>
 
var query = location.href.split('#');
 
document.cookies = 'anchor=' + query[1];
 
<script>

Note: it’s important to setup the cookie to be persistent only for this session so next time you enter the site there should not be such an existent one.

So far so good, what we need more is just to read that cookie in PHP, so you can put this PHP code above.

<script>
 
var query = location.href.split('#');
 
document.cookies = 'anchor=' + query[1];
 
<script>
<?php
 
echo $_COOKIE['anchor'];
 
?>

Of course, yes. This is not working correctly. In fact it’s working correctly from the second load on, but on the initial load of the page the _COOKIE array does not has any anchor key inside. That’s because this part of the code is executed before the browser setup the cookie on the client.

The Workaround

Well there is a workaround. You simply should wait for the cookie to come from the server. Like so:

<script>
 
var query = location.href.split('#');
 
document.cookies = 'anchor=' + query[1];
 
<?php if (!$_COOKIE['anchor']) : ?>
 
window.location.reload();
 
<?php endif; ?>
 
<?php
 
echo $_COOKIE['anchor'];
 
?>

Now everything is OK. You can parse the _COOKIE[‘anchor’].

Important

It’s exteamly important to put the <script> tag as high as you can, so the browser will setup and check for the cookie before anything is rendered to the page. In that case the reload of the page is so quick so you will not experience any delay at all.

JQuery ajax script call

featured, javascript, web development, , , ,

Many friends are asking me how to they use JQuery AJAX power. However you have two main ways, using:

$(‘#elem’).load(‘url’, ”, function() {});

or

$.ajax({

type : ‘GET’, // or POST

dataType : ‘text’, // or JSON

url : ‘url’,

data : {}, // GET or POST key/value parameters

success : function () {}, // on success callback

error : function () {} // on error callback

});

Note: be careful to miss the comma after the error callback declaration, cause IE is giving some problems with objects with comma after the last key/value pair.

Both methods are useful, but however the second one is more complicated and gives more functionality. It’s important to note that if you’d like to include Html, which will be JavaScript processed after that, there are another two ways. The first one is obvious, you can call the javascript file processing the included Html in your success callback of the first ajax call. After calling the second ajax call, be aware to call it with dataType : ‘script’, which includes de js code and parses it as code. Than you can call whatever function in that .js as you’d do it as it was already included.

That method is obvious and easy, but however on slow nets it’s pretty slow and it’s not useful. Actually you can include your script file as you’d normally do it, with a script tag.

In it you should register all event listeners in methods you can call later. That’s the better way.

In the first case you have:

$.ajax({

type: ‘GET’,

dataType: ‘text’,

url: ‘the_url’,

data: {},

success : function () {

$.ajax({

type: ‘GET’,

dataType: ‘script’,

url : ‘script.js’,

success : function() {

// now do what you want

}

})

},

error : function() {

}

});

In the second case you’d just include your file:

<script src=”script.js”></script>

<script>

$.ajax({

type : ‘GET’,

dataType : ‘text’,

url : ‘url’,

success : function() {

init_script(); // method in script.js

}

});

</script>

Now everything should work OK, good luck!