The Cache: Technology Expert's Forum
 
*
Welcome, Guest. Please login or register. September 16, 2019, 01:29:05 PM

Login with username, password and session length


Pages: [1] 2
  Print  
Author Topic: responseText vs. responseXML  (Read 17773 times)
jairez
Expert
****
Offline Offline

Posts: 164


JTFC


View Profile
« on: December 15, 2008, 01:28:55 PM »

Or is it really a versus?

I'm finally getting my feet wet in Ajax and need to know if there's a preference to using one of these?  Or should/can I use both?

Thoughts?  Samples?  As alway, I'm very much appreciative of the handholding and insight.

   - ja
 

Logged

Spontaneity has it's time and place.  [Sluggo, 1990-ish]
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #1 on: December 15, 2008, 01:53:10 PM »

I originally passed all information back and forth as XML.

It sucked, especially for big records.

Instead, I either send a REALLY plain text back, something monsterously complicated, like, "OK" or I send back JSON encoded data, which converts into a JS array super fast and easy.

If I have something really complicated I am sending back I am even known to send back completed HTML and simply say that the innerHTML of a node gets <whatever was passed back> from the AJAX call.

What kind of samples are you looking for? What method of AJAXing are you doing? Have you looked at my XMLHTTP wrapper here in the JS/Ajax repository?
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
vsloathe
vim ftw!
Global Moderator
Lifer
*****
Offline Offline

Posts: 1669



View Profile
« Reply #2 on: December 15, 2008, 01:56:20 PM »

I know I should be json encoding data but I have been base64 encoding it to pass back and forth lol.
Logged

hai
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #3 on: December 15, 2008, 02:18:51 PM »

The fact is that it really doesn't matter from a transmission perspective how you send data to and fro, only from an encoding and decoding load perspective.

I posted a JSON encoder for JS here somewhere as well, because sometimes I want to send just a boatload of data back up to the server - or more interestingly, at development time I don't *know* how many parms will be coming up from the client, so I'll encode as JSON to send up as well, because it's faster than building XML or lotsalotsa functions to add POST parameters to my Ajax requester. JSON is a handy tool to have in the box.
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
jairez
Expert
****
Offline Offline

Posts: 164


JTFC


View Profile
« Reply #4 on: December 15, 2008, 04:29:38 PM »

Quote
Have you looked at my XMLHTTP wrapper here in the JS/Ajax repository?
Indeed, I have.  I've poured over it like the Zapruder film and wouldn't necessarily classify it as "first AJAX reading" material - but I totally get the gist of where you're going with it.  So I thought I'd start off a bit simpler.

Here are my code samples ... - "You know it's good shit ... I got it offa' coder!" - Caddy Shack munge

Code:

<body>


<script language="javascript" type="text/javascript">

function ajaxFunction(){
var ajaxRequest;  // The variable that makes Ajax possible!

try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var ajaxDisplay = document.getElementById("ajaxDiv") ;
ajaxDisplay.innerHTML = ajaxRequest.responseText ;
}
}

var namelast = document.getElementById("namelast").value ;
var queryString = "?thelastname =" + namelast ;
ajaxRequest.open("POST", "ajax_example.cfm" + queryString, true);
ajaxRequest.send(null);

}

</script>


<form name="myForm">

Name Last:  <input type="text" id="namelast" onChange="ajaxFunction();"/> <br />

</form>

<div id="ajaxDiv">
Your result will display here
</div>
</body>
</html>


Herez my AJAX page - happens to be ColdFusion, but so what ...

Code:
<!-- action page -->

<cfset xlname = #url.thelastname#>

<cfquery name="q_getJA" datasource="PREDEFSRC">
SELECT firstname, lastname, id
FROM myschema.workfolks
where lastname like '#xlname#%'
</cfquery>

<table>
<tr>
<th>First Name</th>
<th>Last Name</th>
<th>ID</th>
</tr>

<cfoutput query="q_getJA">
<tr>
<td>#firstname#</td>
<td>#lastname#</td>
<td>#id#</td>
</tr>
</cfoutput>

</table>
Let's assume for a moment my select returns the following:

Rec1
    Firstname:  Heywood
    Lastname:  Jablowme
    ID:  1

Rec2
    Firstname:  Gimme
    Lastname:  Shelter
    ID:  69

Rec 3
    Firstname:  Heywood
    Lastname:  Japayme
    ID:  15


--------------------------------------------------------
So, in a nutsackshell, I'm trying to see what is being passed (object type and values) back to responseText or responseXML in this case.  Am I getting a text string with responseText?  An XML object with responseXML?

Thanks guys.

    - ja

btw - I took out the "company specific" details on the fly, so in all honesty ... I'm not certain the code above will cut/copy/paste/WORK.  But I mostly need to know what it returned.  thx again.
« Last Edit: December 15, 2008, 04:33:52 PM by jairez » Logged

Spontaneity has it's time and place.  [Sluggo, 1990-ish]
serialnoob
Journeyman
***
Offline Offline

Posts: 88


View Profile
« Reply #5 on: December 15, 2008, 06:43:46 PM »

As for samples, the best I have seen recently (mind you I might not see much!)  comes with the "spry" lib from adobe, which ultimately got me into json. RE json, I am certainly not an expert but I now can see what Perky has been suggesting for a while in terms of speed, load and versatility. 
Logged

Success consists of going from failure to failure without loss of enthusiasm - Winston Churchill
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #6 on: December 15, 2008, 09:23:26 PM »

JA -

You will experience difficulties with the XMLHTTPRequest that you'll need to code around, which is why I put together the all-in-one class. Your code is fine as a starter, but I'd humbly suggest that my class might make things a little easier for you, allowing you to get to the meat of your goal, rather than dick about with the intricacies of the requestor.

Here is an example of using it:

Code:
ajaxReq = new ajaxRequestor();
ajaxReq.url = 'ajaxHandler.php';
ajaxReq.postParam('aparam', 'hello');
ajaxReq.postParam('another', 'world');
ajaxReq.onSuccess = handleResponse;
ajaxReq.execute();

function handleResponse(sender)
{
alert(sender.lastResponse);
// or HTML Style: document.getElementById('anElement').innerHTML = sender.lastResponse;
// or JSON Style: var myArray = eval('(' + sender.lastResponse + ')');
}

In this case, I've created an instance of the requester, set the url at the server (with the handling routines) to 'ajaxHandler.php' - added two POST parameters to the request, set the response handler to a function (this is arguably the most important feature) and sent it off. The handling function receives exactly one parameter - an instance of the object itself. the lastResponse property contains what was sent from the server.

My personal desire with the requester was to take the mechanics of AJAX out of the loop as quickly and thoroughly as possible - getting me back to simply generating and handling events. Clearly, I was not satisfied with simply using someone else's class and so I created my own ergo, it is inherently hypocritical for me to suggest that my class would be enough for you. But since the goal of someone like you (as I know you) is much more the business result of an application rather than fascination with the gorgeous efficiency of something you crafted yourself, perhaps this hypocrisy could be overlooked.

Note that using this class (as with just about all AJAX methods) the content of the transmission is immaterial - it is brought in and evaluated by you for its ultimate purpose.

Just
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
jairez
Expert
****
Offline Offline

Posts: 164


JTFC


View Profile
« Reply #7 on: December 15, 2008, 10:57:18 PM »

Ok ... this is good eats!  A couple of questions here ...

1. how do the postParams present themselves to ajaxHandler.php?  (post vars? gets? array?)
2. how many postParams can I pass?
3. I assume the "sender" parm on handleResponse() is an object ... but where did it come from?
4. the lastResponse item ... I assume that's whatever is passed back from ajaxHandler.php, right?  Can it be anything?  Is there something that it SHOULD be?
5. do I need to do something to the object when I'm done with it?  (thought I read sending a close header somewhere ...)

Quote
But since the goal of someone like you (as I know you) is much more the business result of an application
Oh ... you know me too well  Wink  Some would say "it's an edged tool who's historical value to our society knows no bounds, save that of building a civilization." 

To me, "it's a fuckin' shovel."

Thanks, Hoss!

    - ja
 
Logged

Spontaneity has it's time and place.  [Sluggo, 1990-ish]
jairez
Expert
****
Offline Offline

Posts: 164


JTFC


View Profile
« Reply #8 on: December 16, 2008, 10:09:52 AM »

... also, can you post a couple of short ajaxHandler.php examples that pass  a) pre-formatted html   b) an xml doc   c) some type of object (array?)

Sorry to be dense, and while I think I get what's happening here, I just want to be sure.

As ALWAYS ... much grass!

    - me
Logged

Spontaneity has it's time and place.  [Sluggo, 1990-ish]
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #9 on: December 16, 2008, 01:12:41 PM »

1. how do the postParams present themselves to ajaxHandler.php?  (post vars? gets? array?)
[obj].postParam(name, value) will present as a PHP value in the $_POST array.

So,
obj.postParam('firstName', 'Perkiset');
will show up as
$fName = $_POST['firstName'];
in PHP.

2. how many postParams can I pass?
I don't know that there's any hard numeric limit. Your server may stop you at a KByte or MByte size though, depending on how Apache and PHP are configured.

3. I assume the "sender" parm on handleResponse() is an object ... but where did it come from?
"sender" is a common parameter name for the object that "sent" the event. In this case, it is the ajaxRequestor itself. This might seem silly and redunant, but consider this: if you had more than one ajaxRequestors instantiated (let's say you were sending several different things concurrently back and forth to the server) and some of them made use of the same handling function, how would you know WHICH request the response is for? This allows the event function to say, "I've received a response and you need to handle it from THIS (sender) object."

4. the lastResponse item ... I assume that's whatever is passed back from ajaxHandler.php, right?  Can it be anything?  Is there something that it SHOULD be?
That is correct, the lastResponse property on an ajaxRequestor object contains the response we just received. It can be anything from "OK" to runable JavaScript to an encoded JSON string to an XML record to ready-to-display HTML. It should not EVER be completely blank. ALWAYS send at least *something* back from the server. What you send back and forth really depends, again, on the application. Here are a couple thoughts:
  • If you are sending a simple "update notification" up to the server then just send back OK. You can even do something as simple as this, which is a handy way to handle simple notification ajax calls:
Code:
ajaxReq.postParam('fname', 'Perk');
ajaxReq.postParam('lname', 'Iset');
ajaxReq.onSuccess = function(sender) { if (sender.lastResponse != 'OK') alert(sender.lastResponse); }
ajaxReq.execute();
    ... note how here I do not even "point" to a function, I've created one on the fly in the code. This handler will essentially stay quiet UNLESS there's a problem or the message from the server is NOT "OK".[/li]
  • If you are integrating with someone else's code, then XML might be the way to go. There is an XML parser in the Javascript code repository here that I wrote just for that purpose. If you do not have a requirement to go XML, then I'd personally stay away from it, because you add the overhead of creating a record, extra transmission time and the time to parse the record on the client side. It's a bit heavy for this kind of interaction unless it's a requirement.
  • You could send back either Javascript or JSON encoded strings to be eval'd at the client. This is a handy way to go particularly if the server might use this ajax call as a redirection or something. So the response could either be a JSON encoded array (which will decode nicely into a JS array) or something like "top.location='/showError.php?message=Youre+Stewed+Butwad';"; in which case the eval'd JS would cause the client to leave the current page and move to another.
  • In cases where I want something pretty complicated displayed on the screen, I'll often send read-to-display HTML. Then my code might look something more like this:
Code:
ajaxReq.postParam('request', 'retrieveData');
ajaxReq.postParam('type', 'contactRecord');
ajaxReq.postParam('contactID', 12345);
ajaxReq.onSuccess = function(sender) { document.getElementById('dataDiv').innerHTML = sender.lastResponse; }

5. do I need to do something to the object when I'm done with it?  (thought I read sending a close header somewhere ...)
Nope. As soon as your site moves to another page, garbage collection will be handled and it will disappear. You may reuse it as many times as you want during a single page display. I have complete web applications that are literally, a single web page with a boatload of requestors asking/receiving data like crazy things. It's pretty cool.

Hope that helps!
« Last Edit: December 16, 2008, 01:15:37 PM by perkiset » Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #10 on: December 16, 2008, 01:39:46 PM »

... also, can you post a couple of short ajaxHandler.php examples that pass  a) pre-formatted html   b) an xml doc   c) some type of object (array?)

Gotta scoot, but this ought to give you some stuff to chew on. Note that I've purposely coded in different idioms with almost every phrase, just so that you can see a few different ways things can be done. Please note also that I typed this directly into the form and have not checked for syntax, but it looks OK.

Web page stuff:
Code:
<html>
<head>
<style>
#resultBox {
height: 300px;
width: 500px;
margin: 0 auto;
margin-top: 20px;
border-color: black;
border-style: solid;
border-width: 1px 2px 2px 1px;
background-color: #a0a0a0;
}
#selectType {
margin-right: 20px;
}
</style>
</head>
<body>

<div style="text-align: center">
<select id="selectType">
<option value="0">Simple Update</option>
<option value="1">JSON Array</option>
<option value="2">Javascript Redirect</option>
<option value="3">Preformatted HTML</option>
</select>
<input id="testbutton" type="button" value="Test" onClick="test()">
</div>

<div id="resultBox" style="">&nbsp;</div>

<script>
req = new ajaxRequestor();
req.url = '/handler.php';

resArr = new Array();

function test()
{
var target = document.getElementById('selectType');
var which = target.options[target.selectedIndex].value;
req.postParam('request', which);
switch(which)
{
case 0:
// This option will hide the test button..
hideButton();
req.onSuccess = function(sender) { showButton(); }
break;

case 1:
// This one too.
hideButton();
req.onSuccess = handleJSON;
break;

case 2:
req.onSuccess = function() {};
break;

case 3:
req.onSuccess = function(sender) { document.getElementById('resultBox').innerHTML = sender.lastResponse;
break;
}
req.execute();
}
function hideButton()
{
document.getElementById('testbutton').style.display = 'none';
}
function showButton()
{
document.getElementById('testbutton').style.display = 'block';
}
function handleJSON(sender)
{
showButton();
try {
resArr = eval('(' + sender.lastResponse + ')');
// At this point, resArr now matches the array sent from the PHP handler
} catch(e) {
alert('Result from server was not valid JSON code. Response was: ' + sender.lastResponse);
}
}
</script>
</body></html>

And over at the server, handler.php:
Code:
<?php
$reqType 
$_POST['request'] - 0;
switch(
$reqType)
{
case 0: die('OK');

case 1
$newArr['a'] = 1234;
$newArr['b'] = 2345;
$newArr['c'] = 3456;
$arrStr json_encode($newArr);
echo $arrStr;
break;

case 2:
echo "top.location='www.google.com';";
exit;

case 3:
echo <<<HTML
<center>
<h1>Hello World!</h1>
<h3>Four score and seven years ago, our fathers brought forth<br>
to this country - a new nation - conceived in liberty and dedicated<br>
to the proposition that all men are created equal.<br><br>

Or something like that.
</h3>
HTML;
break;
}

?>


« Last Edit: December 16, 2008, 04:56:52 PM by perkiset » Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
jairez
Expert
****
Offline Offline

Posts: 164


JTFC


View Profile
« Reply #11 on: December 16, 2008, 04:05:16 PM »

Dude ... this is freakin' SWEET!   Praise Praise Praise

Let me play with this and I'll get back to you on it.  Very VERY much appreciated!  Thank you!

    - ja
Logged

Spontaneity has it's time and place.  [Sluggo, 1990-ish]
jairez
Expert
****
Offline Offline

Posts: 164


JTFC


View Profile
« Reply #12 on: December 16, 2008, 05:22:28 PM »

OK ... I can't get this to work without rem'ing out ...

Code:
req.onSuccess = function(sender) { document.getElementById('resultBox').innerHTML = sender.lastResponse;

... and then, an alert box comes up saying ...

Quote
ajaxRequestor successfully returned from a request - but there is no handler assigned to receive it

Sorry ... I feel like an ungrateful buzzkill.    Embarrassed

Thoughts?  Suggestions? 

Thanks again.

    - ja
Logged

Spontaneity has it's time and place.  [Sluggo, 1990-ish]
perkiset
Olde World Hacker
Administrator
Lifer
*****
Offline Offline

Posts: 10096



View Profile
« Reply #13 on: December 16, 2008, 05:23:42 PM »

I missed the closing curly brace on the end of that line:

req.onSuccess = function(sender) { document.getElementById('resultBox').innerHTML = sender.lastResponse; }

try that lemmee know...
Logged

It is now believed, that after having lived in one compound with 3 wives and never leaving the house for 5 years, Bin Laden called the U.S. Navy Seals himself.
jairez
Expert
****
Offline Offline

Posts: 164


JTFC


View Profile
« Reply #14 on: December 16, 2008, 05:54:48 PM »

OMG ... I'm a total gomer for not catching that!   

OK ... but I'm still getting the alert box message.  I'm wondering if it's the flavor of the library I have?  I grabbed the last one posted where you fixed some IE bug.  Do I have the right .js file?


Logged

Spontaneity has it's time and place.  [Sluggo, 1990-ish]
Pages: [1] 2
  Print  
 
Jump to:  

Perkiset's Place Home   Best of The Cache   phpMyIDE: MySQL Stored Procedures, Functions & Triggers
Politics @ Perkiset's   Pinkhat's Perspective   
cache
mart
coder
programmers
ajax
php
javascript
Powered by MySQL Powered by PHP Powered by SMF 1.1.2 | SMF © 2006-2007, Simple Machines LLC
Seo4Smf v0.2 © Webmaster's Talks


Valid XHTML 1.0! Valid CSS!