ajax封装

最新推荐文章于 2023-09-20 10:27:08 发布

原创最新推荐文章于 2023-09-20 10:27:08 发布 · 62 阅读

CC 4.0 BY-SA版权

html页面

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script src="01_ajax.js" type="text/javascript" charset="utf-8"></script>
  <script type="text/javascript">
   window.onload=function(){
    var btn1=document.getElementById('btn1');
    btn1.onclick=function(){
     ajax('01page.php','get',function(date){
      var info1=document.getElementById('info1');
      info1.innerHTML=date;
     },'name=李四&pwd=123','text');
    }
    var btn2=document.getElementById('btn2');
    btn2.onclick=function(){
     ajax('01page1.php','post',function(date){
      var info2=document.getElementById('info2');
      info2.innerHTML=date.name+'====='+date.pwd;
     },'name=张三&pwd=123','json');
    }
   }
  </script>
 </head>
 <body>
  <div id="info1"></div>
   <input type="button" value="btn1" id="btn1" />
  <div id="info2"></div>
   <input type="button" value="btn2" id="btn2" />
 </body>
</html>

js代码

//第一个参数代表地址，第二个参数代表提交的方法，第三个参数代表回调函数，第四个参数代表提交的数据参数，第五个参数代表数据提交的类型
function ajax(url,metho,state,param,type){
 var xhr=null;
 if(window.XMLHttpRequest){
  xhr=new XMLHttpRequest();
 }else{
  xhr=new ActiveXObject('Microsoft');
 }
 if(metho=='get'){
  url+='?'+encodeURI(param);
 }
 xhr.open(metho,url,true);
 var date=null;
 if(metho=='post'){
  var date=param;
  xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
 }
 xhr.send(date);
 xhr.onreadystatechange=function(){
  if(xhr.readyState==4){
   if(xhr.status==200){
    var date=xhr.responseText;
    if(type=='json'){
     date=JSON.parse(date);
    }
    state(date);
   }
  }
 }
}

get方法提交的php代码

<?php
 $name=$_GET['name'];
 $pwd=$_GET['pwd'];
 echo $name.'++++'.$pwd;
?>

post方法提交的php代码

<?php
//数据提交的类型为json形式，所以要以json形式输出
 $name=$_POST['name'];
 $pwd=$_POST['pwd'];
 echo '{"name":"'.$name.'","pwd":"'.$pwd.'"}';
?>