[jquery Knowledge]jquery knowledge 12-ajax Beginner

Preface

1.Ajax Overview
2.load () method
3..get () and. Post ()

Ajax is all called: "Asynchronous JavaScript and XML" (Asynchronous JavaScript and XML), which is not a single technology of JavaScript, but a combination of a series of interactive Web application-related technologies. With Ajax, we can update the page without refreshing the status and implement asynchronous commit, which improves the user experience. I. Ajax Overview

The concept of Ajax was invented by Jesse James Garrett in 2005. It is not a single technology, it is a collection of technologies, mainly: JavaScript, through the user or other browser-related events to capture the interactive behavior; The XMLHttpRequest object, through which a request can be sent to the server without interrupting other browser tasks; Files on the server, saving text data in XML, HTML, or JSON format; Other JavaScript, which interprets data from the server (such as PHP's data obtained from MySQL) and renders it on the page.

Because Ajax contains many features, the advantages and disadvantages are also obvious. The main advantages are as follows: No plug-in support is required (General browser and JavaScript is enabled by default); Excellent user experience (no page refresh to get updatable data); Improve the performance of the WEB program (in terms of data transfer to achieve on-demand relaxation, not the overall submission); Offload server and bandwidth (transfer some of the server's operations to the client);

And the lack of Ajax by the following points: Different versions of the browser degree XMLHttpRequest object support is insufficient (such as IE5); The ability to move forward and backward is broken (because Ajax is always on the current page and does not have a chance on the front and back pages); Search engine support is not enough (because the search engine crawler can not understand the content of JS caused by the change data); Lack of development debugging tools (compared to other languages of the Toolset, JS or Ajax debugging development less poor). Asynchronous and synchronous

The most critical place to use Ajax is to implement asynchronous requests, accept responses, and execute callbacks. So what's the difference between asynchronous and synchronous? Our common Web program development is basically synchronous, meaning to execute a program to execute the next paragraph, similar to the call in the phone, a phone to answer the next call, and asynchronous can perform multiple tasks simultaneously, feel that there are many lines, similar to text messages, Don't stop accepting another text message because of reading a text message. Ajax can also be executed using synchronous mode, but the mode of synchronization is blocking mode, which will cause the execution of multiple lines and must be a single execution, the Web page will appear suspended animation, so the general Ajax mostly use asynchronous mode. two. Load () method

JQuery does a lot of encapsulation of Ajax, and we use it more conveniently, without having to consider browser compatibility. For encapsulation, JQuery uses a three-tier package: The bottom-most encapsulation method is:. Ajax (), while the second layer is encapsulated through this layer there are three ways:. Load (),. get (), and. Post (), the highest layer is the. GetScript () and $.getjson () methods.

The. Load () method can have parameters of three parameters: URL (must, request HTML file URL address, parameter type string), data (optional, send key/value data, parameter type is Object), callback (optional, successful or failed callback function, which is the function of the parameter type).

If you want Ajax to load an HTML content asynchronously, we just need a URL for the HTML request.

HTML
<input type= "button" value= "Get Data Asynchronously"/>
<div id= "box" ></div>


//jquery
$ (' Input '). Click (function () {$ (' #box '). Load (' test.html ');
});

1 2 3 4 5 6 7 8 1 2 3 4 5 6 7 8

If you want to filter the loaded HTML, simply follow the URL parameter followed by a selector.

URL
$ (' input ') with selector. Click (function () {
$ (' #box '). Load (' test.html. my ');});

1 2 3 1 2 3

If it is a server file, for example. Php. It is not only necessary to load data, but also to submit data to the server, so we can use the Second optional parameter, data. There are two ways to submit data to the server: Get and post.

If data is not passed, the default get method is
 $ (' input '). Click (function () {
$ (' #box '). Load (' Test.php?url=ycku ');});

1 2 3