Example of a simple method to implement ajax in native JS-JS Tutorial-php.cn

Example of a simple method to implement ajax in native JS

高洛峰

Release： 2016-12-03 15:55:32

Original

1152 people have browsed it

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>

Copy after login

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>

Copy after login

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);

Copy after login

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);

Copy after login

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!";
?>

Copy after login

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.