Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how to use native and jQuery ajax". The content is detailed, the steps are clear, and the details are handled properly. I hope this article "how to use native and jQuery ajax" can help you solve your doubts.

Introduction to Ajax

Ajax is considered to be an abbreviation for Asynchronous (asynchronous) JavaScript And Xml. Today, technologies that allow browsers to communicate with the server without refreshing the current page are called Ajax.

Synchronization refers to the mode of communication in which the sender sends data and waits for the receiver to send back a response before sending the next data packet.

Asynchronism refers to the mode of communication in which the sender sends the data and then sends the next data packet without waiting for the receiver to send back the response.

Defects of AJAX

AJAX uses a lot of JavaScript and AJAX engines, depending on browser support. IE5.0 and above, Mozilla1.0, NetScape7 and above are supported. Although Mozilla also supports AJAX, XMLHttpRequest is provided in different ways. Therefore, programs that use AJAX must test compatibility for individual browsers.

When AJAX updates the content of the page, it does not refresh the entire page, so the back function of the page is invalid; some users often don't know whether the current data is old or updated. This requires reminding the user that "the data has been updated" in an obvious place.

Streaming media support is not as good as FLASH.

Some handheld devices (such as mobile phones, PDA, etc.) can not support Ajax very well.

Serialization of form data:

$('# submit') .click (function () {$('# form'). Serialize (); / / serializes the data into a string based on the name in the input; eg:name=yang $('# form'). SerializeArray (); / / serializes the data into an array based on the name in the input Eg: [object] / / Note: the following two methods that are not jQuery: JSON.parse () / / json string conversion to json object JSON.stringify () / / json object to json string})

The ajax method of jQuery:

$.ajax ({url:'/comm/test1.php', type:'POST', / / GET async:true, / / or false, whether asynchronous data: {name:'yang',age:25}, timeout:5000, / / timeout dataType:'json', / / returned data format: json/xml/html/script/jsonp/text beforeSend:function (xhr) {console.log (xhr) console.log ('before sending')} Success:function (data,textStatus,jqXHR) {console.log (data) console.log (textStatus) console.log (jqXHR)}, error:function (xhr,textStatus) {console.log ('error') console.log (xhr) console.log (textStatus)}, complete:function () {console.log ('end')})

Native ajax methods:

('# send') .click (function () {/ / 5 phases of the request), corresponding to the value of readyState / / 0: not initialized, send method not called; / / 1: sending request, send method has been called; / / 2: request sent, send method executed; / / 3: parsing response content; / / 4: response content parsing completed Var data = 'name=yang'; var xhr = new XMLHttpRequest (); / / create an ajax object xhr.onreadystatechange = function (event) {/ / A pair of ajax objects to listen if (xhr.readyState = = 4) {/ / 4 means parsing completed if (xhr.status = = 200) {/ / 200 is a normal return console.log (xhr)}}; xhr.open (' POST','url',true) / / establish a connection. Parameter 1: sending method, 2: request address, 3: whether asynchronous, true is asynchronous xhr.setRequestHeader ('Content-type','application/x-www-form-urlencoded'); / / optional xhr.send (data); / / send}) After reading this, the article "how to use native and jQuery ajax" has been introduced. If you want to master the knowledge points of this article, you still need to practice and use it yourself. If you want to know more about related articles, please follow the industry information channel.

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.