Getting Started With jQuery - Advanced Ajax
Written by Ian Elliot   
Thursday, 04 November 2021
Article Index
Getting Started With jQuery - Advanced Ajax
Getting New Data
Encoding
Other Content Types
Other HTTP Methods

Other content types 

So far we have only considered sending form-urlencoded data because this is the easiest thing to do and it is versatile. However there are times when you might want to send data in other formats to the sever - usually either XML or JSON but custom formats are possible. This is easy to do at the client end, the problems usually arise at the server end because the data isn't automatically processed like form-urlencoded data. 

Notice that sending data in other formats only makes sense for Post and Put requests. The reason is that for Get the data is coded as part of the URL, the query string, and for this to work it has to be in the form-urlencoded format. 

All you have to do to send data in a different format is to change the Content-Type header sent to the sever.

XML

For example, to send XML data you could use:

options.contentType="text/xml";

This changes the default Content-Type header from

Content-Type: application/x-www-form-urlencoded

to

Content-Type: text/xml

The header is sent to the server with the request but nothing else changes at the client end of the request. That is if you provide the data as anything other than a String jQuery will process it to produce form-urlencoded data. This probably isn't what you want and so it makes sense to turn off processing using 

options.processData=false;   

However in most cases the data to be sent will be in a String and jQuery doesn't bother making an attempt to convert it. That is no matter what the Content-Type header is jQuery just sends the String as the data payload in the body of the request. The string is converted to a stream of bytes in UTF-8 code and in nearly all cases the server side will convert the UTF-8 bytes into a string that is native to the framework. That is on the server side what ever data is sent as a String is received as a string. 

For example suppose we want to send the following XML stored in a String to the server:

cdata="\<\?xml version=\"1.0\" \?\>";
cdata+="<Books>";
cdata+="<Title>Life of Pi</Title>";
cdata+="<Author>Yann Martel</Author >";
cdata+="</Books>";

Notice the need to escape some of the characters in the first string.

This can be sent to the server using:

var options={};
options.url="process.php";
options.method="post";
options.data=cdata;
options.contentType="text/xml";

$.ajax(options).then(
function(data){
                      console.log(data);
                     });

This much is easy but how to handle the data on the server side is more tricky and depends on what is being used to process it. The key fact is that at the very least you can expect the string to be recoverable from the raw Ajax data.

In PHP for example you can read the string 

$xml = file_get_contents('php://input');
echo($xml);

and the string:

<?xml version="1.0" ?><Books><Title>Life of Pi</Title><Author>Yann Martel</Author ></Books>

will be inserted into the page. 

Of course PHP has facilities for working with XML so you could convert the string into an XMLelement:

$xml = file_get_contents('php://input');
$xmlData = simplexml_load_string($xml);

echo($xmlData->Title);

The $xmlData object has properties corresponding to the XML tags. 

JSON

Working with JSON is arguably easier because both JavaScript and PHP have good support for it. 

First you need to convert your JSON to a string:

cdata=JSON.stringify({first:"ian",last:"elliot"});

Now you can send it in the same way as the XML was sent by changing the ContentType header:

var options={};
options.url="process.php";
options.method="post";
options.data=cdata;
options.contentType="application/json";
$.ajax(options).then(

  function(data){
  console.log(data);
 });

As before the data is sent unmodified and the server receives it in the usual way. In PHP you have to process the received string to a suitable object.

For example:

$json = json_decode(
               file_get_contents('php://input'));
echo($json->first);

sends "Ian" back to the client. 

smallcoverjQuery



Last Updated ( Thursday, 05 May 2022 )