AJAX サーバーリクエストのポストまたは取得
AJAX post または get サーバーリクエスト:
XMLHttpRequest オブジェクトは、サーバーとデータを交換するために使用されます。
サーバーにリクエストを送信したい場合は、XMLHttpRequest オブジェクトの open() メソッドと send() メソッドを使用する必要があります。
| プロパティ | 説明 |
| open(method,url,async) | リクエストのタイプ、URL、リクエストを処理するかどうかを指定します非同期的に。 (1).method: リクエストのタイプ。GET または POST。 (2).url: サーバー上のファイルの場所。 (3).async:true (非同期) または false (同期)。 |
| send(string) | リクエストをサーバーに送信します。 文字列: POST リクエストにのみ使用されます |
1. get と post の違い:
get メソッドの方が高速で適用性が高い場合がありますが、多くの場合、依然として post を使用する必要があります。
post メソッドを使用するための推奨シナリオは次のとおりです:
(1) キャッシュされたファイルの使用 (サーバー上のファイルまたはデータベースの更新) を想定しないでください。
(2). 大量のデータをサーバーに送信します (POST にはデータ量制限はありません)。
(3). 不明な文字を含むユーザー入力を送信する場合、POST は GET よりも安定しており、信頼性が高くなります。
2. Get メソッド:
まず get メソッドのコードを見てみましょう:
<!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>上記のコードで、ボタンをクリックしてサーバーの現在の日付と時刻を取得します。 C# コードは次のとおりです。
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);
}
}
}特記事項: 上記 IE ブラウザはキャッシュからデータを読み取ることがあります。これは、ボタンの最初のクリックで時刻と日付が正常に取得された後、それ以降のクリックは効果がないことを意味します。 Google または Firefox の場合、解決策は次のとおりです:
<!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>解決策は非常に簡単で、URL の後に乱数を追加するだけです。これにより、各リクエストは新しい URL とみなされ、キャッシュされなくなります。
GET を使用して情報を送信することもできます。URL を通じて情報を送信することもできます。コードは次のとおりです:
<!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>ボタンをクリックして指定されたコンテンツを取得します。以下は C# コードです:
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 リクエスト:
コード例:
<!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>上記のコードは、post メソッドを使用してサーバーの現在の時刻と日付を取得します。 get メソッドを使用してもキャッシュの問題はありません。
HTML フォームのようにデータを POST する必要がある場合は、setRequestHeader() を使用して HTTP ヘッダーを追加し、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> 
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
![Apipost 実用化 [API、インターフェース、自動テスト、モック]](https://img.php.cn/upload/course/000/000/068/63b3c967a20f4861.jpg)
