HTML and CSS Reference
In-Depth Information
var param = JSON.stringify(obj);
xhr.send(param);
}
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
cells.
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
added record.
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.
