Ajax Zero to Hero (2)入门代码的简单封装

发布时间：2020-12-16 01:32:32 所属栏目：百科来源：网络整理

导读：pre name="code" class="html"!DOCTYPE htmlhtmlheadmeta charset="UTF-8"titleInsert title here/title/headbody script type="text/javascript" /* url:请求服务器的地址 method:请求方法("GET","POST") params:请求参数(格式类似 "fname=Billlname=GATE")

<pre name="code" class="html"><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
   
    <script type="text/javascript"> 
     /*
           url:请求服务器的地址
           method:请求方法("GET","POST")
           params:请求参数(格式类似 "fname=Bill&lname=GATE")
     */
     function ajaxSubmit(url,method,params){ 	
         if(window.XMLHttpRequest){
      	   xmlhttp = new XMLHttpRequest();
         }else{     	  
      	   xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
         }     
         //xmlhttp.onreadystatechange=ajaxCallbackProcess();这种写法是把ajaxCallbackProcess函数调用之后的结果
         //赋给xmlhttp.onreadystatechange,而不是把ajaxCallbackProcess函数对象本身赋给xmlhttp.onreadystatechange
         //而xmlhttp.onreadystatechange期待的值是函数对象本身而不是函数调用的值,大坑....折磨我2天....
         xmlhttp.onreadystatechange=ajaxCallbackProcess;//回调函数      
         xmlhttp.open(method,url,true);
         xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
         xmlhttp.send(params);  
     }
         
     function ajaxCallbackProcess(){//回调函数   	
    	window.alert(xmlhttp.readyState);
        window.alert(xmlhttp.status);
        window.alert(xmlhttp.statusText);
        if(xmlhttp.readyState==4 && xmlhttp.status ==200){
        	window.alert("回调函数");
  		    document.getElementById("username").value =xmlhttp.responseText;
  	    }
     }
     
    </script>
</body>
    <input type="button" name="diawo" value="发送ajax请求" onclick='ajaxSubmit("TestAjaxServlet","POST","fname=Bill&lname=GATE");'>
    <input type="text" name="username" id="username">
</html>

注意:

    xmlhttp.onreadystatechange=ajaxCallbackProcess();这种写法是把ajaxCallbackProcess函数调用之后的结果
    赋给xmlhttp.onreadystatechange,而不是把ajaxCallbackProcess函数对象本身赋给xmlhttp.onreadystatechange
    而xmlhttp.onreadystatechange期待的值是函数对象本身而不是函数调用的值,大坑....折磨我2天....
    xmlhttp.onreadystatechange=ajaxCallbackProcess;//正确写法

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!