JavaScript, Python

How to call Python function from JavaScript?

Well, there ain’t any special mechanism to do it really. In order to make this happen, all you need to understand is client server mechanism. JavaScript is client side, whereas Python is server side. That is, JavaScript is executed on client’s browser, and Python is executed on the server. Therefore, JavaScript cannot call Python function directly. All JavaScript can do is issue HTTP requests to server, and then server can handle those HTTP requests.

The following code snippet sends HTTP request to server:

 var xmlhttp;
    if (window.XMLHttpRequest) {
        // IE7+, Firefox, Chrome, Opera, Safari support XMLHttpRequest object
        xmlhttp = new XMLHttpRequest();
    } else {
        // IE6, IE5 doesn't support XMLHttpRequest object
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET","/servlet/Welcome.do?firstName=Devesh&lastName=Sharma",true);
    xmlhttp.send();

Now, on the server side you need to handle this request. That is, in Python file you need to catch these information being sent so that you can use it to call appropriate function. This is how to grab the sent parameters in Python file:

request.getParameter("firstName")
request.getParameter("lastName")
JavaScript

How to send an AJAX HTTP POST request to server

We send an AJAX HTTP request to server using XMLHttpRequest object. The XMLHttpRequest object can be used to send data to a server in scenarios where we want to update parts of a web page, without reloading the whole page.

All modern browsers like Firefox, Chrome, Safari, etc have built-in XMLHttpRequest object. However, some old versions of IE doesn’t support XMLHttpRequest object. If the browser doesn’t support XMLHttpRequest object, we use ActiveXObject to send request to the server.

The following code snippet sends HTTP POST request to server:

    var xmlhttp;
    if (window.XMLHttpRequest) {
        // IE7+, Firefox, Chrome, Opera, Safari support XMLHttpRequest object
        xmlhttp = new XMLHttpRequest();
    } else {
        // IE6, IE5 doesn't support XMLHttpRequest object
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("POST","/servlet/Welcome.do",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("username=tester&password=123");

We use open() and send() methods of the XMLHttpRequest object to send a request to a server.

The above example send POST request to a server. POST is always more secure and robust than GET. Moreover, using POST request you can send a large amount of data because POST doesn’t have any size limitations. However, if you are sending some trivial information to server you can use GET request. Please refer this post to learn how to send GET request to server using AJAX.

JavaScript

How to send an AJAX HTTP GET request to server

We send an AJAX HTTP request to server using XMLHttpRequest object. The XMLHttpRequest object can be used to send data to a server in scenarios where we want to update parts of a web page, without reloading the whole page.

All modern browsers like Firefox, Chrome, Safari, etc have built-in XMLHttpRequest object. However, some old versions of IE doesn’t support XMLHttpRequest object. If the browser doesn’t support XMLHttpRequest object, we use ActiveXObject to send request to the server.

The following code snippet sends HTTP GET request to server:

    var xmlhttp;
    if (window.XMLHttpRequest) {
        // IE7+, Firefox, Chrome, Opera, Safari support XMLHttpRequest object
        xmlhttp = new XMLHttpRequest();
    } else {
        // IE6, IE5 doesn't support XMLHttpRequest object
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.open("GET","/servlet/Welcome.do?firstName=Devesh&lastName=Sharma",true);
    xmlhttp.send();

We use open() and send() methods of the XMLHttpRequest object to send a request to a server.

The above example send GET request to a server. GET is always simpler and faster than POST. However, there may be instances where you may want to use POST request:

1. Use POST request when you are sending a large amount of data because POST doesn’t have any size limitations.
2. Use POST request when you are sending sensitive information like username and password because POST is more secure and robust than GET.

Please refer this post to learn how to send POST request to server using AJAX.