Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 475
  • Last Modified:

JQuery and AJAX

I have heard much talk about jquery replacing AJAX.  I would like to hear the experts thoughts on this.  Also it would be great to see some examples of when its a viable solution to use one over the other.

Please provide any scenarios as web solutions that run with VS 2010 using the latest framework.


Thanks
0
Robb Hill
Asked:
Robb Hill
  • 5
  • 3
  • 2
5 Solutions
 
cookiejCommented:
jQuery does not replace AJAX.  JQuery is a framework for javascript that includes a very handy AJAX component as well as an incredibly powerful "selector" structure with lots of sugar for your convenience.
0
 
Robb HillSenior .Net DeveloperAuthor Commented:
Do you have a basic example Jquery working with this component
0
Concerto's Cloud Advisory Services

Want to avoid the missteps to gaining all the benefits of the cloud? Learn more about the different assessment options from our Cloud Advisory team.

 
cookiejCommented:
Here's a sample from my own PHP code:

function validateLogin() {
	theURL = "https://<?= $_SERVER['HTTP_HOST'] ?>/validate.php";
	theData = {
		'validationType' : 'login',
		'ident' : document.getElementById("login_ident").value,
		'password' : document.getElementById("login_pw").value,
		'loginTries' : document.getElementById('loginTries').value
	}
	$.getJSON(theURL, theData, function(theResults) {
		if(theResults.loginValid) hashUpdateDB(theResults)
		else {
			$('#loginTries').val(parseInt( $('#loginTries').val() ) + 1);			// Add one to the tries
			$('#loginFeedback').removeClass('login_text').addClass('login_err');	// Change to the error class
			$('#loginFeedback').text(theResults.feedback);							// Set the Feedback Text
			$('.login_field').val('');												// Clear the old values
		}
	});
}

Open in new window


The "$" is merely a shortcut referencing the jQuery object.  The getJSON function is an expanded version of the .ajax feature -- it expects the code returned from the ajax call to be in JSON (JavaScript Object Notation) format.
0
 
Robb HillSenior .Net DeveloperAuthor Commented:
I am more familier with ASP.net.  Does this change much when coding PHP
0
 
leakim971PluritechnicianCommented:
have a look to the two last links proposed
0
 
cookiejCommented:
No.  Not ASP or PHP, really.  It's all Javascript.
0
 
cookiejCommented:
Now that I have a bit more time, let me explain some of the code above.

This function is called when the user hits submit.  I have the following HTML:

<BODY class='atx_body'>
    <DIV id='atx_content' class="atx_inactive">
        <IMG id='summary_header' src="assets/atxv2_mobile_head.png">
        <FORM id='loginForm' onSubmit='return false;'>
        <INPUT name='loginTries' id='loginTries' type="hidden" value="0">
        <INPUT name='validationType' id='validationType' type="hidden" value="login">
        <DIV>
            <P id='loginFeedback' class="login_text">Sign in with your username or registered email:</P>
            <DIV class="login_fieldContainer">
                <INPUT type="email" name="login_ident"  id="login_ident" class="login_field" PLACEHOLDER="Enter Email or Username">
            </DIV>
            <DIV class="login_fieldContainer">
                <INPUT type="password" name="login_pw" id="login_pw" class="login_field" PLACEHOLDER="Enter Your Password">
            </DIV>
            <BUTTON id="login_button" name="login_button" type='submit' class="appSubmit" onClick="validateLogin();">Log In</BUTTON>
        </DIV>
        </FORM>
    </DIV>
</BODY>

Open in new window


Now, basically the code executes the AJAX file and gets the result of that process in JSON format and routes a "success" result to a function called "hashUpdateDB()" which stores the valid credentials to the local database and we jump to the next page.

If the result is NOT success, we increment the loginTries, set the class from "login_text" to "err_text" (Red and bolder!) and replace the text with the appropriate feedback.

JQuery comes into play here, bigtime.  First let's talk about the selectors, for me, the big strength of jQuery.  When you do $('#someid') you're asking jQuery to find an object or objects within the DOM structure.  If your text is prefixed with a "#", you're asking it to find an element with that ID.  If you prefix with a ".", you're asking for all the elements that have that class.  Note the commonality with CSS.  Now there are a *LOT* of variations and permutations allowed, but that's a basic building block.

So, let's skip over the loginTries for the moment.  When I execute (taken from my previous response) :

$('#loginFeedback').removeClass('login_text').addClass('login_err');

Open in new window


I'm telling jQuery to find the element with the id of "loginFeedback" and using functions from the jQuery API, I'm removing the existing class and adding the error class.

I do the same thing with the text in the following line.  The "theResults" is a JSON object returned from the AJAX call, containing the validation data.

Now, here's where jQuery gets cooler.  Now I execute:

$('.login_field').val('');

Open in new window


Because I'm prefixing the text with a period, it finds all elements with the class "login_field" and using the "val()" function from the jQuery API, it sets the value to blank ('') for each matched element.

Now, looking back at the loginTries, you might be able to see that I'm using the "val()" function again.

Hopefully, this will help clarify that code I posted.
0
 
cookiejCommented:
P.S.  The only PHP in the code in my example is this:

theURL = "https://<?= $_SERVER['HTTP_HOST'] ?>/validate.php";

Which you can replace with (if using VB):

theURL = "https://<% Request.ServerVariables("HTTP_HOST") %>/validate.asp";

(If I remember my ASP syntax correctly!)
0
 
Robb HillSenior .Net DeveloperAuthor Commented:
Thanks and sorry for responding ..I have been out of the loop lately.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 5
  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now