Two ways to implement Ajax via XMLHttpRequest and jquery (i.e. no refresh of page fetching data)

First, XMLHttpRequest achieve data acquisition

Do not use jquery to achieve the page does not refresh the way to get content, we use XMLHttpRequest native code implementation ; JS code is as follows:

1. Get the A node and add the Oncilck response function to it
function (){

//3, create a XMLHttpRequest ();    varRequest =NewXMLHttpRequest (); //4. Ready to send the requested data URL    varURL = This. href; varmethod = "GET"; //5. Call the Open method of the XMLHttpRequest objectRequest.open (Method,url); //6. Call the Send method of the XMLHttpRequest objectRequest.send (NULL); //7. Add onreadystatechange response function for XMLHttpRequest objectRequest.onreadystatechange =function(){                //8, judge whether the response is complete: XMLHttpRequest Object ReadyState Property value is 4        if(Request.readystate = = 4){
             //9, in determining whether the response is available: XMLHttpRequest Object Status Property value is            if(Request.status = = 200){
                     //10. Response Resultsalert (request.responsetext); }              }        }                  //2. Cancel the default behavior of the A node           return false; }                             

Insert HTML code:

<= "Hello.txt"> Click to get text content </a> 

Second, jquery to achieve AJAX access to information

This example is to dynamically retrieve data from the background to change the contents of the drop-down button;

The JS code is as follows:

functionBindCarteam0 () {//request data by URL         varURL = <select:link page= "/xiaoshouwl.do?method=getcarteamlist"/>;$.ajax ({url:url, type:' GET ', DataType:"JSON", Success:function(HTML) {varstr= "<option value= '-1 ' > All </option>";  for(vari=0;i) {str+ = "<option value=" "+html[i].id+" > "+html[i].name+" </option> "; }                    $("#carteam_code"). Empty (). HTML (str);     }            }); }

The HTML code is as follows:

 <  select:select  property  = "Carteam_code"   styleId  = "Carteam_code"   style  = "width:150px"  >  <  select:option  value  = "-1"  >  all </ select:option  >  </ select:select  >  

Where type types have get and post two kinds;

Post can transmit a large amount of data, get has a byte limit;

Two ways to implement Ajax via XMLHttpRequest and jquery (i.e. no refresh of page fetching data)