zoukankan      html  css  js  c++  java
  • 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

         

  • 相关阅读:
    Linux中/etc目录下passwd和shadow文件
    Linux基本命令
    Linux目录结构说明与基本操作
    如何用虚拟机VMware Workstation安装CentOs-7
    VPP源码分析及流程图
    VPP环境搭建及配置
    【转】智能指针的交叉引用问题及解决方法
    二叉树的前 中 后 层序遍历
    排序算法
    C和C++的一些区别
  • 原文地址:https://www.cnblogs.com/wuchenggong/p/9288966.html
Copyright © 2011-2022 走看看