Coka Cola Bottle

A Quiz and Solution

A soft drink sells for 2 dollars per bottle. Consumers can redeem or exchange one bottle for free with 2 bottle caps or 4 bottle bodies. If you have 20 dollars, how many bottles of drinks you can receive?

Get solution now!

ajax, contentType and data

• be noted that the ajax call defaults to application/x-www-form-urlencoded
• always convert and put a string in the data field to prevent auto data conversion to the default format
• explicitly specify the contentType field: application/json; charset=utf-8

The right way

[sourcecode language=”javascript” wraplines=”false” collapse=”false”]
var myData = { firstName: "Bruce" };
$.ajax({
type: "POST",
url: "/webService/service1",
contentType: "application/json; charset=utf-8", //Content-Type
data: JSON.stringify(myData), //Request Body
dataType: "json", //Accept: application/json, text/javascript, */*; q=0.01
success: function (data) {}
});
[/sourcecode]

WRONG! contentType not match to data

[sourcecode language=”javascript” wraplines=”false” collapse=”false”]
var myData = { firstName: "Bruce" };
$.ajax({
type: "POST",
url: "/webService/service1",
contentType: "application/json; charset=utf-8", //Content-Type
data: myData, //not a string, converted to application/x-www-form-urlencoded
dataType: "json", //Accept: application/json, text/javascript, */*; q=0.01
success: function (data) {}
});
[/sourcecode]

Typical ajax call: application/x-www-form-urlencoded

[sourcecode language=”javascript” wraplines=”false” collapse=”false”]
var myData = { firstName: "Bruce" };
$.ajax({
type: "POST",
url: "/webService/service1",
data: myData, //not a string, converted to application/x-www-form-urlencoded
dataType: "json", //Accept: application/json, text/javascript, */*; q=0.01
success: function (data) {}
});
[/sourcecode]

• contentType: When sending data to the server, use this content type. contentType must match to the actual type of data. Default is “application/x-www-form-urlencoded; charset=UTF-8”, which is fine for most cases. If you explicitly pass in a content-type to $.ajax(), then it’ll always be sent to the server (even if no data is sent). If no charset is specified, data will be transmitted to the server using the server’s default charset; you must decode this appropriately on the server side.
• data: 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.
• processData: by default, data passed in to the data option as an object will be processed and transformed into a query string, fitting to the default content-type “application/x-www-form-urlencoded”. If you want to send a DOM Document, or other non-processed data, set this option to false.
• dataType: the type of data that you’re expecting back from the server. If none is specified, jQuery will try to infer it based on the MIME type of the response.

• References
  • jQuery.ajax()
  • MDN: encodeURIComponent

In CSS 2.1, a box may be laid out according to three positioning schemes:

1. Normal flow. In CSS 2.1, normal flow includes block formatting of block-level boxes, inline formatting of inline-level boxes, and relative positioning of block-level and inline-level boxes.
2. Floats. In the float model, a box is first laid out according to the normal flow, then taken out of the flow and shifted to the left or right as far as possible. Content may flow along the side of a float.
3. Absolute positioning. In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

An element is called out of flow if it is floated, absolutely positioned, or is the root element. An element is called in-flow if it is not out-of-flow. The flow of an elementA is the set consisting of A and all in-flow elements whose nearest out-of-flow ancestor is A.

• References
  • Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification