What is the right way for Searching functions in a Website with Javascript?

Question

Its known that interactions between Javascript and SQL-Databases are not very secure. But most Websites use it cause the Webside doesent reload to show matches in a search.

With PHP it isn't possible to change Page-Contents without a completely Page-Refreshing.

Witch is the right way to get Data from SQL with Javascript without security-neglects. Aspeccialy for a Searching function with directly matches in a list.

Answer 1

You can use 2 way to get data from db by using js;

1. Ajax:

function refresh() {
    $.ajax({
        url:"your url",
        method: "GET",
        data: your_params,
        success: function(response) {
            $("#specific_div_id").html(response);
        }
    });
}

You can do this within an interval like;

setInterval(refresh, 5000); 

in order to get content in every 5 sec.

2. Websockets

In AJAX, you are requesting in every 5 secs to get updated content from server. Think that, you are not getting content server pushes updated content to you. In other words, server notifies you on any updated data. You can have a look at Socket.io for an example implementation of websockets. When server notifies you, you can take data and put it related html area

Answer 2

As mention in the commentaries, the best way is to use AJAX, which is an acronym that stands for Asynchronous Javascript and XML. The last part, XML, is a bit misleading. It kept that name because that's what is was first use for. But AJAX can now be use to make HTTP request and interface with any language, including PHP.

Depending on the technology you are built on, there are several implementation available. Chances are you have jQuery installed already. In that case, jQuery Ajax, and particularly jQuery.get() would address your concerns.

If you are using a router on the backend, you can simply call a route, specifying it as the url, first argument of the function. Otherwise, you can directly call a file by using the relative path from the html page the javascript is embedded in. jQuery.get will return anything you echo within you server script. In other words, anything that is directly rendered on the page. You can use a callback catch the data returned and process it. Example :

$.get('/path/to/file.php', function (data) {
    console.log('Here is the data received from the server!', data)
    // Process data here
});