此ajax代码有什么作用? [关闭]

Closed. This question needs details or clarity. It is not currently accepting answers.
                </div>
            </div>
        </div>
                <hr class="my12 outline-none baw0 bb bc-powder-2">
            <div class="grid fw-nowrap fc-black-600">
                    <div class="grid--cell mr8">
                        <svg aria-hidden="true" class="svg-icon iconLightbulb" width="18" height="18" viewbox="0 0 18 18"><path d="M9.5.5a.5.5 0 0 0-1 0v.25a.5.5 0 0 0 1 0V.5zm5.6 2.1a.5.5 0 0 0-.7-.7l-.25.25a.5.5 0 0 0 .7.7l.25-.25zM1 7.5c0-.28.22-.5.5-.5H2a.5.5 0 0 1 0 1h-.5a.5.5 0 0 1-.5-.5zm14.5 0c0-.28.22-.5.5-.5h.5a.5.5 0 0 1 0 1H16a.5.5 0 0 1-.5-.5zM2.9 1.9c.2-.2.5-.2.7 0l.25.25a.5.5 0 1 1-.7.7L2.9 2.6a.5.5 0 0 1 0-.7z" fill-opacity=".4"></path><path opacity=".4" d="M7 16h4v1a1 1 0 0 1-1 1H8a1 1 0 0 1-1-1v-1z" fill="#3F3F3F"></path><path d="M15 8a6 6 0 0 1-3.5 5.46V14a1 1 0 0 1-1 1h-3a1 1 0 0 1-1-1v-.54A6 6 0 1 1 15 8zm-4.15-3.85a.5.5 0 0 0-.7.7l2 2a.5.5 0 0 0 .7-.7l-2-2z" fill="#FFC166"></path></svg>
                    </div>
                <div class="grid--cell lh-md">
                    <p class="mb0">
                        <b>Want to improve this question?</b> Add details and clarify the problem by <a href="/posts/23605477/edit">editing this post</a>.
                    </p>
                    <p class="mb0 mt6">Closed <span title="2014-05-12 10:44:48Z" class="relativetime">5 years ago</span>.</p>
                </div>
            </div>
    </aside>

So i'm a little stuck can someone please look at this function in my work:

function showUser(str) {
    if (str=="") {
        document.getElementById("txtHint").innerHTML="";
        return;
    } 
    if (window.XMLHttpRequest) {
        // code for IE7+, Firefox, Chrome, Opera, Safari
        xmlhttp=new XMLHttpRequest();
    } else { // code for IE6, IE5
        xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    xmlhttp.onreadystatechange=function() {
        if (xmlhttp.readyState==4 && xmlhttp.status==200) {
          document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
        }
    }
    xmlhttp.open("GET","venue2.php?hotel="+str,true);
    xmlhttp.send();
}

Can someone explain what this function actually does please? also can i adapt it to make it work in a form?

</div>

It makes an Ajax call to file venue2.php passing the parameter hotel width value equals to str. If the call is ok, it will put the response Text inside the html tag with the id = txtHint

This function is an AJAX(=Asynchron Javascript and XML) Request without using any popular framework like dojo or jquery. AJAX is used to create requests without reloading the page. For example: When you open stackoverflow, you are getting logged in automatically after some seconds without having to reload the page. Basically it checks if the given parameter str is empty. If yes, clear the element's value with the id 'txtHint'. If its not empty, its getting the value of the element 'txtHint' and puts it into the request. Then it adds 'hotel=str'.

1) Function gets one argument called str.

2) It checks if str is empty string. And if that empty then break the code execution (return).

3) If str is not empty, then create XMLHttpRequest object and send request to venue2.php with parameter hotel=str from arguments.

4) And when request is done then load response into txtHint div.

function showUser(str) {
    //in this part if str is null then clear the element "txtHint":
    //============================================================
    if (str=="") {
        document.getElementById("txtHint").innerHTML="";
        return;
     } 

     //In this part create an object xmlhttp responsible on transactions :
     //==================================================================
     if (window.XMLHttpRequest) {
          // code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
     } else { // code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
     }

     //define the function "onreadystatechange", will be called when receving data:
     //===========================================================================
     xmlhttp.onreadystatechange=function() {
         // verify the state of data received , if we receive all data and all is OK
         //=========================================================================
         if (xmlhttp.readyState==4 && xmlhttp.status==200) {
             //trans the data received to txtHint:
             document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
         }
     }

  //now, we call the the Url with the param hotel in GET:
  //====================================================
  xmlhttp.open("GET","venue2.php?hotel="+str,true);
  xmlhttp.send();
}