登录  /  注册
博主信息
博文 39
粉丝 2
评论 2
访问量 49219
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
JSON 与 Ajax 及实战-2018年9月13号
fighting的博客
原创
922人浏览过

                                                              JSON 与 Ajax 及实战 

-                                               时间:2018年9月13号            天气:台风 

1.问答: Ajax的工作原理分析(用自己语言组织)

(1)Ajax全称是 Asynchronous JavaS and XML 即:异步的JavaScript和XML;所以我可以理解为为它是两种技术的结合体。而网上的比较全面理解为ajax并非一种新的技术,而是几种原有技术的结合体。它由下列技术组合而成。

   1.使用CSS和XHTML来表示。

   2. 使用DOM模型来交互和动态显示。

   3.使用XMLHttpRequest来和服务器进行异步通信。

   4.使用javascript来绑定和调用。

(2)Ajax的工作机制

简单来说,Ajax就是通过XMLHttpRequest()[简称为xhr对象]向服务器发送异步请求,让后使用JavaScript和操作DOM来处理获得的数据从而更新页面。

  而Ajax所依赖的xhr对象常用的属性和方法如下:

1. 对象: XMLHttpRequest() 简称 xhr对象;
2. 事件: onreadystatechange() 监听就绪状态属性的变化;
3. 属性: readyState 请求状态值,有四个值,我们只对数据就绪状态的值:4感兴趣;
4. 属性: status 请求状态码, 返回 200 时,表示已从服务器上成功的获取到了返回的文本;
5. 属性: responseText, 从服务器端返回的文本内容;
6. 方法: open('请求类型','请求的url',请求方式,默认为true异步):设置请求参数
7. 方法: send(): 发送请求,GET请求请填上参数null;
8. 方法: 如果是post请求,需要设置一下请求头信息,请文档类型重置:
    setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

2.编程: Ajax用户登录验证

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单验证</title>
</head>
<body>
<h3>用户登录</h3>
<form>
<p>邮箱:<input type="email" name="email" value="" ></p>
<p>密码:<input type="password" name="password" value="" ></p>
    <button type="button">登陆</button>
</form>

<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);
                            btn.disabled = false;
                            if (json.status == 1) {
                                location.href = 'admin.php';
                            }
                        }, 2000)

            } else {
                alert('响应失败!!!' + xhr.status);
            }
        }
    else{
            //一张GIF转圈圈的动图
        }
    }

        //3.设置请求参数
        xhr.open('post', 'inc/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>

</body>
</html>

<!--
//demo3,不成功-->

运行实例 »

点击 "运行实例" 按钮查看在线实例

本机运行图:

UMIUN{A9}J{J2T~WS59MHZ2.png

3.手写: Ajax的完整运行流程(以get为例),共四步。

1.png

点评:好记忆不如烂笔头,手写一遍更清楚的了解Ajax的运行



批改状态:未批改

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

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

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