Shulou(Shulou.com)06/03 Report--

In this issue, the editor will bring you an Ajax about how to achieve a front-end Jquery. The article is rich in content and analyzes and narrates it from a professional point of view. I hope you can get something after reading this article.

Hand-written ajax step by step

The order of communicating with the backend in the web page is that the client initiates a request to the server, and then the server replies to the client. The tool for communication is ajax. If you like football, you must know that there is also a big football club called Ajax in the Dutch League. Ajax is like a phone, linking a page to a server. The basic usage is as follows:

Figure 1

We can see from figure 1 that $.ajax is a function whose argument is an object, so we can define it as follows:

Var $= {}; / / simulate jquery object $.ajax = function (options) {/ / implementation logic}

Then we start to write the logic in the function.

Figure 2

As shown in figure 2, the key to Magi Ajax is the XMLHttpRequest object, which provides secure access to the http protocol, using its two methods and an event:

1) the first parameter of the open method is the request type: get, post, head, etc. The second parameter is the interface address of the request, and the third parameter indicates whether the ajax request is true or false. If it is asynchronous, js will continue to execute after the ajax sends the request and will not wait for the server to respond. We generally choose async to improve the rendering efficiency of the page.

2) the send method has only one parameter, which represents the parameter sent to the server, usually an object

3) onreadystatechange is an event that listens to the state of the entire process from the beginning of the request to the end of the request, which is stored in the readyState property of the xhr.

ReadyState status:

0 means it is not initialized and the open method has not been executed yet

1 means loading, open has been executed but send has not been executed

2 indicates that the load has been completed, the send has been executed, and the request has been sent

3 means waiting for a response from the server

4 indicates that the response has been completed.

From the above readyState status, we can see that ajax only needs 4, and the other states are actually failures!

In addition, the status attribute of xhr represents the status code returned by the server. According to our experience, there is a problem when the status code is above 400. it is either a server problem or a client problem! Between 300 and 400 seems to have something to do with redirection, but there is one exception-304. If you know about browser caching, you must know that it has something to do with negotiation caching. In fact, it represents a successful request! In addition, the status below 200 requires the requestor to continue to operate, which does not meet the requirements! To sum up, the available status code is between 200 and 300, plus a 304!

Well, after the above analysis, let's continue to refine the handler for the onreadystatechange event:

Figure 3

As shown in figure 3, in the event handler, we write two methods, ajaxSuccess and ajaxError, which execute the function properties success and error passed in by the ajax parameter object, respectively. We know that there is also a property in the ajax object parameter called complete, which is a method that is executed regardless of whether the request is successful or not, so it needs to be called and executed once in both ajaxSuccess and ajaxError. Xhr.responseText represents the data returned by the server, and xhr.statusText represents the status information corresponding to the status code.

Next, we need to set the request header, which can be done with xhr.setRequestHeader, as follows:

Figure 4

In figure 4, we set two special request headers by default (Accept and Content-type). When we send a request to the server using the post type with parameters, content-type needs to be set to application/x-www-form-urlencoded, and other request headers can be passed through the object parameter headers property of ajax. Note that the setRequestHeader method needs to be called after the open method!

In some scenarios, we need to make some logical judgment before sending the request. If the condition is not met, we need to prevent the request from being sent. In order to meet the demand, we need to add a hook before ajax calls the open method!

Figure 5

In figure 5, we determine whether the request needs to be cancelled by the execution result of the beforeSend function!

In fact, there is still one step left to do here, then timeout logic. For example, in the case of a bad network, we cannot keep the page in the loading state all the time. We need to set a timeout period, which means the ajax request failed! To develop timeout requirements, the easiest thing we can think of is to use timer setTimeout, and now we make it up!

Figure 6

As shown in figure 6, in the case of a timeout, we set the onreadystatechange event handler to an empty function and abandon the request, then execute the error function, and we need to clear the timer in time in the normal onreadystatechange event handling logic!

At this point, a simple ajax has been developed, and there is no problem with using demo directly now!

The above is the editor for you to share how to achieve a front-end Jquery Ajax, if you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.