Section 173th, Jquery,ajax

Jquery,ajax

Learning Essentials:

1.Ajax Overview

2.load () method

3.$.get () and $.post ()

4.$.getscript () and $.getjson ()

5.$.ajax () method

6. Serialization of Forms

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.

A Ajax Overview

The concept of Ajax was invented by Jesse James Garrett in 2005. It is not a single technology in itself, it is a collection of technologies, mainly:

1.JavaScript, capturing interactive behavior through user or other browser-related events;

A 2.XMLHttpRequest object that can send a request to the server without interrupting other browser tasks;

3. Files on the server, saving text data in XML, HTML, or JSON format;

4. Other JavaScript that 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 of the following points:

1. Plug-in support is not required (General browser and JavaScript is enabled by default);

2. User experience is excellent (can not refresh the page to obtain updatable data);

3. Improve the performance of the WEB program (in the delivery of data in order to relax on demand, not the overall submission);

4. Reduce the burden on the server and bandwidth (transfer some server operations to the client);

And the lack of Ajax by the following points:

1. Different versions of browser degree XMLHttpRequest object support is insufficient (such as IE5);

2. The function of forward and backward is destroyed (because Ajax is always on the current page, there is no chance to the front and back page);

3. Search engine support is not enough (because the search engine crawler can not understand the content of JS caused by the change data);

4. Lack of development debugging tools (as opposed to other language 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 in order to execute the next paragraph, similar to the call in the phone, a call to answer the next call, and asynchronous can execute multiple tasks at the same time, feel that there are many lines, similar to text messages, not because of reading a text message and stop accepting another 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-layer package: The lowest-level package is: $.ajax (), while the second layer is encapsulated by this layer in three ways:. Load (), $.get (), and $.post (), the highest layer is $.getscript () and $.getjson () method.

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

The Load () method Gets an external file data to write to a Div

External file new.html

< span > Jade Show culture spread </span><span> www.jxiou.com</span>

HTML on this page

<type= "button"  value= "Get Data asynchronously"/><  ID= "box"></div>

jquery get

    $ (' input '). Click (function  () {        $ (' #box '). Load (' new.html ');  // gets new.html data written to the #box element    });

Get the following page code

<inputvalue= "Get Data asynchronously"type= "button"><DivID= "box">    <span>Jade Show Cultural Communication</span>    <span>Www.jxiou.com</span></Div>

The Load () method Gets an external file data to filter out the specified data to write to a Div

Section 173th, Jquery,ajax