您的位置: 首页  >  文章  >  JS-day03

JS-day03

分类: 文章 • 2025-03-06 13:23:52
  1. Javascript事件处理基本机制
    对DOM元素绑定事件处理函数
    监听用户的操作(事件名称：鼠标事件，值改变事件，)
    当用户在DOM元素上进行与绑定事件相对应的事件操作（事件源：通常指元素和标签）的时候,事件处理函数作出相应（不仅限于用户的操作. 当对象处于某种状态时）
    将处理结果更新到HTML文档
  2. 事件绑定方式一:
         在页面中使用 事件相关的属性来绑定事件,指定响应处理函数
       特点: 使用简单
       不足的地方:
              获取事件对象:event
              获取事件源对象: this
              JS代码和HTML页面偶合
    方式二 在JS代码中,页面加载完毕之后,获取到页面中的元素,然后在给元素绑定事件类型,响应函数
            arguments: 函数类的属性,就是用来获取函数调用所传递的实际参数列表
            特点: 使用比较简单
    上述两种方式都有一个不足的地方:对于同一个事件源的同一个事件类型没法绑定两个响应函数,后面定义的响应函数会覆盖前面的响应函数JS-day03

  3. 第三种:可绑定多个
      使用方法来完成对元素的监听,JS框架用的比较多
      IE
        [Object].attachEvent(“name_of_event_handler”, fnHandler);
          name_of_event_handler>>事件操作前,必须加"on"!!!
          多次添加监听后,触发顺序: 先添加,后执行  栈      
        [Object].detachEvent(“name_of_event_handler”, fnHandler);
            fnHandler : 移除时,传入的"事件响应函数",必须和添加时,传入的是同一个(通过相同标识符引用的那一个函数)
            因为：匿名函数,每次创建的都不同    
      W3C
        [Object].addEventListener(“name_of_event”, fnHandler);
             name_of_event>>直接使用事件(操作)名称
             多次添加监听后,触发顺序: 先添加,先执行      队列      

        [Object].removeEventListener(“name_of_event”, fnHandler);
            fnHandler : 移除时,传入的"事件响应函数",必须和添加时,传入的是同一个(通过相同标识符引用的那一个函数)
            因为：匿名函数,每次创建的都不同

    JS-day03JS-day03
  4. JS-day03
  5. 综合练习JS-day03
  6. JS-day03JS-day03
  7. <select size multiple style>JS-day03JS-day03

  8. Ajax介绍
    一、Ajax不是一项具体的技术，而是几门技术的综合应用。
    AJAX：异步JavaScript和XML，是指一种创建交互式网页应用的网页开发技术。
    Javascript、XHTML和CSS、DOM、XML和XMLHttpRequest。
    二、Ajax核心只不过是要在javascript中调用一个叫XMLHttpRequest类，这个类可以与Web服务器使用HTTP协议进行交互，程序不通过浏览器发出请求，而是用这个特殊的JavaScript对象发送请求和接收响应，并操作页面。
    三、XMLHttpRequest对象在网络上的俗称为Ajax对象。
    四、一种不用刷新整个页面便可与服务器通讯的办法(更新网页部分数据).
    -----------------------------------------------------------------------------
    Ajax的特点(看图)：
    同步和异步交互：

    同步是指：发送方发出数据后，等接收方发回响应以后，才发下一个数据包的通讯方式。
    异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。

    AJAX缺陷：
    1、浏览器的兼容性。
    2，并没有刷新整个页面，因此，后退功能是失效的；需要在明显位置提醒用户“数据已更新”。
    3，对流媒体的支持没有FLASH、Java Applet好,H5出现。
    4 Ajax不支持跨域访问

  9. ajax.send()会新开启一个新线程B发送请求,主线程继续执行,这时有可能,主线程执行完了,还没有响应回来,所以ajax.responseText为空.

    JS-day03

  10. 1 浏览器兼容性(知道)
    在IE:
    var ajax=new ActiveXObject("Msxml2.XMLHTTP.3.0");
    2 浏览器缓存(知道)
      在IE浏览器中的缓存机制Map<key,value>
      key:http://localhost/getServerTime.do
      value: 请求响应回来的数据

    JS-day03
    3 404错误问题(掌握)
     JS-day03

  11. JS-day03

  12.  

  13. JS-day03
       数据格式:后台程序往前端传输数据的一种方式:
    ① HTML数据格式
         后台使用HTML标签来封装传递到前端的数据
    ② XML数据格式
        后台使用XML标签来封装传递到前端的数据
    ③ JSON数据格式
        后台使用JSON标签来封装传递到前端的数据
    对于不同的数据格式,只不过是后台的数据封装方式和前台的解析方式不一样而已,                                                       JS-day03JS-day03

  14. JSON（JavaScript Object  Notation）一种简单的数据格式，比xml更轻巧。易于机器解析和生成(网络传输速度快)，独立于编程语言。
    JSON是JavaScript原生格式，这意味着在JavaScript中处理JSON数据不需要任何特殊的API或工具包。

    描述一个对象 {属性名:属性值,属性名:属性值},类似于Java中的Map<key,value>
    描述多个对象 [{属性名:属性值,属性名:属性值},{属性名:属性值,属性名:属性值},{属性名:属性值,属性名:属性值}]
        类似java中的List<Map<key,value>>
    JSON的规则很简单：
        对象是一个无序的“‘名称/值’对”集合。
            元素值可具有的类型：string, number, object, array, true, false, null

    1.JSON数据格式:(注意:标准的JSON的属性也使用引号)
    2.String转成json对象:  eval(“(”+objStr+”)”);
    3.json对象-->String：json的toString方法

  15.  

    JSON格式的二级联动

    JS-day03JS-day03

  16. 操作JSON的库

    手动拼接JSON数据格式,
      ① 工作效率低
      ② 比较容易出错
    常用的JSON库有 jackson  fastjson:

    JS-day03

    JS-day03

  17.  

    SpringMVC的JSON响应

    @ResponseBody 作用域Controller的方法上面
    作用: 专门用来响应json数据格式的输出
          ① 解决把Java对象转化为JSON格式的字符串的格式(内置通过jackson的方式完成)
          ② 把return的对象先①直接通过response输出

    JS-day03

     

相关推荐