Javascript to jQuery Conversion for an xml ajax call

Question

I have the following script

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", "/getSelectedProductData?offerCollectionRef=" + offerCollectionRef + "&brandRef=" + brandRef + "&priceRef=" + priceRef + "&defaultSmallImage=" + defaultSmallImage + "&offerCode=" + offerCode + "&index=" + index, false);    

xmlhttp.send();
xmlDoc = xmlhttp.responseXML;

I know how to write a $.ajax in jQuery. But I am stuck at how to send data.

My questions are

The return is XML and so the dataType: xml. am I correct?
How should I pass the data to the url?

Please elaborate on these things.
Disclaimer: The thing is that I couldn't test it myself and so this question.

so, does the code you already have work? If so, why are you changing it? — nickf
– nickf, Commented Sep 23, 2011 at 16:52

Darin Dimitrov · Accepted Answer · 2011-09-23 16:53:48Z

5

1 The return is XML and so the dataType: xml. am I correct?

You actually don;t need to specify it if the server sets proper Content-Type header to text/xml. jQuery will automatically consider the result as XML

2 How should I pass the data to the url?

You could use the data hash:

$.ajax({
    url: '/getSelectedProductData',
    type: 'GET',
    dataType: 'xml', // not necessary if the server sets the Content-Type: text/xml response header
    data: { 
        offerCollectionRef: offerCollectionRef,  
        brandRef: brandRef,
        priceRef: priceRef,
        defaultSmallImage: defaultSmallImage,
        offerCode: offerCode,
        index: index
    },
    success: function(xml) {
        // ...
    }
});

Also you seem to be sending a synchronous request by setting the async parameter to false. To emulate the same with jQuery you could add the async: false option. This being said, you probably shouldn't be doing it. SJAX (sync javascript) will block the browser during the request and ruin the user experience.

answered Sep 23, 2011 at 16:53

Darin Dimitrov

1.0m276 gold badges3.3k silver badges3k bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Blazemonger Over a year ago

You can also set data to a querystring. The above method is certainly easier to read and debug, though.

Darin Dimitrov Over a year ago

@mblase75, you can but you shouldn't as your parameters won't be properly url encoded. What if the offerCollectionRef variable equals for example to 'foo&bar=baz' This will totally ruin the request? So you should always use the data hash and never use string concatenations when dealing with urls.

Blazemonger Over a year ago

Darin: thanks for clarifying. I didn't say the querystring was a GOOD option, just that it was an option.

Darin Dimitrov Over a year ago

@mblase75, sure, it is an option. It's just important when you propose an option like this to specify that it should never be used because someone having the same problem in the future might read this post and actually use it.

codeandcloud Over a year ago

thanks darin. i was reading about the dataType Default: Intelligent Guess (xml, json, script, or html) now i get what the intelligent guess is. thanks a lot

kapa · Accepted Answer · 2011-09-23 16:59:46Z

Yep.
You can use the data property when passing settings to $.ajax(). It can be an object (it will be converted to a query string) or a query string. Please check the jQuery Manual for further details.

Excerpt from the manual:

data (Object, String) Data to be sent to the server. It is converted to a query string, if not already a string. It's appended to the url for GET-requests. See processData option to prevent this automatic processing. Object must be Key/Value pairs. If value is an Array, jQuery serializes multiple values with same key based on the value of the traditional setting (described below).

So from your example, url shall be '/getSelectedProductData', and data could be everything after ?. Or you can organize them into an object like { 'offerCollectionRef': offerCollectionRef, ... }, it is a bit more readable.

Collectives™ on Stack Overflow

Javascript to jQuery Conversion for an xml ajax call

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related