JS-day03

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

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 : 移除时,传入的"事件响应函数",必须和添加时,传入的是同一个(通过相同标识符引用的那一个函数)
           因为：匿名函数,每次创建的都不同

   
4. 
5. 综合练习
6. 
7. <select size multiple style>

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为空.

   

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

    
    3 404错误问题(掌握)
     

11. 

12.  

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

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格式的二级联动

    

16. 操作JSON的库

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

    

    

17.  

    SpringMVC的JSON响应

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