SoFunction
Updated on 2025-03-01

Example of ajax method that simple implementation in native JS

This article describes the simple implementation of ajax by native JS. Share it for your reference, as follows:

HTML part:

<body>
<input type="button" value="Ajax Submission" onclick="Ajax();" />
<div  ></div>
</body>

There is an input button here. Clicking will trigger the click event, and the click event calls the Ajax() method.

JS part:

<script language="javascript" type="text/javascript">
//Use this function to obtain information asynchronouslyfunction Ajax(){ 
  var xmlHttpReq = null;  //Declare an empty object to load XMLHttpRequest  if (){//IE5 IE6 introduces XMLHttpRequest in ActiveXObject    xmlHttpReq = new ActiveXObject("");
  } 
  else if (){//The browser XMLHttpRequest except IE5 IE6 is a child object of window    xmlHttpReq = new XMLHttpRequest();//Instantiate an XMLHttpRequest  }
  if(xmlHttpReq != null){  //If the object is instantiated successfully    ("GET","",true);  //Call open() method and use asynchronous method    =RequestCallBack; //Set the callback function    (null);  //Because you use the get method to submit, you can use the null parameter to call  }
  function RequestCallBack(){// Once the readyState value changes, this function will be called    if( == 4){
        if( == 200){
          // Assign the value to the element with ID resText          ("resText").innerHTML = ;
        }
    }
  }
}
</script>

Ajax is divided into about four steps, creating an Ajax object, using the open() method to secretly run to the server to obtain data, and then perform corresponding processing after success. Just use the GET method to write the parameters to be submitted into the url parameters of the open method. At this time, the parameter of the send method is null.

For example, GET method:

var url = "?user=XXX&pwd=XXX";
("GET",url,true);
(null);

For example, POST method:

("POST","",true);
("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
("user="+username+"&pwd="+password);

If you need to pass parameters in send, setRequestHeder is required

It should be noted that according to the different submission methods, the two submission methods call the doGet method and doPost method in the background respectively.

PHP section:

<?php
  echo "Hello Ajax!";
?>

After Ajax obtains PHP data, it will secretly place the data into the corresponding div layer. This click event did not refresh the page, so it secretly obtained the server-side data. The server-side data can also be read from the database. After obtaining the data, Ajax can also perform some actions to process it.

Everything is silent.

For more information about JavaScript, readers who are interested in reading this site's special topic:Summary of ajax operation skills in JavaScript》、《Summary of JavaScript switching effects and techniques》、《Summary of JavaScript search algorithm skills》、《Summary of JavaScript animation special effects and techniques》、《Summary of JavaScript Errors and Debugging Skills》、《Summary of JavaScript data structure and algorithm techniques》、《JavaScript traversal algorithm and skills summary"and"Summary of JavaScript mathematical operations usage》

I hope this article will be helpful to everyone's JavaScript programming.