Share practical tutorials on Ajax and jsonp

1.ajax

##Asynchronous JavaScript and XML (Ajax ) is driving the new generation A key technology for Web sites (popularly known as Web 2.0 sites). Ajax allows data retrieval in the background without interfering with the display and behavior of the web application. Get data using the XMLHttpRequest function, an API that allows client-side JavaScript to connect to a remote server over HTTP. Ajax is also the driving force behind many mashups, which integrate content from multiple places into a single web application.

However, due to browser restrictions, this method does not allow cross-domain communication. If you try to request data from a different domain, a security error will occur. These security errors can be avoided if you can control the remote server where the data resides and if every request goes to the same domain. But what good is a web application if it just stays on its own server? What if you need to collect data from multiple third-party servers?

2. Working principle

　A , ajax is js loading data through a website, this process is usually invisible to the user.

B. For traditional web pages (ajax is not applicable), if the content needs to be updated, the entire web page must be reloaded.

3. About synchronization and asynchronousness

Synchronization requires waiting for the return result before continuing, while asynchronous does not need to wait. Generally, it is necessary Listen for asynchronous results.

Synchronization is a queue in a straight line, asynchronous is not in a queue, each goes its own way

For example:

　　Add shopping cart question. Using the synchronous method, every time you add an item to the shopping cart, you need to wait for the page to reload before performing other operations.

　　With the asynchronous method, you only need to listen, and you can perform other operations without waiting. Relatively speaking, asynchronous loading has greater advantages, and the advantages of ajax can be seen from this.

4. Create ajax object (and compatible)

　(1)Create XMLHttpRequest object

1 if(window.XMLHttpRequest){2     var xhr=new XMLHttpRequest();3 }else{4     var xhr=new ActiveXObject("Microsoft.XMLHTTP");5 };

　(2) Open the link to the server

open(method,url,asyn)

Parameters:

Method: string, the type of request, get or post

## URL: string, the location of the file on the server

asyn: Boolean, true (asynchronous) or false (synchronous)

Synchronization needs to wait for the return result before continuing, asynchronous does not have to wait

　(3) Send to the server

xhr.send() sends the request to the server (get request)

　xhr. send(string) is only used for post requests

　(4) Detect the request status of the server

onreadystatechange event (corresponding ready state )

The readyState and status attributes store the status of XMLHttpRequest

When readyState changes, the onreadystatechange event will be triggered

The readyState changes from 0 to 4

0: The request is not initialized

1: The server connection has been established

2: The request has been received

3. The request is being processed

4. The request has been completed

Status is equal to 200: "OK"

Status is equal to 404: Page not found

When readyStatus is 4 And when the status is 200, it means that the response is ready.

5. The importance of the XMLHttpRequest object

If you need to get a response from the server, please use the XMLHttpRequest object. ：

## 　　responseText or responseXML attribute

　　responseText gets the response data in the form of a string

　　responseText Obtain response data in XML form

If the response from the server is not XML, use the responseText attribute responseText to return the response in string form. You can use it like this: Div.innerHTML = xhr.responseText;

6. Regarding the difference between ajax request method get and post:

GET: more commonly used, more convenient; performance Good; sending data in plain text is not as secure as POST; the data transmission size is limited, and the data is passed through the URL, but the URL has a certain length limit. ,

POST: relatively rarely used; performance is only about 1/3 of get; slightly safer than get; no data size limit;

7. About cross-domain

Cross-domain can be simply understood as accessing another domain name from one domain name Domain name, for security reasons, browsers do not allow this;

Note: The src attribute of img, script, iframe and other elements can directly request resources across domains.

8. Ajax cross-domain## 1. You can let the server go to other websites to get content and return it Page

2. Give the ajax of the page a url. Ajax passes the url to the server, and the server accesses the address.

9. jsonp cross-domain

## jsonp uses the cross-domain capability of script tags to request resources. Obviously, the purpose is still json, and it is cross-domain acquisition. Use js to construct a script tag, assign the json url to the src attribute of the script, insert the script into the dom, and let the browser get it, callback({"name":"jack "}), callback is a callback method that exists on the page. The parameter is to get the desired json. The callback method must comply with the server's regulations. Generally, callback or cb.

The above is the detailed content of Share practical tutorials on Ajax and jsonp. For more information, please follow other related articles on the PHP Chinese website!