原生Ajax的实现

最新推荐文章于 2022-05-07 12:57:18 发布

yjx_43750162

最新推荐文章于 2022-05-07 12:57:18 发布

阅读量95

点赞数

本文链接：https://blog.csdn.net/weixin_43750162/article/details/97698570

版权

1.比较传统的方式
隐藏帧布局，通过iframe模拟异步属性数据的功能展示
html页面

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <div>
   <form action="01page.php" method="get" target="iframe">
    账户：<input type="text" name="username" />
    <span id="span_01"></span>
    <br />
    密码：<input type="password" name="pwd" />
    <br />
    <input type="submit" value="提交" />
   </form>
  </div>
  <iframe src="" width="" height="" name="iframe"></iframe>
 </body>
</html>

php代码

<?php
 $name=$_GET['username'];
 $pwd=$_GET['pwd'];
 if($name=='admin' && $pwd=='123'){ ?>
  <script type="text/javascript">
   parent.document.getElementById('span_01').innerHTML='登陆成功';
  </script>
  <?php }else{ ?>
   <script type="text/javascript">
    parent.document.getElementById('span_01').innerHTML='登录失败';
   </script>
<?php }?>

2.原生Ajax实现局部刷新
实现Ajax的步骤
1.创建xhr对象
2.准备发送
3.执行发送操作
4.指定回调函数

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript">
   window.onload=function(){
    //获取页面元素
    var btn=document.getElementById('btn');
    var span_01=document.getElementById('span_01');
    //给按钮添加一个点击事件
    btn.onclick=function(){
     //获取账户的值
     var username=document.getElementById('username').value;
     //获取密码的值
     var pwd=document.getElementById('pwd').value;
     //创建xhr对象
     //if else语句是为了浏览器的兼容
     var xhr=null;
     if(window.XMLHttpRequest){
      xhr=new XMLHttpRequest();
     }else{
      xhr=new ActiveXObject('Microsoft.XMLHTTP');
     }
     //兼容的另一种写法
//     try{
//      xhr=new XMLHttpRequest();
//     }catch(e){
//      xhr=new ActiveXObject('Microsoft');
//     }
     //准备发送
     /*参数一: 请求的方式 (get,post....delete, cunt)
      * 参数二: 请求地址  url
      * 参数三: 同步或者异步标志位, 默认为true(异步),false 表示同步*/
     xhr.open('GET','02page.php?name'+username+'&pwd='+pwd,true);
     //执行发送操作
     xhr.send(null);
     //回调函数
     xhr.onreadystatechange=function(){
      //判断服务器访问数据是否正常
      if(xhr.readyState==4){
       //服务器返回的状态
       if(xhr.status=200){
        //接受服务器相应回来的数据
        var date=xhr.responseText;
//        console.log(date);
        //对服务器返回的数据进行判断
        if(date=='1'){
         span_01.innerHTML='登陆成功';
        }else if(date=='2'){
         span_01.innerHTML='登路失败';
        }
       }
      }
     }
    }
   }
  </script>
 </head>
 <body>
  <form>
   账户：<input type="text" name="username" id="username"/>
   <span id="span_01"></span>
   <br />
   密码：<input type="password" name="pwd" id="pwd"/>
   <br />
   <input type="button" value="提交" id="btn"/>
  </form>
 </body>
</html>

php代码

<?php
 @$name=$_GET['name'];
 $pwd=$_GET['pwd'];
 if($name=='admin' && $pwd=='123'){
  echo '1';
 }else{
  echo "2";
 }
?>

原生请求参数的分析

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript">
   
   window.onload=function(){
    var btn=document.getElementById('btn');
    btn.onclick=function(){
     var username=document.getElementById('username').value;
     var pwd=document.getElementById('pwd').value;
     
     // (1)创建xhr对象
     var xhr=null;
     if(window.XMLHttpRequest){
      xhr=new XMLHttpRequest();
     }else{
      xhr=new ActiveXObject('Microsoft');  // IE6
     }
     // 如果是get提交,,请求的参数必须在url地址栏中
     var param='name='+username+'&pwd='+pwd;
     // encodeURI(): 表示的是 将中文(没有识别中文)编码，防止乱码
     xhr.open('get','05-DemoAJax.php?'+encodeURI(param),true);
     xhr.send(null); // get请求时   设置为null
     xhr.onreadystatechange=function(){
      if(xhr.readyState==4){
       if(xhr.status==200){
        alert(xhr.responseText);
       }
      }
     }
    }

   }
  </script>
 </head>
 <body>
  <form>
   账户:<input type="text" name="userName" id="username" />
   <span id="span_01"></span>
   <br />
   密码:<input type="password"  name="pwd" id="pwd"/>
   <br />
   <input type="button" value="提交数据" id="btn"/>
  </form>
 </body>
</html>

php代码

<?php
 $name=$_GET['name'];
 $pwd=$_GET['pwd'];
 if($name=='admin' && $pwd=='123'){
  echo 1;
 }else{
  echo $name;  
 }
?>

yjx_43750162

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫