Example of using JavaScript AJAX XmlHttpRequest with Django JsonResponse view

Forget Axios or any other third-party JavaScript library pertaining to API calling, the purpose of this article is to explain how to utilize the basic XmlHttpRequest with your Django project.

  1. Begin by setting up your Django project:

        mkdir ajax_django_example
        cd ajax_django_example/
        virtualenv env
        source env/bin/activate
        python --version
        pip install django
        django-admin startproject example
        cd example
        python manage.py startapp hello
        python manage.py runserver
        
  2. Populate your views.py file:

        # hello/views.py
        from django.http import HttpResponse
        from django.shortcuts import render
        from django.http import JsonResponse
    
    
        def index(request):
            return render(request, 'hello/index.html', {
    
            })
    
        def get_version(request):
            return JsonResponse({'version': '0.1.0-beta'})
    
        def post_add(request):
            a = request.POST.get("a")
            b = request.POST.get("b")
    
            a = float(a)
            b = float(b)
            c = a + b
            return JsonResponse({'result': c})
    
        # Would you like to know more?
        # https://docs.djangoproject.com/en/2.2/ref/request-response/#jsonresponse-objects
        
  3. Set the urls.py file:

        # hello/urls.py
        from django.urls import path
    
        from . import views
    
        urlpatterns = [
            path('', views.index, name='index'),
            path('version', views.get_version, name='version'),
            path('add', views.post_add, name='add'),
        ]
        
  4. Set the project’s settings.py file:

        # example/settings.py
    
        # ...
    
        INSTALLED_APPS = [
            'hello.apps.HelloConfig',
            'django.contrib.admin',
            'django.contrib.auth',
            'django.contrib.contenttypes',
            'django.contrib.sessions',
            'django.contrib.messages',
            'django.contrib.staticfiles',
        ]
    
        MIDDLEWARE = [
            'django.middleware.security.SecurityMiddleware',
            'django.contrib.sessions.middleware.SessionMiddleware',
            'django.middleware.common.CommonMiddleware',
            # 'django.middleware.csrf.CsrfViewMiddleware',
            'django.contrib.auth.middleware.AuthenticationMiddleware',
            'django.contrib.messages.middleware.MessageMiddleware',
            'django.middleware.clickjacking.XFrameOptionsMiddleware',
        ]
    
        # ...
        
  5. Set the project’s urls.py file:

        # example/urls.py
        """example URL Configuration
    
        The `urlpatterns` list routes URLs to views. For more information please see:
        https://docs.djangoproject.com/en/2.2/topics/http/urls/
        Examples:
        Function views
            1. Add an import:  from my_app import views
            2. Add a URL to urlpatterns:  path('', views.home, name='home')
        Class-based views
            1. Add an import:  from other_app.views import Home
            2. Add a URL to urlpatterns:  path('', Home.as_view(), name='home')
        Including another URLconf
            1. Import the include() function: from django.urls import include, path
            2. Add a URL to urlpatterns:  path('blog/', include('blog.urls'))
        """
        from django.contrib import admin
        from django.urls import path, include
    
        urlpatterns = [
            path('admin/', admin.site.urls),
            path('', include('hello.urls')),
        ]
        
  6. Next step is the JavaScript portion.

        // hello/templates/hello/index.js
        function getVersion() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById('demoGet').innerHTML = this.responseText;
                }
            };
            xhttp.open('GET', 'version', true);
            xhttp.send();
        }
    
        function postAdd() {
            var xhttp = new XMLHttpRequest();
            xhttp.onreadystatechange = function() {
                if (this.readyState == 4 && this.status == 200) {
                    document.getElementById('demoPost').innerHTML = this.responseText;
                }
            };
            xhttp.open('POST', 'add', true);
            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhttp.send("a=1&b=2");
        }
    
        // Would you like to know more?
        // https://www.w3schools.com/js/js_ajax_intro.asp
        
    
  7. Continue

        <!-- hello/templates/hello/index.html -->
        <!DOCTYPE html>
        <html>
            <body>
                <h1>Using XMLHttpRequest Object and Django JsonResponse</h1>
                <h2>GET Example</h2>
    
                <p id="demoGet">Let AJAX change this text.</p>
    
                <button type="button" onclick="getVersion()">Run GET</button>
    
                <h2>POST Example</h2>
    
                <p id="demoPost">Let AJAX change this text.</p>
    
                <button type="button" onclick="postAdd()">Run POST</button>
    
    
                <script>
                    {% include "hello/index.js" %}
                </script>
    
            </body>
        </html>
        
  8. That’s it! Test it out the code and you should see it working.

Cover photo by Joan Gamell on Unsplash.