关于javascript：没有JQuery的Ajax？


Ajax Without JQuery?

本问题已经有最佳答案，请猛点这里访问。

Possible Duplicate:
How to make an ajax call without jquery?

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

相关讨论

作为一个年轻的新开发人员，我已经习惯了JQuery，我已经被JavaScript吓倒了(不像GetElementById JavaScript，但是面向对象，动态传递函数和闭包是失败和哭泣之间的区别 - 喜悦JavaScript的)。

我提供这种复制/可粘贴的POST ajax表单，忽略了Microsoft的细微差别，只需要很少的评论就可以帮助像我这样的人通过示例学习：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
//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);
}

这是服务器代码：

1
2
3
4
5
6
7
8
9
10
<?php
 //serverStuff.php

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

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

?>

和HTML：

1
2
3
4
<!--Just doing some ajax over here...-->
Just trying out some Ajax here....<br />
<br />
<span id="ajaxDump"></span>

希望有一个POST ajax示例来复制/粘贴，其他新开发人员将没有理由在没有JQuery训练轮的情况下尝试JavaScript。

相关讨论

熟悉XMLHttpRequest对象，然后就可以使用哪个(如果有的话)JavaScript框架做出正确的决策。

现在进行AJAX调用的最佳方法是使用JQuery。 无论如何，这里有一个来自W3schools.com的例子

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<!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();
}

</head>
<body>

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

</body>
</html>