2

可能重复：
如何在没有 jquery 的情况下进行 ajax 调用？

如何在不使用 jQuery 的情况下使用 ajax 异步更新网页？

4

3 回答 3

5

作为一个年轻的新开发人员，我已经习惯了 JQuery，以至于我对 JavaScript 感到害怕（不像 GetElementById JavaScript，而是面向对象，动态传递函数和闭包是失败和哭泣之间的区别） JavaScript）。

我提供了这个复制/粘贴的 POST ajax 表单，忽略了 Microsoft 的细微差别，并提供了最少的评论，以帮助像我这样的其他人通过示例学习：

//ajax.js
function myAjax() {
 var xmlHttp = new XMLHttpRequest();
 var url="serverStuff.php";
 var parameters = "first=barack&last=obama";
 xmlHttp.open("POST", url, true);

 //Black magic paragraph
 xmlHttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
 xmlHttp.setRequestHeader("Content-length", parameters.length);
 xmlHttp.setRequestHeader("Connection", "close");

 xmlHttp.onreadystatechange = function() {
  if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
   document.getElementById('ajaxDump').innerHTML+=xmlHttp.responseText+"<br />";
  }
 }

 xmlHttp.send(parameters);
}

这是服务器代码：

<?php
 //serverStuff.php

 $lastName= $_POST['last'];
 $firstName = $_POST['first'];

 //everything echo'd becomes responseText in the JavaScript
 echo "Welcome, " . ucwords($firstName).' '.ucwords($lastName);

?>

和 HTML：

<!--Just doing some ajax over here...-->
<a href="#" onclick="myAjax();return false">Just trying out some Ajax here....</a><br />
<br />
<span id="ajaxDump"></span>

希望有一个 POST ajax 示例来复制/粘贴，其他新开发人员将少一个借口来尝试没有 JQuery 训练轮的 JavaScript。

于 2012-08-30T00:58:16.797 回答
4

熟悉XMLHttpRequest对象，然后您就可以正确决定使用什么（如果有）JavaScript 框架来处理它。

于 2012-08-30T00:59:46.830 回答
1

现在进行 AJAX 调用的最佳方式是使用 JQuery。无论如何，这是来自 W3schools.com 的示例

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
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","ajax_info.txt",true);
xmlhttp.send();
}
</script>
</head>
<body>

<div id="myDiv"><h2>Let AJAX change this text</h2></div>
<button type="button" onclick="loadXMLDoc()">Change Content</button>

</body>
</html>
于 2012-08-30T00:58:21.030 回答