博客列表 >json和ajax的简介与属性方法,以及实战--2018年9月15日9时57分

json和ajax的简介与属性方法,以及实战--2018年9月15日9时57分

新竹网络_Terry的博客
新竹网络_Terry的博客原创
2018年09月15日 10:18:33670浏览

这一节课主要讲的是json和ajax的知识,主要内容是json的简介和实例,ajax的简介和实战

Ajax的工作原理分析

HTTP请求对应一个页面时,ajax代 理当前页面的请求,使得当前页面不跳转,等js收到服务器端响应的数据后,再由js来刷新页面更新数据

代码


实例

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <h3>用户登录</h3>
    <form>
        <p>邮箱:<input type="email" name="email"></p>
        <p>密码:<input type="password" name="password"></p>
        <p>
            <button type="button">提交</button>
        </p>
    </form>
    <script>
        var btn = document.getElementsByTagName('button')[0];
        btn.onclick=function () {
            var xhr=new XMLHttpRequest();
            xhr.onreadystatechange=function () {
                if (xhr.readyState ===4){
                    if (xhr.status===200){
                        var p=document.createElement('p');
                        p.style.color='red';
                        var 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.dis=false;
                            if(json.status==1){
                                location.href='admin.php';
                            }
                        },2000);
                    }else{
                        alert('响应失败'+xhr.status);
                    }
                }else{

                }
            }
            xhr.open('post','check.php',true);
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            var data={
                email:document.getElementsByName('email')[0].value,
                password:document.getElementsByName('password')[0].value
            };
            var data_json=JSON.stringify(data);
            xhr.send('data='+data_json);

        }
    </script>
</body>
</html>

运行实例 »

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

预览图

%P64@[YJ[`_}5N@GBX{[TVT.png

手写

DR(A]NLEZA@{@GRDLO3EQ5P.png

手写对于Ajax的完整运行流程记得更加清晰

总结

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

2、JSON 是独立于编程语言的,通用的,轻量级的文本存储与交换的数据格式

声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议