Calling PHP functions in Javascript using AJAX

Question

I have a javascript file and I want to call a function on the php server side and return the result back to the client side using ajax, but I am not sure how to make the request to the specific php function.

Here are my files:

The javascript file basically retrieves the username from the html form, and I want to send that username to php and check against the database for availability.

In something.js:

function check_availability()
{
 var username = $.trim(document.getElementById('usernameField').value);
 var xmlhttp= new XMLHttpRequest();
 // not sure how to make the request here to check_availability() under php
}

The PHP file will just check the username thats being passed from the js file against the database, if its available return true, else false.

In something.php:

 class Something_Model {
 private $data;
 private $table;
 public function __construct() {
 $this->data = new udata(DBSERVER, DBUSERNAME, DBPASSWORD, DBNAME);
 }
 # check for username availability
 public function check_availability()
 {
 // make the check here, but needs to retrieve username from js file
 echo "here";
 }
}

So, inside the Something_Model class, I want to make the check_availability() call from javascript, can someone give me an example to make this ajax call? Also, how do I return the result back to the javascript? Do I need to encode it as a JSON obj?

Thanks a lot.

Answer 1

You can't call a function in PHP directly - but you can call a PHP page that in turn can call the PHP function. For example...

service.php

include_once('something.php');
$model = new Something_Model();
$model->check_availability();

something.js

function check_availability() {
 var request = new XMLHttpRequest();
 request.open('GET', 'http://yoursite/service.php', false);
 request.send();
 if (request.status === 200) {
 alert(request.responseText);
 }
}

I have used a really simple example of an XMLHttpRequest - this example actually blocks while the request is made. In reality you may want to use a callback and allow it to run asynchronously but I wanted to keep the answer as short as possible.

Answer 2

You can't call a PHP function from client side JavaScript.

You can make an HTTP request to a URL.

That URL can be handled by PHP.

To call a function, it can be a PHP script that does nothing except define functions and call a function function. (Or it could check the query string and call a function based on the value of a pice of data in it, etc).

You can return the data in any format you like. JSON is a sensible format if you want to return structured data.

Answer 3

What you are trying to do is called "REST web service". In layman terms is a web page whose result is not really meant to be displayed as a web page, but to be retrieved programmatically, processed and visualised mostly by using technologies such as AJAX/javascript.

Unless your return type is very plain (in which case you can just return a string of text) if your result data type is complex the best way to make it parseable with javascript is to encode is as JSON object - so it can be saved as a variable which then allows you to retieve its components - look at http://php.net/manual/en/ref.json.php

Answer 4

you may use phery library as @Rhs pointed out http://phery-php-ajax.net

Your code would look like this:

Phery::instance()->set(array(
 'check_availability' => array(new Something_Model, 'check_availability');
))->process();

Then you'll call it from your code

// rename put attribute name="username" on your field
var local_phery = $('#usernameField').phery();
local_phery.make('check_availability').bind('phery:json', function(event,data){
 // deal with username suggestions
});
local_phery.remote(); // call the check_availability PHP function

In your class, you'll have to do your alert/DOM manipulation

class Something_Model {
private $data;
private $table;
public function __construct() {
 $this->data = new udata(DBSERVER, DBUSERNAME, DBPASSWORD, DBNAME);
}
# check for username availability
public function check_availability($data)
{
 $r = new PheryResponse;
 if ($this->get(array('username'=> $data['username']))){
 $r->alert('Not available!');
 // Or something like using colorbox library, would be like $.colorbox({html: ''});
 $r->jquery()->colorbox(array('html' => 'Not available!'));
 $r->json($suggestions); // $suggestions would be an array with username suggestions
 } else {
 $r->alert('Available!');
 }
 // make the check here, but needs to retrieve username from js file
 return $r;
}
}