Master Ajax in an hour
Life, one stop has one stop of scenery, one year has one year of taste, your age should be the medal of your life, not the reason for your sadness.
What is AJAX?
AJAX is a technology that can update some web pages without reloading the whole web page.
Ajax is not a new programming language, but a technology for creating better, faster and more interactive Web applications.
In 2005, Google made AJAX popular through its Google Suggest.
Google Suggest uses AJAX to create a highly dynamic web interface: when you enter keywords in Google's search box,
Just like Baidu's search box in China:
Traditional web pages (that is, web pages without ajax Technology) need to reload the whole web page if they want to update the content or submit a form.
Web pages using ajax technology can realize asynchronous local update through a small amount of data exchange in the background server.
Using Ajax, users can create a direct, highly available, richer and more dynamic Web user interface close to local desktop applications.
Increase B/S experience
B/S: the mainstream in the future and will continue to grow explosively;
Product chain: H5 + web page + client + mobile terminal (Android, IOS) + applet
What can you do with AJAX?
When registering, enter the user name to automatically detect whether the user already exists.
When logging in, you will be prompted with the wrong user name and password.
When deleting a data row, the row ID is sent to the background and deleted in the background database. After the database is deleted successfully, the data row is also deleted in the page DOM.
We can use a tag on the front end to fake an ajax look. iframe tag
We won't explain the implementation of Ajax in pure JS. Here we directly use the one provided by jQuery, which is more convenient to learn and avoid repeated wheel building. Interested students can learn the essence of XMLHttpRequest!
Ajax's core XMLHttpRequest object (XHR). XHR provides an interface for sending requests to the server and parsing server responses. It can obtain new data from the server asynchronously.
jQuery provides several AJAX related methods.
Through the jQuery AJAX method, you can use HTTP Get and HTTP Post to request text, HTML, XML or JSON from a remote server - and you can load these external data directly into the selected elements of the web page.
jQuery is not a producer, but a porter of nature.
The essence of jQuery Ajax is XMLHTTPRequest, which is encapsulated and easy to call!
To use jQuery, you need to import the js file of jQuery first; Click jQuery official website to download
Let's look at his method;
To use jQuery, you need to import jQuery. To use Vue to import Vue, you don't need to use either. You can implement it in its own ecology
- Write the Controller for the corresponding processing and return the message or string or json format data;
- Writing ajax requests
- url: Controller request
- data: key value pair
- success: callback function
- Bind events to Ajax, click click, lose focus onblur, and the keyboard pops up