Home > Article > Web Front-end > Example of a simple method to implement ajax in native JS

Example of a simple method to implement ajax in native JS

高洛峰Original: 2016-12-03 15:55:321128browse

The example in this article describes how to simply implement ajax in native JS. Share it with everyone for your reference, the details are as follows:

HTML part:

<body>
<input type="button" value="Ajax提交" onclick="Ajax();" />
<div id="resText" ></div>
</body>

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

JS part:

<script language="javascript" type="text/javascript">
//通过这个函数来异步获取信息
function Ajax(){
  var xmlHttpReq = null;  //声明一个空对象用来装入XMLHttpRequest
  if (window.ActiveXObject){//IE5 IE6是以ActiveXObject的方式引入XMLHttpRequest的
    xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
  }
  else if (window.XMLHttpRequest){//除IE5 IE6 以外的浏览器XMLHttpRequest是window的子对象
    xmlHttpReq = new XMLHttpRequest();//实例化一个XMLHttpRequest
  }
  if(xmlHttpReq != null){  //如果对象实例化成功
    xmlHttpReq.open("GET","test.php",true);  //调用open()方法并采用异步方式
    xmlHttpReq.onreadystatechange=RequestCallBack; //设置回调函数
    xmlHttpReq.send(null);  //因为使用get方式提交，所以可以使用null参调用
  }
  function RequestCallBack(){//一旦readyState值改变，将会调用这个函数
    if(xmlHttpReq.readyState == 4){
        if(xmlHttpReq.status == 200){
          //将xmlHttpReq.responseText的值赋给ID为 resText 的元素
          document.getElementById("resText").innerHTML = xmlHttpReq.responseText;
        }
    }
  }
}
</script>

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

For example, GET method:

var url = "login.php?user=XXX&pwd=XXX";
xmlHttpRequest.open("GET",url,true);
xmlHttpRequset.send(null);

For example, POST method:

xmlHttpRequest.open("POST","login.php",true);
xmlHttpRequest.setRequestHeder("Content-Type","application/x-www-form-urlencoded;charset=UTF-8");
xmlHttpRequest.send("user="+username+"&pwd="+password);

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

It should be noted that there are two types depending on the submission method. The submission method calls the background doGet method and doPost method respectively.

PHP part:

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

After Ajax obtains the PHP data, it will secretly put the data into the corresponding div layer. This click event does not cause the page to refresh, but secretly obtains the server-side data. The server-side data can also be read from the database. After obtaining the data, Ajax can also perform some action processing.

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：A brief discussion on the various definition methods and differences of js functionsNext article：A brief discussion on the various definition methods and differences of js functions

See more

Example of a simple method to implement ajax in native JS

Related articles