2018.4.6第三篇博客Javascript包含DOM,AJAX,JSON

前言:
    学了三天的JS,补上博客;

第一天:语法,基础,函数,数组

一/名词解释:

Javascript

含义:直译式脚本语言;

脚本语言:需要依赖才能运行,又称为寄生语言

特点:动态型,弱类型,内置支持型;

动态型:需要什么属性,在需要的时候再添加

弱类型:只有一个类型,就是var

内置支持型:可以使用内置对象;

环境:浏览器相当于Java的JVM

二/学习方法:查文档,上W3CSchool

三/语法:基本上都和Java相同,不同点如下

1/JS只有字符串的概念

2/undefined的相当于Java的空指针

3/打印:console.log()

4/特殊字符需要用\转义

5/运算符

1/ + 是做字符串拼接;

2/ == 对比的是值;===对比的类型;

6/逻辑运算符

1/&&操作:从左往右找,优先返回第一个为false的值,没有则返回最后一个值

2/||操作:从左往右找,优先返回第一个为true的值,没有则返回最后一个值

7/函数:function

1/访问变量:就近原则

2/加()和不加()的区别:

加():表示调用里面的函数;

不加():直接指的是里面的函数对象;

8/面向对象:

this关键字:

1/在构造方法中:this指新创建的对象;

2/在函数/方法中:谁调用this所在的函数/方法;this就是谁?

9/内置对象

确切的说,js并不是一门面向对象语言,而是一门基于对象的语言;

10/数组

js中的数组,类似于ArrayList,同时体现了栈和队列结构;

1/创建:var arr = [];

arr[6]="drank01"

2/属性和方法:

arr.push(), 往数组添加元素;

第二天:DOM和DOM事件编程

一/BOM

1/文件加载完毕事件window.onload[重要]

js中的函数代码,会等到HTML文件全部被浏览器读取完毕后,才执行;

2/在js中跳转界面的本质是,修改地址栏的值;

window.location.href = xxx;

3/定时器:

二/DOM

重要技巧:

一些不知道的属性,可以去别人的网站,用浏览器的控制台,找到相关的属性,比如innerHTML,innerTEXT都是通过这个方法的找出来的[非常重要]

名词解释: document object model,文档对象模型;

是一种与浏览器,平台,语言无关的接口,可以访问页面的其他标准组件;

D:文档 html文档或者xml文档

O:对象 document对象的属性和方法

M:模型

1/获取元素的方式:document.getElementById();

分析,这里的document,指的就是对应的html文档;

2/Node对象

3/元素的属性操作:

1/操作元素的原始属性:

1/获取属性值:

元素对象.属性名;

元素对象["属性名"];

2/设置属性值:

元素对象.属性名=值;

元素对象["属性名"]=值;

4/DOM文档操作:

1/把span加入到div中

1/appendChild();

2/操作复选框:

1/parentNode.insertBefore();

replaceChild();

removeChild();

5/DOM事件驱动编程[重要]

核心对象:

事件源:被动承受者;一般是元素

事件响应行数;当事件发生时,会执行什么操作:就是js里面的代码;

例子:

HTML代码:

Hello world!

//事件源

JS代码:function shout(e){//响应函数，监听函数

alert(e.clientX);//e事件对象

}

document.getElementById("p1"). onclick=shout;//在事件源上绑定事件响应函数

本质:在事件驱动编程中,就是给事件源,绑定事件的响应函数;

1/事件的监听和绑定:[重要]

第二种:

在js代码中,使用 "元素.onxx = 函数对象"进行事件监听

总结: 在JS中先获取到事件,在指定事件的响应函数,比较简单的,很方便的获取到事件源和事件对象

注意: 只能绑定一个 ,后绑定的把先绑定的给覆盖掉

第三种:

使用方法来完成对元素的监听,可以 对同一事件多次绑定

W3C

[Object].addEventListener(“name_of_event”, fnHandler);

name_of_event>>直接使用事件(操作)名称,没有on

多次添加监听后,触发顺序: 先添加,先执行

第三天:

ajax和json

一/AJAX --一种很火的数据请求方式;本质是:XMLHttpRequest对象

名词解释:Asynchronous JavaScript and Xml

是一种使用现有标准的新方法:基于JavaScript 和 HTTP请求();

关键概念:同步:等待响应的时候,啥都不做;

异步:一边等待,一边做其他,等到的时候,停一下;

作用:局部刷新,减少服务器的压力;

特点:AJAX,不会产生缓存,不能后退;

1/入门知识:

1/ajax五种状态

2/细节;只处理响应正常情况下的数据,HTTP状态要等于200,才处理响应;

3/get请求:小案例,检查账号是否存在:

//文档加载完毕执行函数;

//获取事件源,绑定失去焦点事件,

//获取文本框的值,作为参数

//1:创建象

//2;开启一个请求

//3监听ajax状态的改变

//处理响应

//把响应的数据回显到网页#msg中

//4发送请求

4/post请求

区别与get请求的地方:

//1在发送请求前,设置POST参数的请求头!

//2发送请求要带上参数

注意:请求的本质是拼接字符串!!!

二/JSON(当前很火的数据类型封装模式)

1/ 规则如下:

1）映射用冒号（“：”）表示。名称:值

2）并列的数据之间用逗号（“，”）分隔。名称1:值1,名称2:值2

3） 映射的集合（对象）用大括号（“{}”）表示。{名称1:值1,名称2:值2}

4） 并列数据的集合（数组）用方括号(“[]”)表示。

[

{名称1:值,名称2:值2},

{名称1:值,名称2:值2}

]

2/转换成JSON,SpringMVC集成json插件;

1/使用jackson转换工具,在pom.xml引入jar包即可;

三/二级联动综合案例

方法1:HTML格式

思路:

//1/文档加载完毕后,执行函数

//2获取到省份的下拉列表;

//3发送ajax请求,获取省份数据;

把返回的HTML数据填入省份中

//4/当省份发生变化是,再次发送ajax获取城市数据;

//注意:这里需要恢复最初状态

//如果有选择省份才发送请求;

/发送ajax请求获取城市数据,

//把返回的HTML数据填入城市中

方法2:JSON格式

controller的改变

改变:

1/贴@RespResponse注解;

2/返回值改为Object,

3/不需要传入参数,

4/直接返回省份的数据即可;

5/其他的JSON转换器帮我们全部封装好;List--> JSON;

js的改变:

1/把返回的JSON数据填入省份中;

2/把响应的改装成JSON格式:eval

3/遍历数组,把JSON格式拼接成HTML格式;

4/把HTML代码赋给province元素;

总结:

1/ajax最大的作用,就是局部刷新,减少服务器压力

2/json最大的好处就是简单易用,替代xml数据格式;

异常:

63/

web.xml

在servlet 和servlet-mapping相同的情况下,一个报红色,一个下划线;

报:mapping无法解析;是否所有的servlet都有mapping

[解决:

原因:该项目没有志向web.xml;在这里设置指向即可;

]

66/SSM 路径名,资源名正确;

[表单提交成功,但是controller重定向没有找到资源;]

[解决: 因为用到了Spring 的@controller注解,是需要交给服务器代理的;]

67/为什么,我的代码,和浏览器的代码,不同的?在浏览器上.body放进了head里面

[解决:script要用双标签,绝对不能用单标签!]

68/JS阶段:AJAX请求方式,checkName训练;"/ajax/checkName.do"报404错误;

[解决: 因为用到了Spring 的@controller注解,是需要交给服务器代理的;]