javascript 没有 JQuery 的 Ajax？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12188488/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ajax Without JQuery?
提问by cmsjr
Possible Duplicate:
How to make an ajax call without jquery?
How do I asynchronously update a webpage using ajax without using jQuery?
如何在不使用 jQuery 的情况下使用 ajax 异步更新网页？
回答by Michael Petrotta
As a young new developer, I've gotten so used to JQuery that I've become intimidated of JavaScript (not like GetElementById JavaScript, but object oriented, passing functions on the fly and closures being the difference between failure and crying-with-joy JavaScript).
作为一名年轻的新开发人员，我已经习惯了 JQuery，以至于我对 JavaScript 感到害怕（不像 GetElementById JavaScript，而是面向对象，动态传递函数和闭包是失败和喜悦哭泣之间的区别JavaScript）。
I'm providing this copy/pasteable POST ajax form, ignoring Microsoft's nuances, with minimal comments to help others like me learn by example:
我提供了这个复制/可粘贴的 POST ajax 表单，忽略了微软的细微差别，用最少的评论来帮助像我这样的其他人通过示例学习：
//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);
}
Here's the server code:
这是服务器代码：
<?php
//serverStuff.php
$lastName= $_POST['last'];
$firstName = $_POST['first'];
//everything echo'd becomes responseText in the JavaScript
echo "Welcome, " . ucwords($firstName).' '.ucwords($lastName);
?>
and the HTML:
和 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>
Hopefully having a POST ajax example to copy/paste, other new developers will have one less excuse to try JavaScript without the JQuery training wheels.
希望有一个 POST ajax 示例来复制/粘贴，其他新开发人员将有更少的借口来尝试没有 JQuery 培训轮的 JavaScript。
回答by cmsjr
Get familiar with the XMLHttpRequestobject then you can make good decisions about what (if any) JavaScript framework to use to work with it.
熟悉XMLHttpRequest对象，然后您就可以很好地决定使用什么（如果有）JavaScript 框架来处理它。
回答by Bishnu Paudel
The best way to make an AJAX call these days is using JQuery. Anyway, here is an example for you from W3schools.com
现在进行 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>
