PHP 代理 jQuery 部分到 javascript答案

【问题标题】：PHP proxy jQuery part to javascriptPHP 代理 jQuery 部分到 javascript
【发布时间】：2012-08-29 17:09:31
【问题描述】：

这是在 jQuery 中完成的代码，目的是将其更改为 javascript。原代码来自这里：php proxy

这里是要改成 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 部分还没有。

【问题讨论】：

为什么要替换 jQuery？看起来如果原始代码有效，那么它将处理浏览器和事件处理以及 DOM 操作中的细微差别
用一个基本的方法让代码更清晰。
jQuery 代码对我来说看起来更清晰。

标签： php javascript jquery ajax proxy

【解决方案1】：

好的，这里是一个没有 jQuery 的 Ajax POST（和a JSFiddle 来查看它的实际效果，请注意，这使用了 JSFiddle echo service，它要求方法是 POST，这略有不同）：

<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 这样的东西这么好，它们对开发者隐藏了所有这些:)

【讨论】：