将Jquery Ajax转换为纯JavaScript Ajax


Convert Jquery Ajax to Pure JavaScript Ajax

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

我想将Jquery Ajax转换为Pure JavaScript Ajax，我希望有人可以帮助我，

jQuery的

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
$.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'] +"" +
                            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:
                                '' +
                                   ""+ meetupName[i] +"" +
                                   ""+ meetupAddress[i] +"" +
                                   "<p>
"+ meetupDescript[i] +"
</p>" +
                                   ""+ meetupUrl[i] +"
</p>" +

                                ''
                    });

                    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

我在这里看到的代码很少。 http://youmightnotneedjquery.com/这是代码

纯Javascript

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

我该如何设置contentType和dataType

相关讨论

尝试：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
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/

注意：

JSONP不使用XMLHttpRequests。
使用JSONP的原因是为了克服XHR的跨源限制。

相关讨论

问题在这里：

1
request.onload

尝试替换

1
request.onreadystatechange

要继续使用request.onload，请参阅此onreadystatechange

For more info Using XMLHttpRequest

更新1

1
2
3
var request = new XMLHttpRequest();
request.withCredentials = true;
request.open('GET', '/my/url', true);
相关讨论