没有JQuery的Ajax？

Question

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

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

Answer 1

作为一个年轻的新开发人员,我已经习惯了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.