整合AJAX

时间 2019-11-26
标签整合 ajax 栏目 Ajax 繁體版
原文原文链接
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>ddd</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 <script language="JavaScript" src="../js/jquery-1.3.1.js"></script>
 <style type="text/css">
    div,span{
       width: 140px;
       height: 140px;
       margin: 20px;
       background: #9999CC;
       border: #000 1px solid;
    float:left;
       font-size: 17px;
       font-family:Roman;
   }
   
   div.mini{
       width: 30px;
       height: 30px;
       background: #CC66FF;
       border: #000 1px solid;
       font-size: 12px;
       font-family:Roman;
   }
   
   div.visible{
    display:none;
   }
  </style>
  <!--引入jquery的js库-->
    
 </head>
  
 <body>
  <form action="" name="form1" id="form1">
   <input type="text" name="username" id="username" value="zhang"><br>
   <input type="text" name="psw" id="psw" value="99999"><br>
         <input type="button" id="b1" value="登录">
  </form>
 
  <div id="one">  
  </div>
 
  
 </body>
   <script language="JavaScript">
   $(document).ready(function(){
  
  //load的get方式提交
/*  $('#b1').click(function(){
   
   //使用jquery提供的方法来发出ajax的请求
   //1.第一个参数表示把ajax请求发送给url
   //2.第二个参数表示是否发送数据data ,若是你要发送则数据的格式应当是 "{'username':'顺平'}";
   //若是你不发送数据，则填入null , 若是你发送有数据给服务器文件,默认load方法是以post方式提交
   //不然是以get方式提交
   //3.第三个参数是函数(回调函数)
   //data表示从服务器回送的数据(string)
   //textStatus表示状态有四个succuss, error, notmodify, timeout 
   //xmlHttpRequest表示XMLHttpRequest对象
   $('#one').load("loadController.php?date"+Math.random()+"&username="+$('#username').val(),null,function(data,textStatus,xmlHttpRequest){
    
    //alert("服务器返回"+data);
    $(this).text(data);
   });
   
  })*/
  
  //客户端发送json ,以post方式
  //服务器端回送的text
 /* $('#b1').click(function(){
   
   //使用jquery提供的方法来发出ajax的请求
   //1.第一个参数表示把ajax请求发送给url
   //2.第二个参数表示是否发送数据data ,若是你要发送则数据的格式应当是 "{'username':'顺平'}";
   //若是你不发送数据，则填入null , 若是你发送有数据给服务器文件,默认load方法是以post方式提交
   //不然是以get方式提交
   //3.第三个参数是函数(回调函数)
   //data表示从服务器回送的数据(string)
   //textStatus表示状态有四个succuss, error, notmodify, timeout 
   //xmlHttpRequest表示XMLHttpRequest对象
   
   var send_data={"username":$("#username").val(),"psw":$("#psw").val()};  //json数据格式
   
   $('#one').load("loadController.php",send_data,function(data,textStatus,xmlHttpRequest){
    
    //alert("服务器返回"+data);
    //alert(data);
    
    
    //如服务器端返回的数据格式是json格式，则应当怎样处理
    
   // var obj=eval("("+data+")");
   // window.alert(obj.res+" "+obj.info);
    
    
    //若是服务器返回的数据格式是xml格式的
    var result=xmlHttpRequest.responseXML;
    //取出返回的res
    var res=result.getElementsByTagName('res');
    window.alert(res[0].childNodes[0].nodeValue);
    
    //jquery
    //思考
   });
   
  })*/
  
  //使用$.post方法=>你本身就知道怎样使用$.get方法.
  //这个方法不依赖于一个jquery对象.
  //第一个参数表示向哪一个php页面发送请求.
  $('#b1').click(function(){
   var send_data={"username":$("#username").val(),"psw":$("#psw").val()};
   var xmlHttpRequest=$.post("loadController.php",send_data,function(data,ts){
   
    //若是服务器返回的是text
    //alert(data);
    //若是服务器返回的是json格式
   // var objs=eval("("+data+")");
    //若是不转，objs是dom对象集合
   // var $objs=$(objs);//jquery对象集合
    //$objs表示[{'res':'不能够用','info':'哈哈'},{'res':'不uu','info':'哈哈uu'}]
   // $objs.each(function(){
   //  alert(this.res+this.info);
   // })
    
    //xml格式->dom
    var xmlObjs=xmlHttpRequest.responseXML;
    //dom方法来解析
    var res=xmlObjs.getElementsByTagName('res');
    alert(res[0].childNodes[0].nodeValue);
    
   })
  })
  
   });
  </script>
   
</html>