Home >Web Front-end >Front-end Q&A >What is the difference between jsonp and ajax

What is the difference between jsonp and ajax

青灯夜游
青灯夜游Original
2022-01-13 18:16:593581browse

Difference: 1. The core of ajax is to obtain non-this page content through xmlHttpRequest, while the core of jsonp is to dynamically add script tags to call the js script provided by the server; 2. jsonp only supports get requests, while ajax supports get and post requests.

What is the difference between jsonp and ajax

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

The calling methods of ajax and jsonp are very similar. The purpose is to request the URL and then process the data returned by the server. Therefore, frameworks such as jquery and ext encapsulate jsonp as a form of ajax. . Let's take a look at jsonp and ajax and introduce their differences.

1. Working principle of Ajax

It is equivalent to adding an intermediate layer (AJAX engine) between the user and the server, so that the user Operations and server responses are asynchronous. The Ajax engine will do some data verification and data processing for user requests. Not all requests are submitted to the server. When new data needs to be read from the server, the Ajax engine submits the request to the server on its behalf. The biggest advantage of AJAX is that it communicates with the server to maintain data without refreshing the entire page.

Process:

The first step: Create an ajax engine object, IE6 is new ActiveXObject, other browsers are new xmlHttpRequest object;

The second step: Call The open method starts a request for sending. The open method passes in three parameters: request type, request url and a Boolean value;

The third step: call the send method to send;

The fourth step Step: Process the callback function onreadystatechange, process the response data when readState = 4 (response data completed), and status = 200 (request successful).

Note: The callback function must be written before open() and send().

2. Working principle of Jsonp

Dynamicly create a script tag and use the script tag's src attribute to achieve cross-domain access without restrictions.

The web client calls the js format file (suffix .json) dynamically generated on the cross-domain server in the same way as calling the script. The purpose of the json file dynamically generated by the server is to load the data required by the client. .

Allows the user to pass a callback parameter to the server, and then when the server returns data, it will use this callback parameter as a function name to wrap the json data, so that the client can customize its own function to automatically process the return. data.

3. The difference between Ajax and jsonp

  • The core of ajax is to obtain non-this page content through xmlHttpRequest;

    The core of jsonp is to dynamically add script tags to call the js script (suffix .json) provided by the server.

  • jsonp is a method or non-mandatory protocol, and ajax does not necessarily have to use json format to transmit data.

  • jsonp only supports get requests, and ajax supports get and post requests.

【Related tutorial recommendations: AJAX video tutorial

The above is the detailed content of What is the difference between jsonp and ajax. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn