AJAX - サーバーにリクエストを送信します
AJAX - サーバーにリクエストを送信します
リクエストをサーバーに送信するには、open() メソッドと send() メソッドを使用する必要があります。
open() メソッドには 3 つのパラメータが必要です:
最初のパラメータは、リクエストの送信に使用されるメソッド (GET または POST) を定義します。
POST と比較して、GET はより簡単かつ高速で、ほとんどの場合に機能します。
ただし、次の場合はPOSTリクエストを使用してください:
キャッシュされたファイル(サーバー上のファイルやデータベースの更新)を使用してサーバーに大量のデータを送信できない(POSTにはデータサイズ制限がない)ユーザー入力を送信する場合不明な文字が含まれる場合、POST は GET よりも安定しており、信頼性が高くなります。2 番目のパラメーターは、サーバー側スクリプトの URL を指定します (ファイルは、.txt や .xml などの任意のタイプのファイル、またはサーバー スクリプト ファイルです。 .asp および .php (応答を送り返す前にサーバー上でタスクを実行する機能))。
3番目のパラメータは、リクエストを非同期で処理することを指定します(true(非同期)またはfalse(同期))。
send() メソッドはリクエストをサーバーに送信します。 HTML ファイルと ASP ファイルが同じディレクトリにあると仮定すると、コードは次のようになります:xmlHttp。 send(null);
GET か POST?
POST と比較して、GET はより簡単かつ高速で、ほとんどの場合に機能します。
ただし、次の場合はPOSTリクエストを使用してください:
キャッシュされたファイル(サーバー上のファイルやデータベースの更新)を使用してサーバーに大量のデータを送信できない(POSTにはデータサイズ制限がない)ユーザー入力を送信する場合不明な文字が含まれている場合、POST は GET よりも安定していて信頼性があります
単純な GET リクエスト:
xmlhttp.open("GET","demo_get.html",true);
xmlhttp.send();キャッシュされた結果を取得できる場合があります。
これを回避するには、URL に一意の ID を追加します:
xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
xmlhttp.send();GET メソッド経由で情報を送信したい場合は、URL に情報を追加します:
xmlhttp.open("GET","demo_get2.html?fname=Henry&lname=Ford",true);
xmlhttp.send();フルコード:
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
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("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xmlhttp.send();
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>
</body>
</html>単純な POST リクエスト:
xmlhttp.open("POST","demo_post.html",true);
xmlhttp.send();HTML フォームなどのデータを POST する必要がある場合は、setRequestHeader() を使用して HTTP ヘッダーを追加してください。次に、send() メソッドで送信したいデータを指定します
xmlhttp.open("POST","ajax_test.html",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");構文:
setRequestHeader(header,value) リクエストにHTTPヘッダーを追加します。
header: ヘッダーの名前を指定します
value: ヘッダーの値を指定します
完全なコード:
<!DOCTYPE html>
<html>
<head>
<script>
function loadXMLDoc()
{
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("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("POST","/try/ajax/demo_post2.php",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Henry&lname=Ford");
}
</script>
</head>
<body>
<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">Request data</button>
<div id="myDiv"></div>
</body>
</html>url - サーバー上のファイル
open() メソッドの url パラメータはアドレスですサーバー上のファイルの内容:
xmlhttp.open("GET","ajax_test.html",true);
ファイルは、.txt や .xml などの任意のタイプのファイル、またはサーバー スクリプトにすることができます。 .asp や .php などのファイル (渡すときは、応答する前にサーバー上でタスクを実行できます)。
非同期 - 真か偽?
AJAX は、非同期 JavaScript および XML を指します。
XMLHttpRequest オブジェクトを AJAX に使用する場合は、その open() メソッドの async パラメーターを true に設定する必要があります:
xmlhttp.open("GET","ajax_test.html",true);
Web 開発の場合 開発者にとって、非同期リクエストの送信は大きな改善です。サーバー上で実行されるタスクの多くは非常に時間がかかります。 AJAX が導入される前は、これによりアプリケーションがハングまたは停止する可能性がありました。
AJAXを使用すると、JavaScriptはサーバーからの応答を待つ必要はありませんが、
サーバーの応答を待ちながら他のスクリプトを実行し、応答の準備ができたら応答を処理します
Async=true
非同期を使用する場合。 =true、onreadystatechange イベントの準備完了状態に応答して実行される関数に指定してください:
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();Async = false
async=false を使用するには、open() メソッドの 3 番目のパラメーターを false に変更してください:
xmlhttp .open( "GET", "test1.txt",false);
async=false の使用はお勧めしませんが、小規模なリクエストの場合は使用することも可能です。
JavaScript はサーバーの応答の準備ができるまで待機してから実行を続行することに注意してください。サーバーがビジーまたは遅い場合、アプリケーションはハングまたは停止します。
注: async=false を使用する場合は、onreadystatechange 関数を記述しないでください。send() ステートメントの後にコードを置くだけです:
xmlhttp.open("GET","ajax_info.txt",false);
xmlhttp.send();
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;例:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>实例</title>
<script>
window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
xhr.open('get','new.php',true); //引入new.php文件
xhr.send();
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
//alert( xhr.responseText ); 后端传来的格式是一个数组里面很多条json 自己可以测试下
var data = JSON.parse( xhr.responseText ); // 将后台获取的内容转为json类型 每一个json里面有两个键：title和date
var oUl = document.getElementById('ul1'); //获取显示新闻列表的节点
var html = '';
for (var i=0; i<data.length; i++) { // 循环所有的json数据，并把每一条添加到列表中
html += '<li><a href="">'+data[i].title+'</a> [<span>'+data[i].date+'</span>]</li>';
}
oUl.innerHTML = html; //把内容放在页面里
} else {
alert('出错了,Err：' + xhr.status);
}
}
}
}
}
</script>
</head>
<body>
<input type="button" value="按钮" id="btn" />
<ul id="ul1"></ul>
</body>
</html>新しい .php ファイルを作成します。 :
えー
![フロントエンドプロジェクト-Shangyou [HTML/CSS/JS技術総合演習]](https://img.php.cn/upload/course/000/000/068/63bfcb2974f91471.jpg)
