AJAX pos atau dapatkan permintaan pelayan

Siaran AJAX atau dapatkan permintaan pelayan:

Objek XMLHttpRequest digunakan untuk bertukar-tukar data dengan pelayan.

Jika anda ingin menghantar permintaan kepada pelayan, anda perlu menggunakan kaedah open() dan send() bagi objek XMLHttpRequest.

属性	描述
open(method,url,async)	规定请求的类型、URL 以及是否异步处理请求。（1）.method:请求的类型；GET或POST。（2）.url:文件在服务器上的位置。（3）.async:true（异步）或 false（同步）。
send(string)	将请求发送到服务器。 string:仅用于 POST 请求

Atribut

Penerangan

terbuka(kaedah, url,async)

Menentukan jenis permintaan, URL dan sama ada untuk memproses permintaan secara tak segerak.

(1).kaedah: jenis permintaan; GET atau POST.

(2).url: Lokasi fail pada pelayan.

(3).async:true (tak segerak) atau palsu (synchronous).

hantar(rentetan)

Menghantar permintaan kepada pelayan.

rentetan: hanya digunakan untuk permintaan POST

1 Kaedah dapatkan mungkin lebih pantas dan mempunyai kebolehgunaan yang kukuh, tetapi dalam kebanyakan kes anda masih perlu menggunakan pos.

Senario yang disyorkan untuk menggunakan kaedah siaran adalah seperti berikut:

(1) Jangan mengharapkan untuk menggunakan fail cache (mengemas kini fail atau pangkalan data pada pelayan).

(2). Hantar sejumlah besar data ke pelayan (POST tiada had data).

(3) Apabila menghantar input pengguna yang mengandungi aksara yang tidak diketahui, POST adalah lebih stabil dan boleh dipercayai daripada GET.

2. Dapatkan kaedah:

Pertama lihat kod kaedah dapatkan:

<!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>

Dalam kod di atas, klik Butang boleh mendapatkan tarikh dan masa semasa pelayan Kod c# adalah seperti berikut:

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

Nota khas: Kaedah di atas mungkin membaca data daripada cache dalam pelayar IE, yang bermaksud bahawa masa akan menjadi. diperoleh seperti biasa apabila butang diklik untuk kali pertama Selepas tarikh, klik berikutnya tidak akan mempunyai sebarang masalah dalam pelayar seperti Google atau Firefox Penyelesaiannya adalah seperti berikut:

<!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 penyelesaian adalah sangat mudah, iaitu menambah nombor rawak selepas url itu sahaja, supaya setiap permintaan dianggap sebagai URL baru, jadi ia tidak akan di-cache.

Anda juga boleh menggunakan GET untuk menghantar maklumat Anda boleh menghantar maklumat melalui url Kod adalah seperti berikut:

<!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>

Klik butang untuk mendapatkan kandungan yang dinyatakan :<🎜>

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. Permintaan POST: <🎜><🎜><🎜><🎜>Lihat contoh kod: <🎜>

<!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>

<🎜>Kod di atas menggunakan siaran kaedah untuk mendapatkan masa dan tarikh semasa pelayan, yang tidak wujud masalah Caching menggunakan kaedah get. <🎜><🎜>Jika anda perlu MENYATAKAN data seperti borang HTML, anda boleh menggunakan setRequestHeader() untuk menambah pengepala HTTP, dan kemudian nyatakan data untuk dihantar dalam kaedah send():<🎜>

<!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>

Meneruskan pembelajaran

fail baharu

<!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>

serahkan Tetapkan Semula Kod

Operasi automatik

AJAX pos atau dapatkan permintaan pelayan

peringkat rendahTutorial tapak web tiruan perusahaan Imperial CMS

peringkat rendahPemula dengan asas sifar dalam WordPress membina blog peribadi dan laman web korporat

peringkat rendahVideo arahan pembinaan tapak web berasaskan sifar CMS muktamad

peringkat rendahProjek hadapan-Shangyou [amalan komprehensif teknologi HTML/CSS/JS]

PertengahanVue3.0 daripada 0 untuk membina amalan projek sistem pengurusan belakang universal

peringkat rendahKursus front-end berasaskan sifar [pembelajaran lanjutan Vue dan aplikasi praktikal]

peringkat rendahTutorial bahagian hadapan WEB [HTML5+CSS3+JS]

peringkat rendahBermula dengan cepat dengan apipost

PertengahanTutorial praktikal Vue3+TypeScript amalan projek peringkat perusahaan

peringkat rendahMari kita bercakap secara ringkas tentang memulakan perniagaan dalam PHP

PertengahanProjek e-dagang VUE (pertempuran sebenar projek dua bahagian hadapan & belakang)

peringkat rendahAplikasi praktikal Apipost [api, antara muka, ujian automatik, olok-olok]