javascript基础-3
一、Browser对象
<一>、window对象
1.window.尺寸
当ie>=9时：
window.innerHeight/outHeight window.innerWidth/outWidth
当ie=8，7，6，5时：
window.documentElement.clientHeight/outHeight window.documentElement.clientWidth/outWidth 或者 document.body.clientHeight document.body.clientWidth
2.window.open();widow.colse();
(1).window.open(URL,name,features,[replace])
其中： URL：新窗口的位置，有“省略/空格”时，不能显示任何文档；
name：窗口名称/target特性；
features：窗口特点：
channelmode=yes|no|1|0 是否使用剧院模式显示窗口。默认为 no。 directories=yes|no|1|0 是否添加目录按钮。默认为 yes。 fullscreen=yes|no|1|0 是否使用全屏模式显示浏览器。 默认是 no。处于全屏模式的窗口必须同时处于剧院模式。 height=pixels 窗口文档显示区的高度。以像素计。 left=pixels 窗口的 x 坐标。以像素计。 location=yes|no|1|0 是否显示地址字段。默认是 yes。 menubar=yes|no|1|0 是否显示菜单栏。默认是 yes。 resizable=yes|no|1|0 窗口是否可调节尺寸。默认是 yes。 scrollbars=yes|no|1|0 是否显示滚动条。默认是 yes。 status=yes|no|1|0 是否添加状态栏。默认是 yes。 titlebar=yes|no|1|0 是否显示标题栏。默认是 yes。 toolbar=yes|no|1|0 是否显示浏览器的工具栏。默认是 yes。 top=pixels 窗口的 y 坐标。 width=pixels 窗口的文档显示区的宽度。以像素计。
replace：一个可选布尔值
true：URL 替换浏览历史中的当前条目 false：URL 在浏览历史中创建新的条目
(2).window.close()
- 直接调用； eg: <script type="text/javascript"> function closeCurrentWindow() { window.close(); } </script>
- 当用于关闭指定的由window.open()打开的窗口，在没有window.open()时，则控制台显示“无法使用脚本关闭非脚本打开窗口”； eg： <script type="text/javascript"> var openedWindow; function openWindow() { openedWindow = window.open('moreinfo.htm'); } function closeOpenedWindow() { openedWindow.close(); } </script>
(3).window.resize()；window.scroll()；
window.resizeBy(XX[px]，YY[px]);——窗口尺寸变化的单位为：±XX，±YY （单位/px）； window.resizeTo(XX[px]，YY[px]);——窗口尺寸变换为：XX,YY（单位/px）； window.scrollBy(XX[px]，YY[px]);——屏幕滚动的单位为：±XX，±YY （单位/px）； window.scrollToo(XX[px]，YY[px]);———屏幕滚动到数据位置：XX,YY（单位/px）； object.onscroll()；onscroll事件：元素滚动时执行..； document.Element.scrollTop||document.body.scrollTop;回顶；
2、History对象
- window对象的一部分，可通过 window.history 属性对其进行访问：
- window.history.back()——返回一前一个URL；
- window.history.forward()——加载下一个URL；
- window.history.go()——加载某个具体的页面；
3、Laction对象
- window对象的一部分，可通过 window.Location 属性对其进行访问：
- 属性：
- >window.location.hash()——返回一个URL的锚部分（#及其以后的部分）； window.location.host()——返回/设置主机名及端口 window.location.href()——返回完整的URL； window.location.search()——返回/设置RUL查询部分（从?开始的URL）； window.location.port()——返回/设置一个URL服务器使用的端口号；
- 方法： window.location.reload()——重新加载当前文档； window.location.assign()——加载一个新的文档； window.location.repalace()——替换当前文档；
<二>、Screen对象
Screen 对象包含有关客户端显示屏幕的信息。
screen.availHeight ——返回屏幕的高度（不包括Windows任务栏） screen.availWidth ——返回屏幕的宽度（不包括Windows任务栏） screen.colorDepth ——返回目标设备或缓冲器上的调色板的比特深度 screen.height ——返回屏幕的总高度 screen.pixelDepth ——返回屏幕的颜色分辨率（每象素的位数） screen.width ——返回屏幕的总宽度
window.innerHeight/Width、outHeight/Width与screen.height/width的区别： 前者是，浏览器可见区域的内宽/高不含浏览器边框，但包含滚动条，兼容：ie9/10、chrome、firefox； 后者显示的是，屏幕的高度，同常与屏幕宽/高一致，兼容：ie7/8/9/10、chrome、firefox；
<三>、Navigatar对象
Navigator 对象包含有关浏览器的信息： 对象：
navigator.appCodeName——返回浏览器的代码名； navigator.appName——返回浏览器的名称； navigator.appVersion——返回浏览器的平台和版本信息； navigator.cookieEnabled——返回指明浏览器中是否启用 cookie 的布尔值； navigator.platform——返回运行浏览器的操作系统平台； navigator.userAgent—— 返回由客户机发送服务器的user-agent 头部的值；
方法：
navigator.javaEnabled() ——指定是否在浏览器中启用Java，返回blooner； navigator.taintEnabled() ——规定浏览器是否启用数据污点(data tainting)；目前只有 Internet Explorer 和 Opera 浏览器支持 taintEnabled() 方法。 （链接为‘数据污点’的解释： 1、http://bbs.csdn.net/topics/300242073 2、 https://stackoverflow.com/questions/11520708/data-tainting-in-javascript ）；
<四>、悬浮在页面中的广告(现在很少见了)
1、js方法：top=XX.原top值+滚动条的scrollTop的距离+”px”；效果比较流畅； 2、css方法“：fixed；会出现广告窗口抖动的情况；
二、浮动框架
<iframe src="URL" frameborder="n" name="XX" id="Y">
其中，src="URL"可用来调用其他XX.html文件，这样对一些通用的html。只需一个即可，而且f12检查时，显示为空。
运用：
<div> <a href="1.html" target="NAME名"> xx</a> </div> <div> <iframe src="YY.html" framborder="0" name="NAME名" ></div> 即:使用相同的name，即可将两者联系起来，在同一界面中，无需重复iframe部分，至改变<a>内容即可；
- 早期的iframe主要用于导航栏（navigator） 但因为每次刷新都会回到首页，于是后台用ASP 有 SSI，PHP 有 require、require_once 或 include 函数、JSP 也有 include 指令等解决；
- 现在使用iframe的地方如： 沙箱隔离（Sandboxie：一种按照安全策略限制程序行为的执行环境。早期主要用于测试可疑软件等）； 引用第三方内容； 独立的交互内容； 需要保持独立焦点和历史管理的子窗口（在ajax中会面临用户无法退回上一步的情况，可以用iframe解决，ajax下面会说）
举例，目前用在邮箱(如qq邮箱)中、w3school的代码测试页面、网易音乐的底部播放条、所见即所得的网页编辑器（WYSIWYG Online HTML Editor）均在使用。
- （详细情况自己还不明白，搜了一下，先存着，以后遇到慢慢研究。https://blog.51cto.com/blogger/publish） 三、Cookie cookie 是存储于访问者的计算机中的变量。每当同一台计算机通过浏览器请求某个页面时，就会发送这个 cookie。 以“键=值”对形式存储； js中，document.cookie——创建、读取、删除cookie； eg：
document.cookie="username=LITAI；expires='UTC/GMT' "；（注;协调世界时和格林尼治标准时间，现在普遍使用前者）
设置cookie方式：
(1)、 document.cookie="username=LITAI；expires='UTC/GMT' "； (2)、var times=new Data().gettime(); times.setTime(newData().getTime()+1000);1000——延迟1000ms时间，以便显示之后1000ms后cookie消失； (3)、有效时间=times.toUTCString()/tmes.toGTMString()；
四、AJAX （Asynchronous JavaScript and XML）
<一>、AJAX
- AJAX不是一种新的编程语言，而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。 传统的web交互，每次用户提交请求时，服务器都会重新返回一个完整的Html页面，这样用户需要等待而服务器资源也被浪费，于是诞生了ajax等各种服务于此的技术。 （ajax历史：https://www.cnblogs.com/shenzikun1314/p/6529911.html ）
- AJAX核心依赖的是浏览器提供的XMLHttpRequest对象，其原理相当于在服务器和用户之间加了一个AJAX引擎，使用户操作和服务器实现响应异步化。
过程：初始化——>>发请求——>>服务器接受并处理——>>获得服务器响应 参考：w3school：http://www.w3school.com.cn/ajax/ajax_xmlhttprequest_create.asp （1）首先，创建XMLHttpRequest对象：
variable=new XMLHttpRequest()（;对于IE5/6版本使用：variable=new ActiveXObject("Microsoft.XMLHTTP");）
检查是否支持XMLHttpRequest 对象：
var xmlhttp; if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else {// code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); }
（2）接着，向服务器发送请求：
xmlhttp.open("GET","test1.txt",true); xmlhttp.send();
- 其中：open（method、url、async） 规定请求的类型、URL 以及是否异步处理请求。： method：请求的类型；GET 或 POST url：文件在服务器上的位置,任何形式的服务器脚本文件，.txt/.xml/.asp/.php; async：true（异步，浏览器可以做其他事）或 false（同步，浏览器不能做其他事），一般默认异步；
- send(string)将请求发送到服务器:
- > string：仅用于 POST 请求;
- GET 还是 POST？ 与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。 然而，在以下情况中，请使用 POST 请求：
- 无法使用缓存文件（更新服务器上的文件或数据库）
- 向服务器发送大量数据（POST 没有数据量限制）
- 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠
get请求：
xmlhttp.open("GET","demo_get.asp?t=" + Math.random(),true); xmlhttp.send();为了避免缓存造成的网页自动保存情况，加一个如 Math.random()的变量；
post请求：
xmlhttp.open("POST","demo_post.asp",true); xmlhttp.send();
（3）接着，向服务器处理后，我们开始接受服务器响应： 使用XMLHttpRequest 对象的 responseText 或 responseXML 属性： responseText——获得字符串形式的响应数据 ：
document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
responseXML——获得 XML 形式的响应数据: 请求 books.xml （关于XML请求及响应文档的说明： http://blog.csdn.net/jason009/article/details/1299831 ）文件，并解析响应:
（4）onreadystatechange 事件 当请求被发送到服务器时，我们需要执行一些基于响应的任务。 每当 readyState 改变时，就会触发 onreadystatechange 事件。 readyState 属性存有 XMLHttpRequest 的状态信息.
readyState —— 存有 XMLHttpRequest 的状态。从 0 到 4 发生变化（以数字表示）：
- 0: 请求未初始化
- 1: 服务器连接已建立
- 2: 请求已接收
- 3: 请求处理中
- 4: 请求已完成，且响应已就绪
status—— 状态以字符串表示（Ajax status和statusText状态对照表：http://blog.csdn.net/qi1271199790/article/details/60465859 ）：
200: "OK" 404: 未找到页面
当 readyState 等于 4 且状态为 200 时，表示响应已就绪：
xmlhttp.onreadystatechange=function() { if (xmlhttp.readyState==4 && xmlhttp.status==200) { document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } }
然后遍历并赋值即可：
xmlDoc=xmlhttp.responseXML; txt=""; x=xmlDoc.getElementsByTagName("ARTIST"); for (i=0;i<x.length;i++) { txt=txt + x[i].childNodes[0].nodeValue + "<br />"; } document.getElementById("myDiv").innerHTML=txt;
ajax实例1：
<script> window.onload = function() {
var oBtn = document.getElementById('btn');
oBtn.onclick = function() {
var xhr = null;
try {
xhr = new XMLHttpRequest();
} catch (e) {
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}
/*
1.缓存 在url？后面连接一个随机数，时间戳
2.乱码 编码encodeURI
*/
xhr.open('get','links文件夹/X.get.php?username='+encodeURI('小明')+'&age=23&' + new Date().getTime(),true);
xhr.send();
xhr.onreadystatechange = function() {
if ( xhr.readyState == 4 ) {
if ( xhr.status == 200 ) {
alert( xhr.responseText );
} else {
alert('出错了,Err：' + xhr.status);
}
}
}
}} </script>
<二>、AJAX的封装：
<script src="js/ajax.js"></script> <script> window.onload = function() { var oBtn = document.getElementById('btn'); oBtn.onclick = function() { ajax('get','links/getNews.php','',function(data) { var data = JSON.parse( data ); var oUl = document.getElementById('content'); var html = ''; for (var i=0; i<data.length; i++) { html += '<li><a href="">'+data[i].title+'</a>[<span>'+data[i].date+'</span>]</li>'; } oUl.innerHTML = html; }); } } </script>
应用： 1、photolist：
<div class="show"></div> <input type="button" class="btn" value="加载中."/> <script src="js/ajax.js"></script> <script> window.onload=function(){
var show=document.getElementsByClassName("show")[0];
var btn=document.getElementsByClassName("btn")[0];
var page=0;
var loading=false;
loadingpage()
btn.onclick=function(){
if(!loading){
loadingpage()
}
}
function loadingpage(){
loading=true;
btn.value="加载中.....";
ajax("get","*links/getImages.php*?page="+page,"",function(data){
var ndata=JSON.parse(data);
if(!ndata.err){
var msg="";
for(var i=0;i<ndata.length;i++){
msg+="<div class='pic'><img src='"+ndata[i].src+"'><p>"+ndata[i].name+"</p></div>";
}
var nshow=document.createElement("div");
nshow.innerHTML=msg;
show.appendChild(nshow);
page++;
btn.value="点击加在更多图片";
loading=false;
}
else{
btn.value="已经没有图片了";
}
})
}
}</script> 2、获取data值： 从获取
<body> <input type="text" class="city"/> <button>显示天气</button> <p class="show"> 今天是：<span class="date1"></span><br> 天气：<span class="type1"></span><br> 最高温度为 <span class="high1"></span><br> 最底温度为 <span class="low1"></span><br> </p> <script src="js/ajax.js"></script> <!--文件所在位置--> <script> window.onload=function(){ var city=document.getElementsByClassName("city")[0]; var btn=document.getElementsByTagName("button")[0]; var date1=document.getElementsByClassName("date1")[0]; var type1=document.getElementsByClassName("type1")[0]; var high1=document.getElementsByClassName("high1")[0]; var low1=document.getElementsByClassName("low1")[0]; btn.onclick=function(){ var city1=city.value; ajax("get","http://wthrcdn.etouch.cn/weather_mini?city="+city1,"",function(da){ var data=JSON.parse(da); console.log(data); var list=data.data.forecast[0]; date1.innerHTML=list.date; type1.innerHTML=list.type; high1.innerHTML=list.high; low1.innerHTML=list.low; }) } } </script> </body>
腾讯云开发者
