AJAX post or get server request

AJAX post or get server request:

XMLHttpRequest object is used to exchange data with the server.

If you want to send the request to the server, you need to use the open() and send() methods of the XMLHttpRequest object.

Properties	Description
##open(method,url,async)	Specifies the request type and URL And whether to handle the request asynchronously. (1).method: type of request; GET or POST. (2).url: The location of the file on the server. (3).async:true (asynchronous) or false (synchronous).
send(string)	Sends the request to the server. string: Only used for POST requests

1. The difference between get and post:

The get method may be faster and has strong applicability, but in many cases it is still necessary to use post.

The recommended scenarios for using the post method are as follows:

(1). It is not expected to use cached files (updating files or databases on the server).

(2). Send a large amount of data to the server (POST has no data limit).

(3). When sending user input containing unknown characters, POST is more stable and reliable than GET.

2. Get method:

First look at a get method code:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("show").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET", "demo/ajax/net/demo.aspx", true);
  xmlhttp.send();
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script>
</head>
<body>
<div>
  <div id="show"></div>
  <input id="bt" type="button" value="查看效果"/>
</div>
</body>
</html>

In the above code, click The button can get the current date and time of the server. The C# code is as follows:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace ajax
{
    public partial class demo : System.Web.UI.Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            Response.Write(System.DateTime.Now);
        }
    }
}

Special note: The above method may read data from the cache in the IE browser, which means that the time will be obtained normally when the button is clicked for the first time. After the date, subsequent clicks will have no effect. There is no such problem in browsers such as Google or Firefox. The solution is as follows:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta name="author" content="http://www.softwhy.com/" /> 
<title>php中文网</title> 
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
      xmlhttp = new XMLHttpRequest();
   }
   else {
     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   }
   xmlhttp.onreadystatechange = function () {
     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
       document.getElementById("show").innerHTML = xmlhttp.responseText;
     }
   }
   xmlhttp.open("GET", "demo/ajax/net/demo.aspx?rnd=" + Math.random(), true);
   xmlhttp.send();
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script> 
</head> 
<body> 
<div> 
  <div id="show"></div> 
  <input id="bt" type="button" value="查看效果"/> 
</div> 
</body> 
</html>

The solution is very simple, which is to add a random number after the url. That's it, so that each request is considered a new URL, so it won't be cached.

You can also use the GET method to send information. You can send information through url. The code is as follows:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta name="author" content="http://www.php.cn/" /> 
<title>php中文网</title> 
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("show").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET", "demo/ajax/net/demoPara.aspx?webName="+escape("php中文网")+"&age=3", true);
  xmlhttp.send();
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script>
</head>
<body>
<div>
  <div id="show"></div>
  <input id="bt" type="button" value="查看效果"/>
</div>
</body>
</html>

Click the button to get the specified content. The following is the C# code:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
 
namespace ajax
{
    public partial class demoPara : System.Web.UI.Page
    {
        string webName;
        int age;
        protected void Page_Load(object sender, EventArgs e)
        {
            webName =Server.UrlDecode(Request.QueryString["webName"]);
            age = Convert.ToInt32(Request.QueryString["age"]);
            Response.Write("欢迎来到" + webName + "，本站已经成立" + age + "周年。");
        }
    }
}

3. POST request:

Look at a code example:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("show").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST", "demo/ajax/net/demo.aspx", true);
  xmlhttp.send();
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script>
</head>
<body>
<div>
  <div id="show"></div>
  <input id="bt" type="button" value="查看效果"/>
</div>
</body>
</html>

The above code uses the post method to obtain the current time and date of the server, which does not exist Caching problem using get method.

If you need to POST data like an HTML form, you can use setRequestHeader() to add HTTP headers, and then specify the data to be sent in the send() method:

<!DOCTYPE html> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
<meta name="author" content="http://www.php.cn/" /> 
<title>php中文网</title> 
<script>
function loadXMLDoc() {
  var xmlhttp;
  if (window.XMLHttpRequest) {
    xmlhttp = new XMLHttpRequest();
  }
  else {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("show").innerHTML = xmlhttp.responseText;
    }
  }
  xmlhttp.open("POST", "demo/ajax/net/postParam.aspx", true);
  xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
  xmlhttp.send("webName=php中文网&age=3");
}
window.onload = function () {
  var obt = document.getElementById("bt");
  obt.onclick = function () {
    loadXMLDoc();
  }
}
</script>
</head>
<body>
<div>
  <div id="show"></div>
  <input id="bt" type="button" value="查看效果"/>
</div>
</body>
</html>

Next Section

new file

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="author" content="http://www.php.cn/" />
<title>php中文网</title>
<script>
function loadXMLDoc() {
 var xmlhttp;
 if (window.XMLHttpRequest) {
 xmlhttp = new XMLHttpRequest();
 }
 else {
 xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
 }
 xmlhttp.onreadystatechange = function () {
 if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
 document.getElementById("show").innerHTML = xmlhttp.responseText;
 }
 }
 xmlhttp.open("POST", "demo/ajax/net/demo.aspx", true);
 xmlhttp.send();
}
window.onload = function () {
 var obt = document.getElementById("bt");
 obt.onclick = function () {
 loadXMLDoc();
 }
}
</script>
</head>
<body>
<div>
 <div id="show"></div>
 <input id="bt" type="button" value="查看效果"/>
</div>
</body>
</html>

submit Reset Code

Automatic operation

Full Screen