Sending XML through AJAX - php

Question

I create a xml document in jQuery as following
var xmlDocument = $('<xml/>');
var foo = $('<foo/>');
var bar = $('<bar/>');
foo.append(bar);
xmlDocument.append(foo);
and try to forwards it to the server.
$.ajax({
url : 'js/foobar.php',
type : 'POST',
precessData : false,
contentType : 'text/xml',
data : xmlDocument,
sucess : function( data ) {
alert('success');
},
error : function() {
alert('failed to send ajax request');
},
complete : function() {
alert('ajax request completed');
}
});
Even if the server echos a 'foo' only, I get the alert('ajax request completed') and not the alert('success'). What am I doing wrong? Is it the way I'm creating the xml document or is it the way I forward it to the server?
An ajax request without a xml document works fine and I get the 'foo' back.
UPDATE #1
After changing precessData to processData and sucess to success i get the failed to send ajax request dialog.
When I change the data parameter in the ajax method to
$.ajax({
...
data : {
data: xmlDocument
},
...
});
I also get the failed to send ajax request dialog.
The code on the server side should be fine cause it's only
<?php
echo 'foo';
?>
UPDATE #2
I converted my string as in AndreasAL's answer
// Convert to string instead of DOM Elements
xmlDocument = $("<wrap/>").append(xmlDocument).html();
// Url encode the string
xmlDocument = encodeURIComponent(xmlDocument);
but i still get the same dialog box (failed to send the ajax request). So i thought the error could be in my xml document and overwrote my xml document by using the code snipplet from AndreasAL's answer.
xmlDocument = $('<xml/>');
foo = $('<foo/>').appendTo(xmlDocument);
bar = $('<bar/>').appendTo(foo);
Still the same behaviour.
So I checked my xml document again and printed it in a dialog box and it looks fine.
I'm running out of ideas where the error could be ...

Answer 1

EDIT:
You have a typo - it's not precessData it's processData
$.ajax({
url : 'js/foobar.php',
type : 'POST',
precessData : false, // change to processData
and again in sucess which should be success
Try:
var xmlDocument = $('<xml/>'),
foo = $('<foo/>').appendTo(xmlDocument),
bar = $('<bar/>').appendTo(foo);
// Convert to string instead of DOM Elements
xmlDocument = $("<wrap/>").append(xmlDocument).html();
// Url encode the string
xmlDocument = encodeURIComponent(xmlDocument);
$.ajax({
url : 'js/foobar.php',
type : 'POST',
processData : false,
contentType : 'text/xml',
data : xmlDocument,
success : function( data ) {
alert('success');
},
error : function() {
alert('failed to send ajax request');
},
complete : function() {
alert('ajax request completed');
}
});

Answer 2

You are using jQuery Object through the entire process.
Write your XML like this, concatenating the string together. Not making them as DOM Object.
var xmlDocument = '<xml/>';
xmlDocument += '<foo/>';
xmlDocument += '<bar/>';
Then post it, like this
$.ajax({
url : 'js/foobar.php',
type : 'POST',
precessData : false,
contentType : 'text/xml',
data : {
data: xmlDocument //wrapped inside curly braces
},
// Here is your spelling mistake
success : function( data ) {
alert('success');
},
error : function() {
alert('failed to send ajax request');
},
complete : function() {
alert('ajax request completed');
}
});

Answer 3

Finally, I decided to convert the xml document and send it as a string to the server.
$xmlString = $(xmlDocument).html();
Due to the fact, that I only have to store the recieved data, it makes no difference if I'm revieving it as string or xml.
I only had to change my ajax request at everything works fine now.
$.ajax({
url : 'js/foobar.php',
type : 'POST',
data : 'data=' + xmlString,
success : function( data ) {
alert(data);
},
error : function() {
alert('failed to send ajax request');
},
complete : function() {
alert('ajax request completed');
}
});

Answer 4

I think you have a bug on your code on success
$.ajax({
url : 'js/foobar.php',
type : 'POST',
precessData : false,
contentType : 'text/xml',
data : xmlDocument,
success : function( data ) {
alert('success');
},
error : function() {
alert('failed to send ajax request');
},
complete : function() {
alert('ajax request completed');
}
});

Answer 5

use $.parseXML to manipulate XML , you are treating the xml as if it is html
http://api.jquery.com/jQuery.parseXML/

Answer 6

use this:
data : { xml: xmlDocument }
Post values need a key