1

これは jQuery で行われるコードで、目的はそれを javascript に変更することです。元のコードはここからです: php プロキシ

以下は、javascript に変更する jQuery です。

$(function(){

  // Handle form submit.
  $('#params').submit(function(){
    var proxy = 'ba-simple-proxy.php',
      url = proxy + '?' + $('#params').serialize();

      // Make GET request.
      $.get( url, function(data){

        $('#response')
          .html( '<pre class="brush:xml"/>' )
          .find( 'pre' ) // To make the lines proper and to frame the text.
            .text( data );

      });

    // Prevent default form submit action.
    return false;
  });
});

以下は、まだ準備が整っていない JavaScript の同じコードです。問題は、現時点では論理的ではないということです。

ここに含まれていない html のフォームビットは ajaxcontent() を呼び出します。ajaxcontent() は、jQuery の「.html」および「.text」部分を作成します。JQuery の「.find」は、現時点では無視できます。

ajaxcontent() では、最初に「pre」タグが作成され、その中にクラス「brush:xml」が追加されます。次に、「createTextNode」は、要求されたページからソース コードを追加します。これがjQueryの「(データ)」です。ここで、ajax は情報を id="response" に配置しようとしているため、コードは失敗しますが、ajaxcontent() はこの行 "xelement.appendChild(xtext);" を実行する必要があります。テキストを「xelement」に添付します。

function loadajax() {
    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("response").innerHTML=xmlhttp.responseText;
        }
    }

    var urlvar=(document.getElementById("url").value)

    xmlhttp.open("GET","ba-simple-proxy.php&url="+urlvar,true);
    xmlhttp.send();
}

function ajaxcontent() {
    var xelement=document.createElement("pre");
    xelement.className="brush:xml";
    var xtext=document.createTextNode( loadajax() );
    xelement.appendChild(xtext);
}

これを機能させる方法はありますか？jQuery の部分は実用的な例ですが、javascript の部分はまだです。

4

1 に答える 1

0

ここでは、jQuery を使用しない Ajax POST を示します (動作を確認するためにJSFiddleを使用します。これは、メソッドが POST であることを要求するJSFiddleエコー サービスを使用していることに注意してください)。

<input id="url" value="http://google.com/"/>
<button id="Button">No jQuery POST</button>
<div id="response" style="border: dashed 1px black;"></div>

document.getElementById('Button').onclick = function() {
    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("response").innerHTML = "Responce returned!<br/>Data:" + xmlhttp.responseText;
        }
    }

    var params = "html=" + escape(document.getElementById("url").value) + "&delay=3";
    xmlhttp.open("POST", "/echo/html/", true);
    xmlhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
    xmlhttp.setRequestHeader("Content-length", params.length);
    xmlhttp.setRequestHeader("Connection", "close");

    xmlhttp.send(params);
}

これが、jQuery のようなものが非常に優れている理由であり、開発者からこれらすべてを隠しています :)

于 2012-08-30T23:45:59.237 に答える