HTML and CSS Reference
var param = JSON.stringify(obj);
InsertCustomer() acts as the event handler for the Insert button. The first thing the function does is
grab the newly entered Customer details, such as CustomerID , CompanyName , ContactName , and Country .
Observe how the jQuery selector retrieves the values from the <input> elements. Inside the
InsertCustomer() function, the keyword this refers to the Insert button. The jQuery closest() method
returns the nearest surrounding <tr> element. This way, you reach the table row that contains the text
boxes. The children() method called on the table row returns all the <td> elements it contains. The eq()
method returns a specified child element based on the index, allowing you to reach the individual <td>
element. Another set of children() and eq() methods gives you access to the <input> elements in the table
The values entered in the text boxes are stored in local variables: customerID , companyName ,
contactName , and country . A JSON object is formed using these values. Note that the JSON object must have
the same key names as the Customer data-model property names so that ASP.NET can map the JSON object
to the data-model class.
A new XMLHttpRequest object is then created, and a POST request is opened using its open() method.
Because you're sending JSON data to the server, the Content-Type header is set to application/json using
the setRequestHeader() method. The readystatechange event handler displays a success message to the
user if readyState is 4 (complete). GetCustomers() is called again to refresh the customer list with the newly
After you wire the readystatechange event handler, the request is sent to the server using send() . The
send() method takes the string representation of the JSON Customer object as its parameter. This JSON
object is received by the Post() method of the Customer Web API controller.
You can now run the Customer List application and test the CRUD operations on it. You might wonder
how you can make cross-origin requests using the XMLHttpRequest object. Luckily, you need not make any
code-level changes to XMLHttpRequest to make cross-origin requests. All you need to do is ensure that the
IIS running the other domain allows CORS requests. You can configure the CORS header using either IIS
Manager or web.config, , as described earlier.
Uploading Files Using XMLHttpRequest
In Chapter 9, you learned about the File API. In that chapter you also learned how to select and upload
files from the client machine onto the web server using the jQuery $.ajax() method. You can accomplish
the same task using the XMLHttpRequest object. One advantage of using XMLHttpRequest is that it allows you
to track the upload operation via progress events. By handling the progress event, you can display some
sort of progress indicator (say, a progress bar) to the user. Figure 11-5 shows a web form that uses the
upload progress event.