Home / javascript / PHP / Ajax without jQuery ?

Ajax without jQuery ?

Tuesday, June 30, 2020 ,
Ajax without jQuery

Ajax without jQuery

What Is AJAX?

AJAX stands for Asynchronous JavaScript And XML.

AJAX is a JavaScript method that is used to submit or fetch data from a web server without a page reload.

Ajax without jQuery 

we can use the XMLHttpRequest class with vanilla(pure) JavaScript to achieve the ajax functionality without jQuery.

Working  
First, we can create the object of XMLHttpRequest then we can add the onreadystatechange event listener and run the callback function of this event means when this event is fire then we can run the function and check the readyState property value if this value is 4 or XMLHttpRequest.Done and also check the value of the status property if this status is 200 then all good means no error.
We can use the open() method of XMLHttpRequest to define the type of method(POST or GET), URL, and  Asynchronous or Synchronous functionality.
We can use the send() method of XMLHttpRequest to run the execution of XMLHttpRequest object.

XMLHttpRequest readyState property value meaning -:
  • 0 => unset (Preparation).
  • 1 => run the open() method.
  • 2 => run the send() method.
  • 3 => loading (processing)
  • 4 => done (complete process)
open() method of XMLHttpRequest - : It takes the 3 parameters as an arguments.
  1. First, Argument => Type of method means GET or POST.
  2. Second, Argument => URL.
  3. Third, Argument => Type of execution flow in the form of boolean(true or false) when true means Asynchronous flow else(false) Synchronous flow.

Synchronous -: Step by Step flow of execution.
Asynchronous -: Parallel flow of execution. 

Example -: 
  • index.php
    • <html>
    • <head>
    • <title>
    • Ajax without jQuery
    • </title>
    • </head>
    • <body>
    • <form onsubmit="return myfunction()">
    • <input type="text" id="name" placeholder="enter your name"/>
    • <input type="number" id="age" placeholder="enter your age"/>
    • <button type="submit">Submit</button>
    • </form>
    • <div id="div1">
    • </div>
    • <script>
    • function myfunction() {
    • console.log("call");
    • var obj = new XMLHttpRequest();
    • obj.onreadystatechange =  () => {
    • if(obj.readyState ==4) {
    • if(obj.status==200) {
    • document.getElementById('div1').innerHTML = obj.responseText;
    • }
    • }
    • }
    • let name = document.getElementById('name').value;
    • let age = document.getElementById('age').value;
    • console.log(name + " "+ age);
    • obj.open('GET', 'insert.php?'+"name=" + name + "&age=" + age, true);
    • //obj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
    • obj.send();
    • return false;
    • }
    • </script>
    • </body>
    • </html>
  • insert.php
    • <?php

    • $name = $_REQUEST['name'];
    • $age = $_REQUEST['age'];

    • $con = mysqli_connect('localhost', 'root', '', 'testing');
    • if(!$con) 
    • echo 'db not established!..';
    • $q = "INSERT INTO `ajax`(`name`, `age`) VALUES ('$name', '$age')";
    • $run = mysqli_query($con, $q);
    • if($run) 
    • echo "insert data";
    • else 
    • echo "error";

    • ?>
  • Download Source Code
  • Direct Link Source Code

NOTE -: You can also read the data from the file using this method.

1 comment:

  1. dailamabieMarch 4, 2022 at 3:15 AM

    Betway Casino - The best online sports betting app in India
    Betway is one of the biggest names 과천 출장안마 in the online sports betting market. They are one of the biggest names 나주 출장안마 in the online sports 원주 출장샵 betting 충청남도 출장마사지 industry. 구리 출장샵 They offer a great

    ReplyDelete

Subscribe to: Post Comments ( Atom )