March 14, 2012

Sending XML through AJAX

Question by sebbl.sche

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 by sebbl.sche

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 by Starx

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');
   }
});

Author: Nabin Nepal (Starx)

Hello, I am Nabin Nepal and you can call me Starx. This is my blog where write about my life and my involvements. I am a Software Developer, A Cyclist and a Realist. I hope you will find my blog interesting. Follow me on Google+

...

Please fill the form - I will response as fast as I can!