Javascript 没有JQuery的Ajax？_Javascript_Ajax

Javascript 没有JQuery的Ajax？

javascript ajax

Javascript 没有JQuery的Ajax？,javascript,ajax,Javascript,Ajax,可能重复：如何在不使用jQuery的情况下使用ajax异步更新网页？作为一名年轻的新开发人员，我对jQuery已经习以为常，以至于我对JavaScript感到恐惧（不像GetElementById JavaScript，而是面向对象的，动态传递函数和闭包是失败和欣喜若狂的JavaScript的区别）我提供了这个可复制/粘贴的POST ajax表单，忽略了Microsoft的细微差别，并提供了最少的注释，以帮助像我这样的人通过示例学习： //ajax.js function myAjax()

可能重复：

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

作为一名年轻的新开发人员，我对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);
}

//ajax.js
函数myAjax（）{
var xmlHttp=new XMLHttpRequest（）；
var url=“serverStuff.php”；
var parameters=“first=barack&last=obama”；
open（“POST”，url，true）；
//黑魔法段落
setRequestHeader（“内容类型”，“应用程序/x-www-form-urlencoded”）；
setRequestHeader（“内容长度”，parameters.length）；
setRequestHeader（“连接”，“关闭”）；
xmlHttp.onreadystatechange=函数（）{
if（xmlHttp.readyState==4&&xmlHttp.status==200）{
document.getElementById（'ajaxDump'）。innerHTML+=xmlHttp.responseText+“
”；
}
}
send（参数）；
}

以下是服务器代码：

<?php
 //serverStuff.php

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

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

?>

现在进行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>


函数loadXMLDoc（）
{
var-xmlhttp；
if（window.XMLHttpRequest）
{//IE7+、Firefox、Chrome、Opera、Safari的代码
xmlhttp=新的XMLHttpRequest（）；
}
其他的
{//IE6、IE5的代码
xmlhttp=新的ActiveXObject（“Microsoft.xmlhttp”）；
}
xmlhttp.onreadystatechange=函数（）
{
if（xmlhttp.readyState==4&&xmlhttp.status==200）
{
document.getElementById（“myDiv”）.innerHTML=xmlhttp.responseText；
}
}
open（“GET”，“ajax_info.txt”，true）；
xmlhttp.send（）；
}
让AJAX更改此文本
更改内容
熟悉对象，然后就可以很好地决定使用什么（如果有的话）JavaScript框架来处理它 好的，我复制了你先前问题的答案内容。我已经将它标记为社区维基，所以我不会从中获得任何代表（不幸的是，你也不会）。请根据需要进行编辑。将来，如果你想马上回答问题，请在提问时使用“回答你自己的问题”复选框。很高兴我能帮忙，@user1634617.Old post，但我认为这很重要——我对规范的理解是POST请求应该返回201状态代码，因此请确保在onreadystatechange函数的条件内部查找正确的状态代码。
<!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>