搜索
博主信息
博文 28
粉丝 0
评论 0
访问量 32351
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
Ajax的工作原理分析及编程
YHF的博客
原创
1044人浏览过

一、Ajax的工作原理分析:

  1. 概念:什么是AJAX 
    AJAX全称为“Asynchronous JavaScript and XML”(异步JavaScript和XML),是一种创建交互式网页应用的网页开发技术。 

  2. 1.jpg

  3. 简单老说就是前端页面点击一个请求时,页面不会挑转,但是请求已经通过xhr对象发送了,服务器端正在处理请求,稍等一会儿,页面就能够获得新的数据,用人的感官来看就是页面没动,但数据却更新了.

二、编程: Ajax用户登录验证

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户登录</title>
</head>
<body>
    <h3>Ajax表单验证</h3>
    <form method="post">
        <p>邮箱:<input type="email" name="email" id="email" placeholder="请输入邮箱地址"></p>
        <p>邮箱:<input type="password" name="password" id="password" placeholder="请输入密码"></p>
        <p><button type="button">登录</button></p>
    </form>
</body>
</html>
<script>
    let btn=document.getElementsByTagName('button')[0];
    btn.onclick=function(){
        //1.创建xhr对象
 let xhr=new XMLHttpRequest();
        //2.监听响应状态
 xhr.onreadystatechange=function(){
            //准备就绪
 if(xhr.readyState===4){
                //响应成功
 if(xhr.status===200){
                    let p=document.createElement('p');//创建新元素放返回的内容
 p.style.color='red';
                    let json=JSON.parse(xhr.responseText);
                    if(json.status===1){
                        p.innerHTML=json.msg
 }else if(json.status===0){
                        p.innerHTML=json.msg;
                    }
                    //将响应文本添加到新元素上
 document.forms[0].appendChild(p);
                    btn.disabled=true;//禁用按钮
 setTimeout(function(){
                        document.forms[0].removeChild(p);//去掉p
 btn.disabled=true;
                        if(json.status ===1){
                            location.href='admin.php';
                        }
                    },2000);

                }else{
                    //响应失败,返回失败的原因
 alert('响应失败:'+ xhr.status);
                }
            } else {
                //http请求在继续,可以添加转动的gif图片
 }


        }
        //3.设置请求参数
 xhr.open('post','check.php',true);
        //4设置头信息,讲内容类型设置为表单提交方式
 xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        //5.发送请求
 let data = {
            email:document.getElementsByName('email')[0].value,
            password:document.getElementsByName('password')[0].value
 };
        let data_json=JSON.stringify(data);
        xhr.send('data='+ data_json);
    }

</script>

处理数据脚本:check.php

<?php
//print_r($_POST['data']);
//echo $data['email'];

$user=json_decode($_POST['data']);
$email=$user->email;
$password=sha1($user->password);
$pdo=new PDO('mysql:host=127.0.0.1;dbname=test','root','');
$sql="SELECT COUNT(*)FROM `user` WHERE  `email`= '{$email}' AND `password`='{$password}';";
$stmt=$pdo->prepare($sql);
$stmt->execute();
if($stmt->fetchColumn(0)==1){
    echo json_encode(['status'=>1,'msg'=>'登录成功,正在挑转...']);
    exit();
}else{
    echo json_encode(['status'=>0,'msg'=>'登录失败,邮箱或密码错误!']);
}

1.jpg

三、Ajax的完整运行流程(以get为例),共四步。

  1. 创建xhr对象

    xhr=new XmlHttpRequest();

  2. 监听xhr响应状态

xhr.onreadtstatechange=function(){

      if(xhr.readyState===4){

       //准备就绪

            if(xhr.status===200){

           //响应成功

              }

        }

}

3.设置请求参数

xhr.open('get','URL地址',true);

4.发送请求

xhr.send();


批改状态:未批改

老师批语:
本博文版权归博主所有,转载请注明地址!如有侵权、违法,请联系admin@php.cn举报处理!
全部评论 文明上网理性发言,请遵守新闻评论服务协议
0条评论
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • 登录PHP中文网,和优秀的人一起学习!
    全站2000+教程免费学