python全栈开发day50-jquery之ajax、XmlHttpRquest

一、昨日内容回顾

　　　　1.jquery位置信息

　　　　　　width() ..,innetWidth() .outWidth()

　　　　　　offset().top left

　　　　　　scrollTop

　　　　2.事件流 DOM2级　　　　　

　　　　　　（1）捕获阶段 （2）处于目标阶段 （3）冒泡
　　　　　　stopPropagation()
　　　　　　preventDefault()

　　　　3.常见事件　　　　　

//解决双击事件与单击事件冲突
click
dblclick
mouseover
mouseout
mouseenter
mouseleave
表单的实施监听内容输入
js中的oninput
form表单的submit jquery中的事件名
form表单的onsubmit 是js中的事件名
阻止默认事件 event.preventDefault()

　　　　4.常见事件对象属性

　　　　　　　event.target event.currentTarget

　　　　5.事件绑定

　　　　　　　bind()　　　

　　　　6.事件委托　　　　　　

事件代理，后来添加的元素要将事件绑定到页面存在的父辈元素中
$('.father').on('click','li',fn)
on()

　　　　7.设计模式，架构模式

　　　　　　　　mvc mtv mvvm

　　　　8.express的简单介绍

　　　　　　　　https://www.cnblogs.com/mq0036/p/5243312.html

　　　　9.nodejs服务器语言

二、今日内容总结

　　　　http://www.cnblogs.com/majj/p/9134922.html

　　　　1.jquery XmlHttpRequest

　　　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>

    <button id="btn">请求</button>

    <script type="text/javascript" src="../jquery.js"></script>
    <script>
        //创建XMLHttpRequest对象
        var xhr = new XMLHttpRequest();

        console.log(xhr.readyState);
        //2.状态机 检测状态 0 1 2 3 4
        xhr.onreadystatechange=function(){
            console.log(xhr.readyState);
            console.log(xhr.status);
            if(xhr.readyState==4){
                console.log('请求成功！');
                var content = xhr.responseText;
                $('body').html(content);
            }
        }

        $('#btn').click(function(){
            xhr.open('get','http://localhost:8800/',true);
            // xhr.open('get','http://localhost:8800/course',true);
            xhr.send();
        });

    </script>
    
</body>
</html>
实例

 

　　　　2.jquery $.ajax({ }) 

三、预习和扩展

　　　1. DOM0和DOM2的简单区别，同样的操作DOM0会产生覆盖现象，DOM2不会。　　　

<!DOCTYPE html>
<html>
<head>
    <title></title>
</head>
<body>
    <button id="btn">点击</button>
    <script type="text/javascript">
        oBtn = document.getElementById('btn');
        oBtn.onclick=function(){
            console.log('I m a DOM0 First!');
        }
        // 这个会覆盖第一个
                oBtn.onclick=function(){
            console.log('I m a DOM0 Second!');
        }

        oBtn.addEventListener('click',function(){
            console.log('I m a DOM2 First!');

        })

        oBtn.addEventListener('click',function(){
            console.log('I m a DOM2 Second!');

        })
    </script>

</body>
</html>
HTML

 　　　2. HTTP中application/x-www-form-urlencoded字符说明

　　　　https://blog.csdn.net/qq_28702545/article/details/51719199

　　　　　

posted @ 2018-07-10 14:44  富0代  阅读(187)  评论(0)    收藏  举报
返回
顶部