用ajax命令

您是否想构建更具动态，响应式的，类似台式的Web应用程序（例如Gmail和Google Map）？然后，这篇文章是给您的！它可以指导您了解Ajax基础知识，并通过构建简单的Ajax应用程序的过程。

该应用程序被命名为WebConsole，这是一个用于执行系统命令的浏览器接口，您通常需要shell访问。也有使用两个流行的JavaScript库的AJAX功能的简短示例-JQuery和Yui。 在2005年首次发布并最近更新的本文中，我将解释一个简单，可重复使用的JavaScript功能，用于制作HTTP请求。然后，我将将该功能应用于创建简单的应用程序。

>

尽管有一些Yui和jQuery示例，但本文不是特定Ajax库的教程。取而代之的是，它旨在为您提供有关提出HTTP请求的更多动手信息，以便在评估此类库或决定独自一人时处于更好的位置。

钥匙要点

ajax允许通过处理浏览器中的HTTP请求来创建类似于Gmail和Google Maps的动态响应式Web应用程序。

>

>教程引入了可重复使用的JavaScript函数，用于制作HTTP请求，该功能可以在各种应用程序中使用，而无需依赖于jQuery或Yui等特定库。
• 一个简单的示例演示了制作http请求的基本步骤：创建xmlhttprequest对象，分配回调函数并发送请求。
>文章介绍了WebConsole应用程序，通过浏览器接口启用服务器端命令执行，说明了实用的AJAX使用。
• 强调了安全问题，强调了限制可执行命令和消毒输入以防止未经授权的服务器访问的重要性。
>
• >教程涵盖了高级主题，包括处理XML和JSON等不同的数据格式，以及将AJAX与流行的JavaScript库集成以提高功能。
• 一个简单的http请求示例
• >让我们首先修改在JavaScript中提出HTTP请求的流程，并处理响应。这只是刷新您的内存的快速示例。有关所有辛辣的详细信息，请参见Sitepoint的介绍性文章“ Ajax：与远程脚本的可用互动”。
有三个基本步骤：

创建一个xmlhttprequest对象。

>分配回调函数以处理HTTP响应。

>

> make（发送）请求。
>

>让我们来一个示例，在其中我们请求一个简单的HTML文档test.html，其中仅包含文本“我是测试”。然后，我们将提醒（）test.html文件的内容：

1. 这是这个示例的工作方式：




1. 用户单击“制作请求”按钮。
>以参数：同一目录中的HTML文件的名称调用MakereQuest（）函数。在这种情况下，它是test.html。
发送请求。
2. >
   > onreadyStateChange事件触发，执行将传递给AlertContents（）。
3. > AlertContents（）检查是否已接收响应，如果可以的话，请werter（）s test.html文件的内容。


4. >亲自测试示例，然后查看测试文件。

问题
上面的示例效果很好，但是在准备黄金时间之前，我们需要改进一件事。改进是编码可重复使用的请求函数，该函数处理所有无聊和重复的对象创建和请求/响应内容，同时将呈现部分留给其他函数，这些函数是请求 - 敏锐的，并且仅处理结果，而不管其源源。
在上面的示例中，我们需要一个全局变量，http_request，这是由makerequest（）和alertcontents（）函数都可以访问的，这在可重复使用性方面不好，并且可能会命名碰撞。理想情况下，MakereQuest（）应执行请求，并且AlertContents（）应呈现结果；两项功能都不需要知道或需要对方。
这是我们可重复使用的请求函数的代码：

此函数接收三个参数：

<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
   if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
       http_request = new XMLHttpRequest(); <br>
   } else if (window.ActiveXObject) { // IE6 and older <br>
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
   } <br>
   http_request.onreadystatechange = alertContents; <br>
   http_request.open('GET', url, true); <br>
   http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
   if (http_request.readyState == 4) { <br>
       if (http_request.status == 200) { <br>
           alert(http_request.responseText); <br>
       } else { <br>
           alert('There was a problem with the request.'); <br>
       } <br>
   } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
   makeRequest('test.html'); <br>
} <br>
 <br>
</script>

获得

的URL

收到响应时要调用的功能

>
标志如果回调函数期望XML文档（true）或纯文本（false，默认）>
• 此功能依赖于两个JavaScript功能，以便将请求对象很好地包装和隔离。首先是可以即时定义新功能（称为匿名函数）的能力，例如：
>
• http_request.onreadystatechange = function（）{...}
>
另一个技巧是能够在不预先知道其名称的情况下调用回调功能。例如：



请注意如何传递回调函数的名称，而无需任何引号。

>

>您可以通过允许HTTP请求方法以及将作为参数传递给该功能的任何查询字符串，然后在调用中使用以打开（）和发送（）方法来使该功能更加重复使用。这还将允许您除了获得最初旨在执行的邮政请求。

>该功能的另一个功能是处理200以外的响应代码，如果您想更具体并根据返回的成功/错误代码的类型采取适当的操作，则可以方便。

简单的示例重新访问

现在，让我们重做上一个示例，其中test.html文件的内容被警报（）ed。这次，通过采用我们闪亮的新可重用请求函数，所使用的两个功能的修订版将更加简单：

>

<button >Make a request</button> <br>
 <br>
<script type="text/javascript"> <br>
 <br>
var http_request = false; <br>
 <br>
function makeRequest(url) { <br>
 <br>
   if (window.XMLHttpRequest) { // Mozilla, Safari, IE7... <br>
       http_request = new XMLHttpRequest(); <br>
   } else if (window.ActiveXObject) { // IE6 and older <br>
       http_request = new ActiveXObject("Microsoft.XMLHTTP"); <br>
   } <br>
   http_request.onreadystatechange = alertContents; <br>
   http_request.open('GET', url, true); <br>
   http_request.send(null); <br>
 <br>
} <br>
 <br>
function alertContents() { <br>
   if (http_request.readyState == 4) { <br>
       if (http_request.status == 200) { <br>
           alert(http_request.responseText); <br>
       } else { <br>
           alert('There was a problem with the request.'); <br>
       } <br>
   } <br>
} <br>
 <br>
document.getElementById('mybutton').onclick = function() { <br>
   makeRequest('test.html'); <br>
} <br>
 <br>
</script>

如您所见，AlertContents（）只是介绍：没有任何状态，ReadyStates或HTTP请求在任何地方飞来。

>由于这些功能现在只是单线，因此实际上我们可以完全摆脱它们，然后更改功能调用。因此，整个示例将成为：

是的，很容易！查看示例和完整源代码（通过我们的老朋友查看源可用）。

function makeHttpRequest(url, callback_function, return_xml) <br>
{ <br>
  var http_request, response, i; <br>
 <br>
  var activex_ids = [ <br>
    'MSXML2.XMLHTTP.3.0', <br>
    'MSXML2.XMLHTTP', <br>
    'Microsoft.XMLHTTP' <br>
  ]; <br>
 <br>
  if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+... <br>
    http_request = new XMLHttpRequest(); <br>
    if (http_request.overrideMimeType) { <br>
      http_request.overrideMimeType('text/xml'); <br>
    } <br>
  } else if (window.ActiveXObject) { // IE6 and older <br>
    for (i = 0; i < activex_ids.length; i++) { <br>
      try { <br>
        http_request = new ActiveXObject(activex_ids[i]); <br>
      } catch (e) {} <br>
    } <br>
  } <br>
 <br>
  if (!http_request) { <br>
    alert('Unfortunately your browser doesn't support this feature.'); <br>
    return false; <br>
  } <br>
 <br>
  http_request.onreadystatechange = function() { <br>
    if (http_request.readyState !== 4) { <br>
        // not ready yet <br>
        return; <br>
    } <br>
    if (http_request.status !== 200) { <br>
      // ready, but not OK <br>
      alert('There was a problem with the request.(Code: ' + http_request.status + ')'); <br>
      return; <br>
    } <br>
    if (return_xml) { <br>
      response = http_request.responseXML; <br>
    } else { <br>
      response = http_request.responseText; <br>
    } <br>
    // invoke the callback <br>
    callback_function(response); <br>
  }; <br>
 <br>
  http_request.open('GET', url, true); <br>
  http_request.send(null); <br>
}

>

我们的项目：WebConsole应用程序

了解Ajax的基础知识，并采用可重复使用的要求的方式，让我们更深入地创建一些可以在现实生活中使用的东西。

我们将创建的应用程序允许您在Web服务器上执行任何Shell命令，无论是基于Windows还是Linux。我们甚至会付出一些CSS的努力，以使应用程序更像是控制台窗口。 在接口方面，我们有一个可滚动的

，其中包含到目前为止执行的命令的结果，一个在其中键入要执行的命令。他们都有黑色背景和灰色快递字体。这是一个屏幕截图。
html

这是应用程序的HTML部分： 就是这样：通过执行命令的结果以及我们可以输入命令的
进行更新的
。这是一个不错的，干净的界面，没有

以上是用ajax命令的详细内容。更多信息请关注PHP中文网其他相关文章！