LebGeeks

Kassem

Member

AJAX & jQuery

Hey guys. I've recently started learning AJAX and jQuery. Today I finished watching two video series by Lynda.com about the subjects. The videos were pretty good but they did not go beyond the basics. I've searched for resources and I found that those listed on jquery.com are pretty good but I was wondering if any of you have some website/resource or even a book to recommend... A book would good for reference, and some resources for real-world examples and how jQuery and AJAX can be used to bring some life to the website would be great...

rolf

Member

Re: AJAX & jQuery

I am starting to use jQuery.
The basics is that they use CSS selectors to select elements, then make modifications or bind fucnctions to them. The hardest for me was to grasp the changes in scope. Then for the complicated syntax you get used to it, and the methods, I am learning them one by one, as the need arises.
It is pretty cool for doing transitions, mouseovers, etc. quickly. I am thinking in the future it could be used to implement programming logic, offloading some work from PHP and moving it to the client, and sending minimal updates throught ajax. This looks interesting because working with POSTs and sessions in PHP is kinda ugly.

Last edited by rolf (April 23 2010)

Kassem

Member

Re: AJAX & jQuery

offloading some work from PHP and moving it to the client, and sending minimal updates throught ajax. This looks interesting because working with POSTs and sessions in PHP is kinda ugly.

Yeah I also dislike working with PHP sessions. I went through the whole series of AJAX but it didn't contain any connection with PHP. What I understood was that AJAX is when you use XML HTTP Request to grab info from XML files and then it's the same plain old Javascript. The tutor (Dori Smith) kept saying that AJAX connects to the server, but not to PHP? I'm still unsure about this and that's why I started this thread in the first place... I'd like to get some more insight about the subject.

By the way, jQuery is very easy. The syntax is a bit weird at first (still trying to get used to it myself actually) but AymanFarhat told me that it gets much easier later, which is basically the same experience you get with other languages. So yeah, I'm trying to focus more on "old-school" web development/design rather than on Flash-based design and development... at least for now.

Requiem

Member

Re: AJAX & jQuery

AJAX does not have any advanced features, its a very simple thing, its actually a technique.
AJAX is all about requesting a document in the background and returning the result of that document, in plain simple what you with these contents may be advanced but AJAX as a technique will always be the same, retrieving a document behind the scene.

offloading some work from PHP and moving it to the client, and sending minimal updates throught ajax. This looks interesting because working with POSTs and sessions in PHP is kinda ugly.

This is somewhat not true, mainly cuz you can NEVER replace server-side  logic for processing document. Basically AJAX will still submit to a PHP page that is server-side [or an equivalent]  so no POST thing will be lost, and also ajax relies on the SESSION. The simplest way to imagine it is you were to open the window yourself and request the url, its the same thing the only confusing thing that may seem to be here is that your requesting an XML [or plain] file instead of an HTML/XHTML file (its just a view) the processing logic and processing of sending receiving is still controlled by server-side.

What AJAX does is request a page behind your back, read that page and parse it and then decide what to do with it, so for example instead of refreshing the entire page you will send a request to a page that will detect changes (that pages still uses the POST/GET session etc...) and that page will return a document containing the modified and thus you know what to modify in your page. You will be requesting a smaller document than actually refreshing the page.

The only consequence is precise update for parts of your document instead of refreshing everytime.
jQuery basically is good to interact with the page, and add that dynamic look for the page.

Last edited by Requiem (April 23 2010)

Kassem

Member

Re: AJAX & jQuery

This is interesting, check it out.

rolf

Member

Re: AJAX & jQuery

@ Requiem, I know what ajax does. If you assimilate a page to a session, you can, in theory, and in my humble opinion, implement the server-side logic (minus the database) in your browser thanks to ajax, because you dont need to reload the whole page. The page can then directly communicate with the database, through a minimal PHP layer.

Last edited by rolf (April 26 2010)

Kassem

Member

Re: AJAX & jQuery

you can, in theory, and in my humble opinion, implement the server-side stuff in your browser thanks to ajax, because you dont need to reload the whole page.

That is exactly what is done in my previous post. You simply use an AJAX request to a PHP file, then wait for a response using a callback function. This is all done without reloading the page. It is not literally implementing the service-side stuff in the browser, but at least that's the impression you're getting since there is no reloading of the page.

Requiem

Member

Re: AJAX & jQuery

If you assimilate a page to a session, you can, in theory, and in my humble opinion, implement the server-side logic (minus the database) in your browser thanks to ajax,

With all due respect, this proves a very wide gap relating to client-side/server-side computing, the statement itself is paradoxical.
But for the sake of understanding for you both take this example:
You have a page where you have to login via ajax:

Client Side stuff:
u fill a form and submit using ajax to say a page called login.php with the following parameters: username=myuser&pass=samplepass
You can optionally verify for blank input using javascript and even regular expressions for specific format but eventually ull send data to the page

Server-side stuff
(Start of server-side logic)
The server reads the request checks for blank input, and verify using regex, why is that?
you can't trust ur client to be right, or else someone can inject and the parameter can be sent form another page say where it isn't valid by some random person. [POST requests arent hard to generate]
The server queries the database for username/pass validity.
The server then starts the session + cookie
(End of server-side logic)
Server returns a true/false callback with an optional parameter say for example:

<response>
     <success>1</success>
     <message>You have successfully authenticated</message>
</response>

Client-Side
The xml file is parsed and if say response is correct the page will generate a menu or so

You will need the SESSION/COOKIE variable for later if you say send a request to get something that only logged people can use, how do you expect PHP to generate that without the server-side logic sent through login.

Remember Script injections is easy to do, you cannot always expect that whatever is happening on the page via AJAX/Javascript is always correct and mainly valid and secure. Ofc you may offload some code but that is just client-side. Server-side logic is very hard to replace you can just remove some steps or speed up some steps in the displaying of data but not in actual handling of the data.

In relevance to your earlier posts, you still have to do that:

This looks interesting because working with POSTs and sessions in PHP is kinda ugly.

My detailed post was for Kassem in reply to:

Yeah I also dislike working with PHP sessions. I went through the whole series of AJAX but it didn't contain any connection with PHP. What I understood was that AJAX is when you use XML HTTP Request to grab info from XML files and then it's the same plain old Javascript. The tutor (Dori Smith) kept saying that AJAX connects to the server, but not to PHP? I'm still unsure about this and that's why I started this thread in the first place... I'd like to get some more insight about the subject.

To re-summarize,  ajax works the same as if you open the window urself or send it regularly, the only difference is that you can use information in the DOM or variables to ease such sending
Think of it like editing a forum post when u click on "edit" it already knows the id of the post or so so it queries the server for information on such a post gets it and then display a textbox and such and when you finish it queries updating. It's is almost the same as filling a form to do so and send without AJAX but more convenient and dynamic but server-side logic is still the same

rolf

Member

Re: AJAX & jQuery

You can move security and data to the server, and all the rest can be implemented on the client IMHO.
With regards to SQL injections, you can either have every user log in with a limited MySQL user, therefore he will have limited priviledges, and even if he does injections, he will only be corrupting the data he has access to, that is his own data.
Otherwise, you can also wrap the database in a class that makes it impossible to do sql injections, and also implement you own security.
In both cases, you will have to send the username and password with every request (since we dont want sessions...) that would require a secure connection, but I think the impact on the bandwidth is minimal. Otherwise, we can implement session, only for that.
And script injections, well everything should be filtered or typed.
It's just an idea, but it might be beneficial. BTW if your code does 20 database queries for one page, it is not an argument for server-side scripting against my idea, but more an argument for writing better code :) (not meaning you here, its just a way of talking)

PS: there may still be some server-side stuff that cannot be practically implemented in the client. For example image/pdf or other stuff generation. Or 3d generation. Or ad distribution...
But in most sites today, like for example this forum, the logic is very simple and could be implemented client-side.

Last edited by rolf (April 27 2010)

Kassem

Member

Re: AJAX & jQuery

Ok I have a question that might seem silly to you guys but it's kinda bothering me. Right now I'm watching a video series about Real-World XML (from Lynda.com) and the tutor is explaining how to load an XML file using JavaScript so he's doing the following: (in IE)

var xmlDoc = new ActiveXObject("MSXML2.DOMDocument.6.0");

xmlDoc.async = true;
xmlDoc.onreadystatechange = function() {
if(xmlDoc.readstate == 4) docLoaded(xmlDoc);
}
xmlDoc.load("file.xml");

function docLoaded(xmlDoc) {
//code here
}

So yeah basically what's the difference between xmlDoc.load("file.xml") and XMLHttpRequest()? Aren't both of them simply loading an XML file to parse it in the callback function?

rolf

Member

Re: AJAX & jQuery

So yeah basically what's the difference between xmlDoc.load("file.xml") and XMLHttpRequest()?

XMLHttpRequest()

Kassem

Member

Re: AJAX & jQuery

So yeah basically what's the difference between xmlDoc.load("file.xml") and XMLHttpRequest()?

XMLHttpRequest()

Yeah so? I still don't get it... :/

xterm

Moderator

Re: AJAX & jQuery

It's just a different parser, don't worry about it.

rolf

Member

Re: AJAX & jQuery

So yeah basically what's the difference between xmlDoc.load("file.xml") and XMLHttpRequest()?

XMLHttpRequest()

Yeah so? I still don't get it... :/

Can xmlDoc parse from a URL (using the HTTP protocol)?
Can XMLHttpRequest() parse from a file?

Thats what I was trying to point out.

Kassem

Member

Re: AJAX & jQuery

Can xmlDoc parse from a URL (using the HTTP protocol)?
Can XMLHttpRequest() parse from a file?

Thats what I was trying to point out.

Ok I guess I get this point. But my question was what's the difference in terms of "AJAX" in case I used either one of them. Isn't the whole AJAX thing dependent on the XHR (XMLHttpRequest) to load an XML file and have its contents read for use? Doesn't the DOM Loader function (xmlDoc.load() ) do the same exact thing? (taking into consideration that the XML file is available on the same server)

In brief, in order to use the AJAX technology, do we have to use the XHR or could the DOM Loader function do the trick?

rolf

Member

Re: AJAX & jQuery

I believe AJAX implies loading data remotely through HTTP. Can the DOM loader do that? (I am sincerely asking, I don't know the details)

Joe

Member

Re: AJAX & jQuery

@rolf:
Client-side security is useless. What if the person doesn't use a web browser? What if he is sending HTTP requests directly from his console (through a C program he has written himself or a bash job)? How can you filter it yourself? What Requiem is giving you is a known rule in the security world.

@Requiem (and everyone else)
I have never used AJAX or XML before so let me see if I got it straight. The difference between HTTP and XML is simple. XML is sent over HTTP. XML contains the data related to your page. HTTP deals with connection-related data like cookies or sessions.

Requiem

Member

Re: AJAX & jQuery

@Requiem (and everyone else)
I have never used AJAX or XML before so let me see if I got it straight. The difference between HTTP and XML is simple. XML is sent over HTTP. XML contains the data related to your page. HTTP deals with connection-related data like cookies or sessions.

Erm to clarify XML is just a document type, like XHTML/HTML so wherever you have a document like that its xml its just a file with a certain document header: now this file can exists somewhere on the server, or can be generated via PHP (just like HTML) or any other scripting language, its just plain output
An HTTP request is your standard web request, when you click on say www.lebgeeks.com you are starting an HTTP request which goes to the server queries a document and returns it, that document may be aswell a script and so on, script can use Session, POST etc...
And thus an HTTP Request object is just an object that allows to you handle HTTP requests in your browser, think about it like an automatic way to open and load a document in your browser, the object gives you the status of the loading and whether its successful or not, and finally the document that has been loaded, be it a text file, an image, an XML file an HTML file (either generated from PHP or other script or just static) same as normal browsing but give you functionality to if you want browse within a page and load the content in the page.
So yes, an XML file is sent over an HTTP request, its the connection. Hope that clarifies.

Ok I guess I get this point. But my question was what's the difference in terms of "AJAX" in case I used either one of them. Isn't the whole AJAX thing dependent on the XHR (XMLHttpRequest) to load an XML file and have its contents read for use? Doesn't the DOM Loader function (xmlDoc.load() ) do the same exact thing? (taking into consideration that the XML file is available on the same server)

The xmlDoc you used is just a variable containing the ActiveXObject("MSXML2.DOMDocument.6.0"); specific to IE and that is just a parser for example it take a file and allows you to parse it and use it internally in the javascript
you can check the load documentation here
Shows that it acts on remote files as well since it takes a URL

I believe Kassem your missing the point of ajax, although loading static XML files is AJAX technique, its not needed in general, the power is to generate the xml document dynamically with a script so say an ajax request would request something like update.php which generates an XML document with details taken form the server and you can pass them to your script.

Last edited by Requiem (April 29 2010)