Javascript Dynamically Communicate with PHP

Question

I'm creating a system where a Javascript script extracts data from a Sage extract, and stores it in a Javascript object (JSON I guess). I need to then upload the data to an SQL database via PHP.

I had thought of using an Iframe, by changing the src to the PHP pages URL, then pass GET variables to the page via the url. I was wondering if I could actually use tags to do this too? By creating new images and setting the src to the PHP pages URL (again, passing GET variables to it), then the PHP page could do the rest? I know the image wouldn't display anything, it doesn't need to. I just need a way to pass data to the PHP page.

Best practices?

1. Can you pass data to a server using an `` and a _GET URI_? Yes, but making the server talk back can require a lot of effort with encoding/decoding pixels. 2. Best practices? [_XMLHttpRequest_](https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest). You may need to consider _Origin_. — Paul S., Mar 25 '14 at 15:30
I don't need to fetch any data from the PHP page. Couldn't I just wait for the image to 'load'? Would this guarantee the PHP script had handled the data as it's server side? — Daniel Price, Mar 25 '14 at 15:33
You should look for _error_ as well as _load_. I still think _XMLHttpRequest_ is the better choice, writing an answer now.. — Paul S., Mar 25 '14 at 15:34

score 2 · Answer 1 · answered Mar 25 '14 at 15:37

The modern way of using JavaScript to communicate with a server is XMLHttpRequest. By default it is asynchronous and does give you the option to change this, though synchronous requests may be considered bad practice.

Here is a basic example

function sendObject(object, uri, callback) {
    var xhr = new XMLHttpRequest(),
        data = new FormData();
    data.append('object', JSON.stringify(object));
    if (callback) xhr.addEventListener('load', callback);
    xhr.open('POST', uri);
    xhr.send(data);
}
// ex. usage
sendObject(
    {foo: "bar"},
    "/somepage.php",
    function () {console.log('completed with code:', this.status)}
);

Using a FormData saves you a little time, too. If you can't expect it to be available, simply do

postData = encodeURIComponent(key) + '=' + encodeURIComponent(value) + '&' + etc;

I forgot to mention, I wrote this as a _POST_ because a _GET_ is not really suited to sending _JSON_, it's more for flags/primitive data. — Paul S., Mar 25 '14 at 15:47
This is a great answer, but if we're being totally honest AJAX is one of the few places where I really do say use jQuery. It makes AJAX so much easier and robust. — Nick Chapman, Mar 25 '14 at 16:09

score 0 · Answer 2 · edited May 23 '17 at 12:08

As the two other answer have said, for an HTML page with Javascript to communicate with the server, a PHP page, you would need to use XMLHttpRequest, aka AJAX. Paul S.'s answer is the best answer with respect to how to directly use XMLHttpRequest with Javascript.

However, one thing to keep in mind is that if you have to support older browsers, especially Internet Explorer version 9 or below, you'll run into quirks and it's advised to use a library for this. For the all purpose library, which includes not only AJAX methods but also form data handling and manipulating the DOM before, during, and after your request, your best bet is to use jQuery. For example, for an AJAX request to send data from a form:

$.ajax({
  url: 'http://www.example.com/data.php',
  data: $(form).serialize(),
  dataType: 'JSON', // JSON will be returned if possible
  type: 'POST'
}).then(function(data) { 
  ...
});

jQuery is great, but it is also a big library and if you only really want or need AJAX requests, it's better to find a smaller library or use a function that's known to work cross browser. It's also important to note that jQuery has strange handling of promises, which is the way a function would say it will return a value but not right away. These promises are necessary if you chain AJAX functions together without making your code contain many nested functions. Two of the most well known promise libraries are rsvp.js and q.

Javascript Dynamically Communicate with PHP

2 Answers2