JavaScript、JSON、AJAX
JavaScript简单认识
JS 概述
JS（JavaScript）是一种直译式脚本语言，一种动态类型、弱类型（没有编译阶段，执行一行解释一行）、基于原型的语言。其解释器被称为 JavaScript 引擎，是浏览器的一部分，广泛应用于客户端的脚本语言，最早是在 HTML 网页上使用，目的是增加动态功能。
简单来说，JavaScript 是运行在浏览器上的脚本语言，语言的“目标程序”以普通本文形式（JSON）保存，作用是增强 HTML 页面的交互性。
JS 使用
语法：<script type=“text/javascript”> JS代码块 </script>
通过 <script> 标签在 HTML 页面中插入 JS 代码，<script type=“text/javascript”> 和 </script> 分别标记了 JavaScript 代码的开始和结束。
分号：JavaScript 也是用分号来结束一条语句，但一般情况下，分号只当一行有多条语句时才必须使用。
位置：
| JS代码位置 | 作用 |
|---|---|
| head部分 | 将脚本中的函数插入 head 部分，确保函数在被调用之前就已经加载完成 |
| body部分 | body 部分的脚本将在页面加载时被执行。在页面中插入脚本，脚本将伴随页面一起加载 |
| 外部脚本 | 调入外部脚本，将 JavaScript 写在一个外部文件中，并保存为以 .js 为扩展名的外部 JavaScript 文件，通过 src 属性调入 |
JS变量
-
JS 语言是弱类型语言，没有编译阶段，变量的数据类型由等于号右边的值决定，可以在脚本中改变。
变量是存储数据的容器。
-
语法格式：
- 变量声明：var 变量名；注意 JS 是区分大小写的。
- 变量赋值：变量名=变量值；如果没有手动赋值，那么系统默认赋值“undefined”。
-
变量作用域：
- 局部变量：在函数体内声明，函数执行时开辟内存空间，函数结束时释放内存。
- 全局变量：在函数体外声明，页面执行时开辟内存空间，页面关闭时释放内存。全局变量耗费内存空间，所以尽量使用局部变量。
注意：没有用 var 声明变量时，该变量无论在何处都属于全局变量。
JS 数据类型
-
原始类型：Undefined、Number、String、Null、Boolean
-
Undefined 类型只有一个值，就是系统默认赋值的undefined。
-
Number 类型范围：整数、负数、整数、小数、无穷大（Infinity）、无穷小（-Infinity）、不是数字（NaN–表示结果不是一个数字）
函数：
函数名 作用 isNaN() 判断是否为数字 parseInt() 将字符串转换成int类型 parseFloat() 将字符串转换成float类型 Math.ceil() 向上取整 -
String创建：
语法 父类 直接创建：str=“字符串” 原始类型 使用内置类：var str=new String(“字符串”) Object 注意：字符串既可以用单引号也可以用双引号表示，比较两个字符串使用==，不是equals()。
函数：
函数名 作用 length 字符串长度 indexOf(String) 获取指定字符串String在当前字符串第一次出现的索引 lastIndexOf(String) 获取指定字符串String在当前字符串最后一次出现的索引 replace(String1,String2) 使用String2替换当前字符串与String1匹配的第一个子字符串 split(String) 使用String拆分当前字符串 subStr(startIndex,length) 从startIndex开始截取长度为length的子字符串 subString(startIndex,endIndex) 截取子字符串，从startIndex开始到endIndex-1结束 toLowerCase() 所有字符转换成小写 toUpperCase() 所有字符转换成大写 -
Null类型只有一个值：null
注意：typeof Null类型的变量==“Object”。
typeof 是运算符，作用是在程序运行时动态获取变量的数据类型。语法：typeof 变量名
-
Boolean变量的值：true和false。
-
null、NaN、undefined的数据类型不一致，分别是Object、Number、Undefined。
-
-
引用类型：Object及其子类，Object类型是所有类型的超类，自定义类型默认继承Object类。
JS条件语句
if、if …else…、if…else if…else、switch，语法都跟 Java 类似 。
JS 操作符
+ 、– 、*、/、%、++、– –、==、!=、>、<、>=、<=、&&、||、!、===(检查值和类型，全吻合才算相等)
两个字符串衔接在一起使用 +。
条件运算符：variablename = (condition) ? value1: value2；
JS 循环语句
for 循环：事先知道脚本应该执行几次
for…in：通过一组元素或对象属性进行循环，循环体针对每个元素/属性执行一次。
while循环、do…while…循环，语法跟 Java 类似。
break、continue，用法同 Java。
JS 函数
实现某个特定功能的可重复利用的代码（等同于 Java 的方法），可以在事件触发或者被调用时来执行，可以在页面中的任何地方调用函数，还可以用外部 .js 文件的方式让其他页面也可以调用脚本。
函数在页面的开始部分（<head>区域）定义。
如果想让浏览器在加载完页面后马上执行脚本文件，可以将脚本写入函数内。
语法：function 函数名(形参列表)
{
函数体；
}
- 注意：JS 函数在调用时，实际参数类型和个数没有限制，JS 函数不支持重载（后者覆盖前者）。由于 JS 没有指定类型，所以在可以在函数里 return 一切。
JS 弹出框
在 JS 里可以建立三种不同的弹出框
-
警示框：保证让用户的到信息（内容），用户必须按OK来继续。
语法：alert(“内容”)；
-
确认框：用来让用户核实或接受一些信息，按OK返回真，按Cancel返回假。
语法：confirm(“内容”)；
-
信息框：让用户在进入页面前输入内容，用户在输入值后，按OK返回输入的值，按Cancel返回空值null。
语法：prompt(“内容”，”defaultvalue“)；
JS 事件
通过 JS 我们能够建立动态的web页面，JS 能够察觉到时间有动作。Web页面中的每个元素都能出发 JS 函数的事件。
注意：事件通常是用函数来组合使用的，并且在事件发生前，函数是不会执行的！
可以插入 HTM L标签中来定义事件动作的属性：
| 事件 | 事件句柄（以属性的形式存在） | 说明 |
|---|---|---|
| blur | onblur | 元素失去焦点时 |
| focus | onfocus | 元素获得焦点时 |
| load | onload | 页面或图片加载完成时 |
| change | onchange | 下拉列表选中项改变或者文本框内容改变时 |
| select | onselect | 文本被选择时 |
| reset | onreset | 重新点击鼠标按键时，表单重置 |
| submit | onsubmit | 点击提交按钮时，表单提交 |
| keydown | onkeydown | 按下键盘按键时 |
| keyup | onkeyup | 放开键盘按键时 |
JSON简单认识
-
JSON（ JavaScript Object Notation）指 JavaScript 对象标记语言（表示法），是一种标准的轻量级数据交换格式的标记语言，基于JavaScript 的一个子集，采用完全独立于语言的文本格式。
-
JSON 优点：
- JSON 格式数据容易处理，使用 Java 或 JavaScript 读写 JSON 格式数据较为容易。
- JSON 格式数据占用空间小，传输速度快，跟 XML 文件相比，XML 文件占用空间大且较难解析，但是 XML 更为严谨。
- JSON 是纯文本，有自我描述性（人可读），具有层级结构（值中存在值）。
- 可以通过 JavaScript 进行解析。
- 可以使用 Ajax 进行传输。
-
JSON 语法规则：
var jsonObj={“属性名”:属性值，“属性名”:属性值，……}
数据在名称/值对中（键值对），名称写在冒号前面（用双引号抱起来）值写在冒号后面（也用双引号引起来）。
数据由逗号分隔，一个花括号{}保存一个对象，方括号[]保存数组，数组中可以有多个对象。
值的类型：整数或浮点数、字符串（在” “中）、逻辑值（true、false）、数组（在[]中）、对象（在{}中）、函数、null。
两种数据的基本结构：
-
JSON 对象类型：JSONObject，key:value
如：“fruit”:{“foo”：”bar”}
-
JSON 数组类型：JSONArray，{key:value,key:value…}
如：”grade“:[1,2,3]
JSON 对象的属性值可以是任意类型，也被称为无类型对象。
-
-
补充
关于 eval() 函数：作用是将字符串当作一段 JS 代码解释并执行。
使用 eval() 函数的原因：
- Java 程序连接数据库获取到数据后，将其拼接成 JSON 格式字符串；
- Java 程序获得 JSON 格式字符串后，将其发送给浏览器；
- 浏览器获得 JSON 格式字符串后，调用 eval() 函数将其当作一段 JS 代码解释并执行。
Ajax简单认识
-
JavaScript 的 Ajax 功能强大，制作网站的动态效果（动画、随鼠标移动/点击而改变）就是使用 JS 制作的，它比 JSP 更加灵活简单。
Ajax 全称 Asynchronous JavaScript And XML，译名为异步 JavaScript 和 XML，是指一种创建交互式网页应用的网页开发技术，用于创建快速动态网页。通过在后台与服务器进行少量数据交互，可以使网页实现异步更新，意味着可以在不重新加载整个页面（刷新页面）的情况下对网页的某部分进行更新。
Ajax 是利用现有的技术，实现局部刷新的方法，并非语言。其中 JavaScript 与 XML 是核心：
- JavaScript：负责创建异步对象，发送请求，操作DOM，更新页面的DOM对象；
- XML：负责规定数据在网络传播中的格式（现在 JSON 代替了 XML！）。
-
Ajax的使用：
-
定义Ajax：要使用Ajax必须有下列代码，直接copy，可以放在函数里：
<script type="text/javascript"> function 函数名() { if(window.XMLHttpRequest)//创建Ajax对象，直接copy {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } } </script> -
定义消息传递方式：open方法仅仅是定义消息传递方式，尚未把消息传递出去。
<script type="text/javascript"> function 函数名() { if(window.XMLHttpRequest)//创建Ajax对象，直接copy {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open(method,url,async);//规定请求的类型、url、以及是否异步处理请求 //method:请求的类型，post或get //url:文件在服务器上的位置，其中？表示后面要传递参数 //async:true异步，false同步 //例如：xmlhttp.open("get","demo.jsp?a=1&b=2",true); } </script> -
设置回调函数，通过事件来触发：
<script type="text/javascript"> function 函数名() { if(window.XMLHttpRequest)//创建Ajax对象，直接copy {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open(method,url,async);//规定请求的类型、url、以及是否异步处理请求 //method:请求的类型，post或get //url:文件在服务器上的位置，其中？表示后面要传递参数 //async:true异步，false同步 //例如：xmlhttp.open("get","demo.jsp?a=1&b=2",true); xmlhttp.onreadystatechange=function () //直接copy { if (xmlhttp.readyState==4 && xmlhttp.status==200) { //回应本页面要执行的操作 /**例如： if(xmlhttp.responseText=="success") window.location.href="success.html"; else alert(xmlhttp.responseText); */ } } } </script>onreadystatechange 事件：当请求被发送到服务器时，需要执行一些基于相应的任务，每当 readyState 改变时，就会触发 onreadystatechange 事件，readyState 属性存有 XMLHttpRequest 的状态信息。
XMLHttpRequest 对象的三个重要属性：
属性 描述 onreadystatechange 存储函数或函数名，每当 readyState 改变就会调用该函数 readyState 存有 XMLHttpRequest 的状态，从0到4发生变化：0—请求未初始化，1—服务器连接已建立，2—请求已接收，3—请求处理中，4—请求已完成且响应已就绪 status 200—“OK”，404—“NOT FIND” 在 onreadystatechange 事件中，规定当服务器响应已做好被处理的准备时，开始执行任务，即当 readyState 等于4 且 status 等于200时，表示响应已经就绪。
-
将请求发送到服务器，通过 send 方法来实现：
<script type="text/javascript"> function 函数名() { if(window.XMLHttpRequest)//创建Ajax对象，直接copy {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.open(method,url,async);//规定请求的类型、url、以及是否异步处理请求 //method:请求的类型，post或get //url:文件在服务器上的位置，其中？表示后面要传递参数 //async:true异步，false同步 //例如：xmlhttp.open("get","demo.jsp?a=1&b=2",true); xmlhttp.onreadystatechange=function () //直接copy { if (xmlhttp.readyState==4 && xmlhttp.status==200) { //后端get或post方法执行后，回到前端这里，将要进行的相关处理，通过responseText获取后台servlet反馈的文本 /**例如： if(xmlhttp.responseText=="success") window.location.href="success.html"; else alert(xmlhttp.responseText); */ } } xmlhttp.send();//若open中定义的方法是get，则send()形参列表为空 //若open中定义的方法是post，即需要像HTML表单那样post数据，那么需要在send方法前定义消息头，否则后端无法解析post请求 xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");//使用setRequestHeader()添加HTTP头 xmlhttp.send(String);//String就是希望发送给后端servlet的JSON数据 //例如：xmlhttp.send("sid="+sid+"&password="+password); } </script>
-
-
Ajax基本原理
- 服务器响应：要获取服务器的响应，需要使用 XMLHttpRequest 对象的 responseText （获取字符串形式的响应数据）或 responseXML （获取 XML 形式的响应数据）属性。
- Ajax异步的作用：局部刷新的核心对象是 XMLHttpRequest，异步对象存储在浏览器内存中，其创建和使用方法依赖 JavaScript 语法。
前后端分离
在 Web 开发中，我们一般想要使前后端分离，利用 AJAX 与 Servlet 接口实现前后端的数据交互，数据格式使用 JSON 格式。
-
前端传递 JSON 格式数据给 Servlet
使用 post 方法时，要传递的数据都写在 send 方法里。如：
var data={"name":"Evie","age":18}; xmlhttp.send(JSON.stringify(data)); -
Servlet 处理前端的请求
通过 HttpServletRequest 类，使用 get 请求方法时，查询字符串直接编码在请求的链接 url 中，Servlet 使用 getParameter() 来获取前端的数据。
-
后端将处理结果传递给前端
通过以下方法，输出数据到前台的xhr.responseText
PrintWriter out = response.getWriter(); out.write();通过out.println()输出页面。
仅供参考，如有错误，感谢指正！
334
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
