I’ve been working with PHP and jQuery AJAX quite a bit lately. Along with sending form data to PHP page through AJAX, I’ve written restful web services in PHP that receive data in JSON format.

In general when you are sending data through jQuery AJAX to PHP, you don’t have to specify a contentType. Depending on your type ‘GET’ or ‘POST’, PHP will nicely wrap your content into either the $_POST or $_GET global arrays. When you don’t specify a contentType the default contentType is taken as application/x-www-form-urlencoded; charset=UTF-8’.

Following is the request headers from an AJAX call without contentType specified,

GET /ajax-php/api.php?firstname=Abijeet&lastname=Patro HTTP/1.1 
Host: localhost:8081 
Connection: keep-alive 
Cache-Control: no-cache Pragma: no-cache 
Accept: */* 
X-Requested-With: XMLHttpRequest 
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36
Content-Type: application/x-www-form-urlencoded; charset=UTF-8
Referer:http://localhost:8081/ajax-php/index.php
Accept-Encoding: gzip,deflate,sdch 
Accept-Language: en-US,en;q=0.8,fr;q=0.6

To further test this, I set up the following PHP code on my server,

<?php
$get=$_GET;
$post=$_POST;
$app_json=json_decode(file_get_contents('php://input');
$response=array();
$response['GET']=$get;
$response['POST']=$post;
$response['JSON']=$app_json;
echo json_encode($response);
die();

The response that for the above request case was,

{
  "GET": {
    "firstname": "Abijeet",
    "lastname": "Patro"
  },
  "POST": [],
  "JSON": null
}

If we put the jQuery AJAX type property as ‘POST’ we will have the following request header,

POST /ajax-php/api.php HTTP/1.1 
Host: localhost:8081 
Connection: keep-alive 
Content-Length: 32 
Cache-Control: no-cache 
Pragma: no-cache 
Origin: http://localhost:8081
X-Requested-With: XMLHttpRequest 
Content-Type: application/x-www-form-urlencoded; 
charset=UTF-8 
Accept: */* 
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36 
Referer: http://localhost:8081/ajax-php/index.php
Accept-Encoding: gzip,deflate,sdch 
Accept-Language: en-US,en;q=0.8,fr;q=0.6

Nothing much changes. The action is specified as POST and the data is no longer a part of the request header. The response from the server is following,

{
  "GET": [],
  "POST": {
    "firstname": "Abijeet",
    "lastname": "Patro"
  },
  "JSON": null
}

Obviously, PHP has no issues parsing content of type – application/x-www-form-urlencoded; charset=UTF-8. As soon as it sees that contentType, it checks the action and packs the data nicely into either $_GET or $_POST.

Let’s now talk about JSON data. In general, restful web services accept data of type JSON. When sending data via JSON the contentType for jQuery AJAX is application/json; charset=UTF-8

This is the request header,

POST /ajax-php/api.php HTTP/1.1 
Host: localhost:8081 
Connection: keep-alive 
Content-Length: 42 
Cache-Control: no-cache 
Pragma: no-cache 
Origin: http://localhost:8081
X-Requested-With: XMLHttpRequest 
Content-Type: application/json; charset=UTF-8
Accept: */* 
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/36.0.1985.143 Safari/537.36 
Referer: http://localhost:8081/ajax-php/index.php
Accept-Encoding: gzip,deflate,sdch 
Accept-Language: en-US,en;q=0.8,fr;q=0.6

When PHP receives this data and looks at the content type, it’s not quite sure how to process it, so it leaves it alone. In this case the action – ‘POST’ or ‘GET’ doesn’t matter. You’ll notice that $_POST or $_GET both, are empty arrays. Now, it’s up to you to read this data and parse it.

<?php
$app_json=json_decode(file_get_contents('php://input'));

The code above, reads the data from PHP’s input stream. Since we have passed a JSON string, we decode it, which converts it to a PHP array and stores it in $app_json. If the data you send is not in a correct JSON format, $app_json will have false.

When we echo our response, we get the following on the client side,

{
  "GET": [],
  "POST": [],
  "JSON": {
    "firstname": "Abijeet",
    "lastname": "Patro"
  }
}

I set up a small project to illustrate what has been written here. You can find it over on my GitHub page