1. Sending requests with XMLHttpRequest objects

(1) get request

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("div").innerHTML=xmlhttp.responseText;

  }
}
xmlhttp.open("GET","forwifestudy/testforget.php?info=123",true);
xmlhttp.send();         

Note: Any browser except IE5 and IE6 can create an XHR object. In IE, XHR is implemented as an ActiveX object. In IE, objects are created as follows:

 var xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

After a new XHR object, the onreadystatechange function is used to monitor the changes of readyState attributes.
The readyState property table names the state of the object connection:
0: uninitialized, open has not been invoked;
1: The server connection has been established and open has been invoked.
2: The request has been accepted, that is to say, the head information has been received.
3: In request processing, that is to say, the responding body is received.
4: The request has been completed, and the response is ready, that is, the response has been completed.
After the request is successful, we can do some things, such as showing the corresponding data of the server. (ResponsseText is the corresponding data in the form of string, and responseXML is the corresponding data in the form of XML)

document.getElementById("div").innerHTML=xmlhttp.responseText;

get sends the request variable name and value written in the url, like this

xmlhttp.open("GET","forwifestudy/testforget.php?info=123",true);

(2) post request

var request=new XMLHttpRequest();
request.onreadystatechange=function(){
    if(request.readyState===4 &&request.status===200){                      
        document.getElementById("div").innerHTML=request.responseText;
    }
    else{                       
    }
}
request.open("POST","forwifestudy/testforpost.php",true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send("info=123");

Note: The data sent by the post request is not written in the url, but embedded in the body of the HTTP request. The following sentence must be between. open and. send

request.open("POST","forwifestudy/testforpost.php",true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send("info=123");

2. Send requests using JQuery's. get method and. post method

(1) get request

$.get("forwifestudy/testforget.php",{info:123},function(data){
//Callback function when the request succeeds
    alert(data);
});

(2) post request

$.post("forwifestudy/testforpost.php",{info:123},function(data,status){
alert("data"+data+"\n state"+status);

},"json");

Just like get requests, add data formats, such as "json"

2. Send requests using JQuery's $.ajax method

(1) get request

$.ajax({
    url:"forwifestudy/testforget.php?info=123",
    datatype:"json",
    type:"GET",
    success:function(e){alert(e);},
    error:function(e){alert("fail");}
});

Callback function in case of success and callback function in case of failure;

(2) post request

$.ajax({
url:"forwifestudy/testforpost.php",                 
datatype:"json",
type:"post",
data:{info:123},
success:function(e){  //Callback after success
    alert(e);
},
error:function(e){   //Callback after Failure
    alert(e);
}           });

The difference between the two ways of sending requests is that the location of variable names and values depends on the type (get or post)

Note: I send requests here without cross-domain (that is, I have this PHP file on my local server). If I want to achieve cross-domain purpose, I need to add two lines of code to the PHP file of that server to access the data on that server.

Write code slices here.