10分学会——フロントエンドはどのようにAJAXを通じてバックエンドに要求を送ります

AJAX
既存のインターネット標準に基づいて:

XMLHttpRequestオブジェクト(サーバと非同期でデータを交換)

JavaScript/DOM(情報表示/インタラクション)

CSS(データ定義スタイルへ)

XML(変換データのフォーマットとして)

GETリクエスト、非同期リクエスト、サーバからの応答はXMLではありません
使用方法(例):

function loadXMLDoc()
{
    var xmlhttp;
    if (window.XMLHttpRequest)
    {
        //  IE7+, Firefox, Chrome, Opera, Safari        
        //    XMLHttpRequest  
        xmlhttp=new XMLHttpRequest();
    }
    else
    {
        // IE6, IE5        
        //   XMLHttpRequest  
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function()
    {
        if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}




   AJAX        
    

XMLHttpRequestオブジェクトを作成します.
XMLHttpRequestオブジェクトにonreadystatechangeイベント処理関数(準備完了時に実行される関数に応答)を追加します.
XMLHttpRequestオブジェクトのresponseTextプロパティを使用して、データベースの戻り値を取得します.
XMLHttpRequestオブジェクトのopen(method,url,async)メソッドでリンクを開き、send(string)メソッドでリクエストを送信します.
ここでmethodはリクエストのタイプであり、GETまたはPOST、urlファイルをサーバ上の位置にすることができ、asyncはtrue(非同期)またはfalse(同期)である.
stringはPOSTリクエストにのみ使用され、GETリクエスト時にパラメータは必要ありません.
 
GETリクエスト、非同期リクエスト、サーバからの応答はXML
使用方法(例):

function loadXMLDoc()
{
  var xmlhttp;
  var txt,x,i;
  if (window.XMLHttpRequest)
  {
    // IE7+, Firefox, Chrome, Opera, Safari        
    xmlhttp=new XMLHttpRequest();
  }
  else
  {
    // IE6, IE5        
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      xmlDoc=xmlhttp.responseXML;
      txt="";
      //  XML，      
      x=xmlDoc.getElementsByTagName("ARTIST");
      for (i=0;i<x.length;i++)
      {
        txt=txt + x[i].childNodes[0].nodeValue + "<br>";
      }
      document.getElementById("myDiv").innerHTML=txt;
    }
  }
  xmlhttp.open("GET",url,true);
  xmlhttp.send();
}






     CD
 

创建XMLHttpRequest对象。

给XMLHttpRequest对象添加onreadystatechange事件处理函数（响应处于就绪状态时执行的函数）。

通过XMLHttpRequest对象的responseXML属性获取数据库返回值并解析。

通过XMLHttpRequest对象的open(method,url,async)方法打开链接，send(string)方法发送请求。

其中method是请求的类型，可以使GET或POST，url文件在服务器上的位置，async可是是true（异步）或false（同步）。

string仅用于POST请求，GET请求时不需要有参数。

 

GET请求、异步请求、带有回调函数

使用方法（举例说明）：

var xmlhttp;
function loadXMLDoc(url,cfunc)
{
    if (window.XMLHttpRequest)
    {// IE7+, Firefox, Chrome, Opera, Safari   
        xmlhttp=new XMLHttpRequest();
    }
    else   
    {// IE6, IE5   
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=cfunc;
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
}

//           ，  loadXMLDoc  ，
function myFunction()
{
	loadXMLDoc(url,function()//    
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	});
}




   AJAX       
    

 
POSTリクエストの例(非同期リクエスト、リクエストデータは通常のstringではなく、フォームのようにフォーマットされています): function loadXMLDoc() { var xmlhttp; if (window.XMLHttpRequest) { // IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else { // 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",url,true); // HTML POST ， setRequestHeader() HTTP 。 // send() xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("user=admin&pass=1234"); }
//HTMLフォームのようなPOSTデータが必要な場合は、setRequestHeader()を使用してHTTPヘッダを追加します.//次にsend()メソッドで送信データxmlhttpを規定する.setRequestHeader("Content-type","application/x-www-form-urlencoded"); xmlhttp.send("user=admin&pass=1234");
これは注意すべき2行のコードです.