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

This article mainly introduces the relevant knowledge of "what are the two cross-domain methods commonly used in AJAX". The editor shows you the operation process through an actual case, which is simple, fast and practical. I hope this article "what are the two cross-domain methods commonly used in AJAX" can help you solve the problem.

First of all, what is AJAX?

AJAX: Asynchronous JavaScript and XML (Asynchronous JavaScript and XML technology).

JavaScript:XMLHttpRequest (core object).

XML: extensible markup language, data storage and exchange.

It is to exchange data with the server and update the contents of some web pages without reloading (refreshing) the entire page.

Advantages and disadvantages: brushless new technology, enhance user experience, reduce network occupation; not conducive to SEO optimization.

Steps:

1. Create a core object

Var xhr=new XMLHttpRequest ()

two。 Prepare to establish a connection

Xhr.open (method, url, async)

Method-request method: "GET" / "POST"

Url-the URL of the requested resource

Async-whether asynchronous, usually true (asynchronous). If set to false, it means synchronous.

3. Send a request

Xhr.send ()

4. Process the response

Xhr.onreadystatechange=function () {}

Xhr.readyState-ready status code

-- indicates the xhr status information, that is, the stage at which the request reaches

-- 4: the request is processed and the response is ready

Xhr.status-HTTP status code

-200: OK, the request is successful

Xhr.responseText-- get the response text

Ready status code:

0: request is not initialized

1: the server connection has been established

2: the request has been received

3: request processing

4: the request has been completed and the response is ready

Common HTTP:

The server receives the request and requires the requestor to continue the operation.

2successfully received and processed the operation

Redirect, further action is required to complete the request

4 invalid color-client error, request containing syntax error or unable to complete the request

Server error occurred during the processing of the request.

We need to talk about the homologous strategy before we cross-domain.

Homologous policy:

Browser security policy to ensure the security of data access between non-homologous resources.

Direct access to resources that are not of the same origin is not allowed by default.

URL: protocol: / / Domain name: Port / path name? Query string # hash

Homology: the protocol, domain name and port are exactly the same. As long as any one of the three is inconsistent, it is non-homologous.

If access is needed between non-homologous resources, cross-domain access is required.

Cross-domain method 1: CORS cross-domain

CORS is relatively simple to cross-domain. You only need the backend to add a header information to the PHP file header and:

Header ('Access-Control-Allow-Origin:*')

* it means all domain names are allowed to access. If it is only a file access, then * replace it with the specified domain name.

Can solve the cross-domain requirements of GET/POST

Cross-domain method 2: JSONP cross-domain

Taking advantage of the fact that the introduction of external JS is not restricted by the same origin policy, and the response containing JSON encoded data will be automatically decoded, cross-domain can be realized. JSONP deals with cross-domain GET requests.

Steps:

Backend:

There is a server side to build a string: the content of the string is the structure of a function call that can be executed in JS

Front end:

1. Create element

two。 Set the src property, passing the callback parameter to indicate the name of the global callback function

3. Add to body

4. Create a global function to process response data

5. Delete element

This is the end of the content about "what are the two commonly used cross-domain methods of AJAX". Thank you for reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.