将Jquery Ajax转换为纯JavaScript Ajax [英] Convert Jquery Ajax to Pure JavaScript Ajax
本文介绍了将Jquery Ajax转换为纯JavaScript Ajax的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我想将Jquery Ajax转换为Pure JavaScript Ajax，我希望有人能帮助我，
$ b
jQuery
$ b $
$。ajax（{
类型：GET，
contentType：application / json; charset = utf-8 ，
url：accessURL，
dataType：'jsonp'，
success：function（data）{
var dataLen = data.results.length;
// console .log（api returned+ dataLen +total results）;
$ .each（data.results，function（i，val）{
var venueObj = val.venue;
//console.log(venueObj）;
if（（venueObj&& venueObj.lat！= 0））{
meetupName.push（ val.name）;
meetupDescript.push（val.description）;
meetupUrl.push（val.event_url）;
// meetupLat = [];
meetupLat.push（venueObj ['lat']）;
// meetupLong = [];
meetupLon.push（venueObj ['lon']）;
//地址
meetupAddress.push（
venueObj ['address_1'] +< / h3>< h3>+
venueObj ['city ']
）;
} else {
return;
}
}）;
//console.log(data.results）;
//console.log(meetupLon）;
meetupLon = _.without（meetupLon，0）;
//console.log(meetupLon）;
meetupLat = _.without（meetupLat，0）;
//console.log (meetupLat）;
//console.log (meetupAddress）;
（i = 0; i< meetupLat.length; i ++）{
//设置标记。
myLatlng = new google.maps.LatLng（meetupLat [i]，meetupLon [i]）;
allMarkers = new google.maps.Marker（{
位置：myLatlng，
map：map，
title：Meetup，
html：
'< div class =markerPop>'+
< h2>+ meetupName [i] +< / h2>+
< h3> + meetupAddress [i] +< / h3>+
< p>+ meetupDescript [i] +< / p>+
< a href =' + meetupUrl [i] +'>+ meetupUrl [i] +< / p>+
'< / div>'
}）;
allLatlng.push（myLatlng）;
//console.log(allLatlng）;
google.maps.event.addListener（allMarkers，'click'，function（）{
infowindow.setContent（this.html）;
infowindow.open（map，this ）;
}）;
//创建要显示的标记的LatLng数组
//创建一个新的视点绑定
var bounds = new google.maps.LatLngBounds（）;
//通过每个...
（var i = 0，LtLgLen = allLatlng.length; i
bounds.extend（allLatlng [i]）;
}
//将这些边界符合地图
map.fitBounds（bounds）; （a）
} //结束循环
}
}）; //结束ajax请求
我在这里看到很少的代码。 http://youmightnotneedjquery.com/ 这是代码
纯Javascript
var request = new XMLHttpRequest（）;
request.open（'GET'，'/ my / url'，true）;
$ b $ request.onload = function（）{
if（request.status> = 200&&request; status< 400）{
//成功！
var resp = request.responseText;
} else {
//我们到达了目标服务器，但它返回了一个错误
}
};
request.onerror = function（）{
//有某种
的连接错误;
request.send（）;
如何设置 contentType 和 dataType
解决方案
$ b
函数jsonp（url，callback）{
var callbackName ='jsonp_callback_'+ Math.round（100000 * Math.random（））;
窗口[callbackName] =函数（数据）{
删除窗口[callbackName];
document.body.removeChild（script）;
回调（数据）;
};
var script = document.createElement（'script'）;
script.src = url +（url.indexOf（'？'）> = 0？'&'：'？'）+'callback ='+ callbackName;
document.body.appendChild（script）;
}
jsonp（'https://api.meetup.com/2/open_events.json?zip=12233&page=30&category=34&time=1w&key （data）{
alert（data.meta.description）;
}）;函数（data）{
alert（data.meta.description）;
}）;
https://jsfiddle.net/tgL5v0yo/
注意：
JSONP不会使用XMLHttpRequests。
使用JSONP的原因是为了克服XHR的跨源限制。
I want to convert Jquery Ajax to Pure JavaScript Ajax, i hope someone can help me,
jQuery
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: accessURL,
dataType: 'jsonp',
success: function (data) {
var dataLen = data.results.length;
// console.log("api returned " + dataLen + " total results");
$.each(data.results, function (i, val) {
var venueObj = val.venue;
//console.log(venueObj);
if ( ( venueObj && venueObj.lat != 0) ) {
meetupName.push(val.name);
meetupDescript.push(val.description);
meetupUrl.push(val.event_url);
//meetupLat = [];
meetupLat.push(venueObj['lat']);
//meetupLong = [];
meetupLon.push(venueObj['lon']);
//address
meetupAddress.push(
venueObj['address_1'] + "</h3><h3>" +
venueObj['city']
);
} else {
return;
}
});
//console.log(data.results);
//console.log(meetupLon);
meetupLon = _.without(meetupLon, 0);
//console.log(meetupLon);
meetupLat = _.without(meetupLat, 0);
//console.log(meetupLat);
//console.log(meetupAddress);
for (i=0; i < meetupLat.length; i++) {
//set the markers.
myLatlng = new google.maps.LatLng(meetupLat[i], meetupLon[i]);
allMarkers = new google.maps.Marker({
position: myLatlng,
map: map,
title: "Meetup",
html:
'<div class="markerPop">' +
"<h2>"+ meetupName[i] +"</h2>" +
"<h3>"+ meetupAddress[i] +"</h3>" +
"<p>"+ meetupDescript[i] +"</p>" +
"<a href='"+ meetupUrl[i] +"'>"+ meetupUrl[i] +"</p>" +
'</div>'
});
allLatlng.push(myLatlng);
//console.log(allLatlng);
google.maps.event.addListener(allMarkers, 'click', function () {
infowindow.setContent(this.html);
infowindow.open(map, this);
});
// Make an array of the LatLng's of the markers you want to show
// Create a new viewpoint bound
var bounds = new google.maps.LatLngBounds ();
// Go through each...
for (var i = 0, LtLgLen = allLatlng.length; i < LtLgLen; i++) {
// And increase the bounds to take this point
bounds.extend (allLatlng[i]);
}
// Fit these bounds to the map
map.fitBounds (bounds); //Finished !(a)
} //end for loop
}
}); //end ajax request
i saw little code here. http://youmightnotneedjquery.com/ this is the code
Pure Javascript
var request = new XMLHttpRequest();
request.open('GET', '/my/url', true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
// Success!
var resp = request.responseText;
} else {
// We reached our target server, but it returned an error
}
};
request.onerror = function() {
// There was a connection error of some sort
};
request.send();
how can i set the contentType and dataType
解决方案
Try:
function jsonp(url, callback) {
var callbackName = 'jsonp_callback_' + Math.round(100000 * Math.random());
window[callbackName] = function(data) {
delete window[callbackName];
document.body.removeChild(script);
callback(data);
};
var script = document.createElement('script');
script.src = url + (url.indexOf('?') >= 0 ? '&' : '?') + 'callback=' + callbackName;
document.body.appendChild(script);
}
jsonp('https://api.meetup.com/2/open_events.json?zip=12233&page=30&category=34&time=,1w&key=1719487a4a3c39b3e241e181837529', function(data) {
alert(data.meta.description);
});
https://jsfiddle.net/tgL5v0yo/
note:
JSONP does not use XMLHttpRequests. The reason JSONP is used is to overcome cross-origin restrictions of XHRs.
这篇关于将Jquery Ajax转换为纯JavaScript Ajax的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
