07 BOM
BOM 编程中，window 对象是顶级对象，代表浏览器窗口
7.1 open 与 close
window 有 open 和 close 方法，可以开启窗口和关闭窗口
打开 window.open();
关闭 window.close();
<input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com');" /><input type="button" value="开启百度(当前窗口)" onclick="window.open('http://www.baidu.com', '_self');" /><input type="button" value="开启百度(新窗口)" onclick="window.open('http://www.baidu.com', '_blank');" /><input type="button" value="开启百度(父窗口)" onclick="window.open('http://www.baidu.com', '_parent');" /><input type="button" value="开启百度(顶级窗口)" onclick="window.open('http://www.baidu.com', '_top');" />
<input type="button" value="打开表单验证" onclick="window.open('002-open.html')"/>
复制代码
当前窗口与顶级窗口
覆盖整个页面的窗口只有一个可以理解为顶级窗口
将当前窗口设置为顶级窗口 代码演示
if(window.top != window.self){ //window.top = window.self; window.top.location = window.self.location;}
复制代码
7.2 弹出确认框
弹出消息框，之前都有用到
<input type="button" value="弹出消息框" onclick="window.alert('消息框!')" />
复制代码
删除消息的确认框
<script type="text/javascript"> function del(){ /* var ok = window.confirm("亲，确认删除数据吗？"); //alert(ok); if(ok){ alert("delete data ...."); } */ if(window.confirm("亲，确认删除数据吗？")){ alert("delete data ...."); } }</script><input type="button" value="弹出确认框(删除)" onclick="del();" />
复制代码
7.3 历史记录
<input type="button" value="后退" onclick="window.history.back()" /><input type="button" value="后退" onclick="window.history.go(-1)" />
复制代码
7.4 设置地址栏的 url
var xx = window.location;xx.href = "http://网址";
复制代码
或者 window.location.href = "http://网址";
或者 window.location = "http://网址";
或者 document.location.href = "http://网址";同理 href 可以省略
总结：有哪些方法可以通过浏览器往服务器发请求
表单 form 的提交。超链接。
<a href="http://localhost:8080/oa/save?username=zhangsan&password=123"> 用户只能点击这个超链接</a>
复制代码
document.locationwindow.locationwindow.open(“url”)直接在浏览器地址栏上输入 URL，然后回车。（这个也可以手动输入，提交数据也可以成为动态的。）以上所有的请求方式均可以携带数据给服务器，只有通过表单提交的数据才是动态的
08 JSON
JavaScript Object Notation（JavaScript 对象标记），简称 JSON。(数据交换格式)。JSON 是一种标准的轻量级的数据交换格式。特点是：体积小，易解析
JSON 主要的作用是：一种标准的数据交换格式。（目前非常流行，90%以上的系统，系统 A 与系统 B 交换数据的话，都是采用 JSON。）
在实际的开发中有两种数据交换格式，使用最多，其一是 JSON，另一个是 XML。XML 体积较大，解析麻烦，但是有其优点是：语法严谨。（通常银行相关的系统之间进行数据交换的话会使用 XML。）
8.1 代码比较
两个数据要交换可以用 json 或者 xml，通过与 java 交换对比一下数据的轻量级
// 创建JSON对象(JSON也可以称为无类型对象。轻量级，轻巧。体积小。易解析。)var studentObj = { "sno" : "110", "sname" : "张三", "sex" : "男"};
// 访问JSON对象的属性alert(studentObj.sno + "," + studentObj.sname + "," + studentObj.sex);
复制代码
也可以进行数组的遍历
// JSON数组var students = [ {"sno":"110","sname":"张三","sex":"男"}, {"sno":"120","sname":"李四","sex":"男"}, {"sno":"130","sname":"王五","sex":"男"}];
// 遍历for(var i = 0; i < students.length; i++){ var stuObj = students[i]; alert(stuObj.sno + "," + stuObj.sname + "," + stuObj.sex);}
复制代码
所以 json 的代码格式是：
var jsonObj = { "属性名" : 属性值, "属性名" : 属性值, "属性名" : 属性值, "属性名" : 属性值, ....};
复制代码
对比：之前没有使用 JSON 的时候,定义类,创建对象,访问对象的属性.
Student = function(sno,sname,sex){ this.sno = sno; this.sname = sname; this.sex = sex;}var stu = new Student("111","李四","男");alert(stu.sno + "," + stu.sname + "," + stu.sex);
复制代码
8.2 JSON 对象
通过键值对进行一一书写
可以 json 嵌套 json 数据
var user = { "usercode" : 110, "username" : "张三", "sex" : true, "address" : { "city" : "北京", "street" : "大兴区", "zipcode" : "12212121", }, "aihao" : ["smoke","drink","tt"]};
// 访问人名以及居住的城市alert(user.username + "居住在" + user.address.city);
复制代码
代码示列：请自行设计 JSON 格式的数据，这个 JSON 格式的数据可以描述整个班级中每一个学生的信息，以及总人数信息。
var jsonData = { "total" : 3, "students" : [ {"name":"zhangsan","birth":"1980-10-20"}, {"name":"lisi","birth":"1981-10-20"}, {"name":"wangwu","birth":"1982-10-20"} ]};
复制代码
记住格式符号不要错乱，特别是;
8.3 eval 函数
通过 eval 赖连接前后端的函数功能：将字符串当做一段 JS 代码解释并执行例如：window.eval("var i = 100;");
主要在实战中
java 连接数据库,查询数据之后,将数据在 java 程序中拼接成 JSON 格式的“字符串”,将 json 格式的字符串响应到浏览器
java 响应到浏览器上的仅仅是一个"JSON 格式的字符串",还不是一个 json 对象
可以使用 eval 函数,将 json 格式的字符串转换成 json 对象
var fromJava = "{\"name\":\"zhangsan\",\"password\":\"123\"}"; //这是java程序给发过来的json格式的"字符串"// 将以上的json格式的字符串转换成json对象window.eval("var jsonObj = " + fromJava);// 访问json对象alert(jsonObj.name + "," + jsonObj.password); // 在前端取数据
复制代码
用 java 处理 json 发过来的字符串对象，\这是转义字符，将其转换成 json 的对象，在用对象调用属性 js 中访问对象属性还可以用这种代码格式
// JS中访问json对象的属性alert(json.username);
// JS中访问json对象的属性alert(json["username"]);
复制代码
8.4 设置 table 的 tbody
将 java 中的数据展示到 table 中表格页面的 html 格式如下
<input type="button" value="显示员工信息列表" id="displayBtn" /><h2>员工信息列表</h2><hr><table border="1px" width="50%"> <tr> <th>员工编号</th> <th>员工名字</th> <th>员工薪资</th> </tr> <tbody id="emptbody"> <!-- <tr> <td>7369</td> <td>SMITH</td> <td>800</td> </tr> <tr> <td>7369</td> <td>SMITH</td> <td>800</td> </tr> <tr> <td>7369</td> <td>SMITH</td> <td>800</td> </tr> --> </tbody></table>总共<span id="count">0</span>条数
复制代码
本身 tbody 没有数据，通过点按钮，将 json 的数据显示到页面上 json 的数据如下
// 有这些json数据var data = { "total" : 4, "emps" : [ {"empno":7369,"ename":"SMITH","sal":800.0}, {"empno":7361,"ename":"SMITH2","sal":1800.0}, {"empno":7360,"ename":"SMITH3","sal":2800.0}, {"empno":7362,"ename":"SMITH4","sal":3800.0} ]};
复制代码
通过点击按钮框实现的代码逻辑如下每循环一次加一个 html 的页面以及 json 的数据数据都加载到 tbody 中
document.getElementById("emptbody").innerHTML = html;document.getElementById("count").innerHTML = data.total;
复制代码
完整代码如图
// 希望把数据展示到table当中.window.onload = function(){ var displayBtnElt = document.getElementById("displayBtn"); displayBtnElt.onclick = function(){ var emps = data.emps; var html = ""; for(var i = 0; i < emps.length; i++){ var emp = emps[i]; html += "<tr>"; html += "<td>"+emp.empno+"</td>"; html += "<td>"+emp.ename+"</td>"; html += "<td>"+emp.sal+"</td>"; html += "</tr>"; } document.getElementById("emptbody").innerHTML = html; document.getElementById("count").innerHTML = data.total; }}
复制代码
8.5 面试题
在 JS 当中：[]和{}有什么区别
java 中的数组：int[] arr = {1,2,3,4,5};JS 中的数组：var arr = [1,2,3,4,5];JSON：var jsonObj = {"email" : "zhangsan@123.com","age":25};
评论