AJAX XMLHttpRequest Introduction

开发工具与关键技术:vs2015  JS
作者:陈星宇
撰写时间:2019.5.1

XMLHttpReque method in the ajax very easy, he can return to synchronous or asynchronous response from the Web server, and can return the contents of a text or a DOM document.
The XMLHttpReque very simple to use, but the wording is fixed, so I want to tell you about the science,
we have to look at the practical application of the wording ajax XMLHttpRequest.
First of all, we want to submit the data submitted, the first step must be to trigger the method so we give the button a button with id saveForm then add a click event when the click event is triggered, the data submitted.
Here Insert Picture Description
Event triggers, we have to submit it certainly quest to get the data, the data submitted makes sense
so we can use val (), get the value of input label, you can also use the method prop () check box to get there no data, and then determine whether the data.
Here Insert Picture Description
We can declare a variable, you need to take to install the data submitted,
and then append method to store data.
Here Insert Picture Description
Special attention is paid to the controller quoted in the field relative to be, without the quotes that we just get to those data, because this is a form submission so more data.
Data are handled well, then we started writing XMLHttpRequest fixed
we need to declare an object,
because the browser compatibility
we have to determine the wording of a different browser
Here Insert Picture Description
after the object is created, we can use inside the property
we typically use the three attributes
of a property Open
Open () this common property which generally has three parameters,
generally written as open (method, url, async)
1.method parameter is a method for HTTP requests. Values include GET, POST and HEAD.
2.url is the main parameter request, typically for the request sent to the address
3. async use parameter indicating a request should be performed asynchronously. If this argument is false, the request is synchronous, a subsequent call to send () will block until the response is completely received. If this argument is true or omitted, the default is asynchronous request submission.
Here Insert Picture Description
The above description is too complicated, we combine the project, first of all first argument is the state, we are using the POST method to submit, the second is the url , indicating that the data we submitted address, and the third parameter is whether the asynchronous commit, we do not have the data, submitted to the default asynchronous.

The second attribute is send
, if specified by the calling open () HTTP POST method or PUT, body parameter specifies the request body, as a string or Document object. If the request body must not apply, then this parameter can be null. For any other method, this parameter is not available, should be null (some do not allow that parameter is omitted).
Overall data is transmitted is sent, but must submit data to write open, but also to write back
method onreadystatechange, so that the wording is fixed XMLHttpRequest dead a
Here Insert Picture Description
note that this is in front of us to fd data fetch means so that a variable declared

The third property is the onreadystatechange
the onreadystatechange is an event handler. When the state of the XMLHttpRequest object changes, trigger this function. Changes from state 0 (uninitialized) to 4 (complete). Only in the state 4, we execute code.
The onreadystatechange and callback our previous contact with substantially similar to when the returned status change
triggers this event callback process
and this status code meaning
0: request not initialized
1: server connection established
2: request received
3: Request treatment
4: the request has been completed, and the response is ready
state when returned to 200, indicating 0K,
the return status is the familiar 404, indicating that the page could not be found
Here Insert Picture Description
contents determine the status of that callback, what they need to operate What write operation, fixed the wording of such a method on XMLHttpRequest finished.
Boils down to this simple four-step
1. Declare an object, 2 submitted by the specified address and open the way 3, send submitted data transfer, 4, onreadystatechange callback function.

Guess you like

Origin blog.csdn.net/tianxiu11/article/details/89974887