如何在不使用JQuery或任何其他库的情况下进行下面的JQuery Ajax调用,而只使用JavaScript内置函数?
var input = '{
"age":100,
"name":"foo",
"messages":["msg 1","msg 2","msg 3"],
"favoriteColor" : "blue",
"petName" : "Godzilla",
"IQ" : "QuiteLow"
}';
var endpointAddress = "http://your.server.com/app/service.svc";
var url = endpointAddress + "/FindPerson";
$.ajax({
type: 'POST',
url: url,
contentType: 'application/json',
data: input,
success: function(result) {
alert(JSON.stringify(result));
}
});
答案 0 :(得分:3)
jQuery很好地规范了浏览器之间针对ajax调用的所有小怪癖和数字。
我建议找一个独立的ajax库,可以做同样的事情,但没有jQuery带来的所有额外开销。以下是一些:
答案 1 :(得分:2)
试试这个Example
首先你必须创建window.XMLHttpRequest
或ActiveXObject(对于IE)的对象
if (window.XMLHttpRequest)
{// code for IE7+, Firefox, Chrome, Opera, Safari
xmlhttp=new XMLHttpRequest();
}
else
{// code for IE6, IE5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
然后您可以发送请求
xmlhttp.open("GET","ajax_info.txt",true);
xmlhttp.send();
最后您可以获得回复
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200)
{
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
}
}
答案 2 :(得分:2)
下面的代码执行jQuery版本所做的一切:
代码:
var httpRequest;
function makeRequest(url, input) {
if (window.XMLHttpRequest) { // Mozilla, Safari, ...
httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE
try {
httpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try {
httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e) {}
}
}
if (!httpRequest) {
alert('Giving up :( Cannot create an XMLHTTP instance');
return false;
}
httpRequest.onreadystatechange = function(){
if (httpRequest.readyState === 4) {
if (httpRequest.status === 200) {
alert(JSON.stringify(httpRequest.responseText));
}
}
};
httpRequest.open('POST', url);
httpRequest.setRequestHeader('Content-Type', 'application/json');
httpRequest.send(input);
}
var input = '{
"age":100,
"name":"foo",
"messages":["msg 1","msg 2","msg 3"],
"favoriteColor" : "blue",
"petName" : "Godzilla",
"IQ" : "QuiteLow"
}';
var endpointAddress = "http://your.server.com/app/service.svc";
var url = endpointAddress + "/FindPerson";
makeRequest(url, input);
部分取自MDN。
答案 3 :(得分:0)
查看 Google 的第一个回答over here。