Ajax in Ajax jquery in Ajax JS

Ajax (Asynchronous Javascript and XML) allows Ajax to update Web pages asynchronously by exchanging small amounts of data with the server in the background. This means that you can update a part of a webpage without reloading the entire page.

1, the advantages of Ajax:

No plug-in support, can be supported by most major browsers

A great user experience that updates data without having to refresh the entire page

Improve the performance of Web programs by submitting the required data to the server by XMLHttpRequest objects

　　

2, the core of Ajax: XMLHttpRequest object, send an asynchronous request, receive the corresponding, execute callback is through it. 3 Ajax Request Process: (JS) Create XMLHttpRequest object, connect server, send request, receive response data, 1, create XMLHttpRequest object:

varXHR =function createxhr () {if(Window. ActiveXObject) {//IE5 IE6                    return NewWindow. ActiveXObject ("Microsoft.XMLHTTP"); }Else if(Window. XMLHttpRequest) {//IE7 above and other browsers                    return NewXMLHttpRequest (); }Else{alert ("your browser is incompatible, change a"); return NULL; }                }

2, ready to send a request to the server, open ()

          if (xhr!=null) {                  // If the instantiation succeeds, call the open () method and start preparing to send the request to the server            xhr.open ("  post"true")                        ; /* three parameters: The first is the type of send request, POST and get two kinds of the                      second is the address of the URL, (the address can also be a static file, XML file)                      third, whether it is asynchronous, true is asynchronous. False is Synchronous */          }

3. Processing of callback functions (processing of data reception)

// Specifying response functions               function ProcessResponse () {                           }

4, Send,

Xhr.send (); //

Note the order of several writes:

 varXHR =createxmlhttprequest (); Xhr.open ("GET","test.jsp",true); Xhr. onReadyStateChange=function () {if(xhr.readystate==4&&xhr.status== $){            //access to information through Responsexml and Responetext            vardoc = Xhr.responsexml;//Responsexml can only get XML format(varDoc =xhr.responsetext)}} xhr.send ();

2. Ajax implementation in jquery

1, load (), directly for the wrapper to create,

$ ("#content"). Load (Url,[data] (data, can be omitted), [callback] (callback function, can be omitted));
If there is a second, it is sent by post, if it is not sent by the GET method.

Indicates that the element with ID test in the. html file is loaded into the content
$ (' #content '). Load ("01.html #test");

2, $.get ();

$. Get (Url,[data] (data, can be omitted), [callback] (callback function, can be omitted));

3, $.getjson ()

4, $.post ()

5, $.ajax () $.post, $.get are some simple methods, if you want to deal with complex logic, still need to use the Jquery.ajax ()

I. GENERAL format of $.ajax

$.ajax ({URL:"http://www.hzhuti.com",//the requested URL addressDataType:"JSON",//return format as JSON                   Async:true,//If the request is asynchronous, it defaults to Async, which is also an important feature of AjaxData: {"ID":"value"},//parameter ValuesType"GET",//Request Methodbeforesend:function () {//Pre-Request processing}, Success:function (req) {//processing when a request succeeds}, Complete:function () {//processing of request completion}, Error:function () {//Request Error Handling                  }        });

Second, the parameter description of $.ajax

Parameter description

Url	Necessary. Specifies which URL to send the request to.
Data	Optional. The map or string value. Specifies the data that is sent to the server along with the request.
Success (data, Textstatus, JQXHR)	Optional. The callback function to execute when the request succeeds.
DataType	Optional. Specifies the data type of the expected server response. The default is to perform smart judgments (XML, JSON, script, or HTML).

Third, some:

//1.$.ajax asynchronous requests with JSON datavarAJ =$.ajax ({URL:'productmanager_reverseupdate',//Jump to Actiondata:{Selrollback:selrollback, Seloperatorscode:seloperatorscode, P Rovincecode:provincecode, Pass2:pass2}, type:'Post', Cache:false, DataType:'JSON', Success:function (data) {if(Data.msg = ="true" ){              //View ("Modified successfully!  "); Alert"modified successfully! ");          Window.location.reload (); }Else{view (data.msg); }}, Error:function () {//view ("Exception!  "); Alert"Unusual! "); }}); In the submission, if there is a form, add the form to the parameter data, there are many, very cumbersome, jquery provides the serialize () method, can be serialized DOM elements into a string//2.$.ajax asynchronous requests that serialize the contents of a table to a stringfunction Notips () {varFormparam = $ ("#form1"). Serialize ();//Serialize table contents as strings$.ajax ({type:'Post', URL:'Notice_notipsnotice', Data:formparam, cache:false, DataType:'JSON', Success:function (data) {}}); }  //3.$.ajax asynchronous requests for stitching URLsvaryz=$.ajax ({type:'Post', URL:'validatepwd2_checkpwd2?password2='+Password2, data:{}, cache:false, DataType:'JSON', Success:function (data) {if(Data.msg = ="false")//The server returns false, changing the value of ValidatePassword2 to Pwd2error, which is asynchronous and needs to consider the return time{textpassword2.html ("<font color= ' red ' > Business password is incorrect! </font>"); $("#validatePassword2"). Val ("Pwd2error"); CheckPassword2=false; return; }}, Error:function () {}}); //4.$.ajax asynchronous request to splice data$.ajax ({URL:'<%=request.getcontextpath ()%>/kc/kc_checkmernameunique.action', type:'Post', Data:'mername='+values,Async:false,//default is True asyncerror:function () {alert ('Error'); }, Success:function (data) {$ ("#"+divs). HTML (data); }});

Global functions for Ajax set in JQuery

var $doc = $ (document), $doc. Ajaxcomplete (function (event, xhr,options) {     var str_timeout = xhr.responsetext;     if ("session_timeout" = = = Str_timeout        ) {"/system/ login/login.jsp";    }});

Ajaxstart	When a jquery Ajax function or command is initiated, but before the XHR instance is created	The global callback information object that the type is set to Ajaxstart
Ajaxsend	After the XHR instance is created, but before the XHR instance is sent to the server	The global callback information object that the type is set to Ajaxsend; xhr instance; properties used by the $.ajax () function
Ajaxsuccess	After the request has been returned from the server, and the response contains a success status code	The global callback information object that the type is set to ajaxsuccess; xhr instance; properties used by the $.ajax () function
Ajaxerror	After the request has been returned from the server, and the response contains a failure status code	The Ajaxerror type is set to the global callback information object, the XHR instance, the property used by the $.ajax () function, and the exception object returned by the XHR instance, if any.
Ajaxcomplete	After the request has been returned from the server, and after any known ajaxsuccess or Ajaxerror callback function has been called	The global callback information object that the type is set to Ajaxcomplete; xhr instance; properties used by the $.ajax () function
Ajaxstop	After all other AJAX processing finishes and any other applicable global callback functions have been called	The global callback information object that the type is set to Ajaxstop

If you set the option parameter to Jquery.ajax () or Jquery.ajaxsetup () global false , you can prevent the AJAX request from triggering a global Ajax event.

Ajax in Ajax

Ajax in JavaScript