Web前端学习-第五课JavaScript篇

Q9：什么是跨域？什么是JSON？什么是JSONP？解决跨域问题有哪些方法？请结合代码和文字说明。

跨域：由于JavaScript同源策略（一段脚本只能读取来自同一来源的窗口和文档的属性，同一来源指主机名，协议和端口号的组合）的限制，a.com域名下的js没法操做b.com域名下的对象，只要是协议，域名，端口有任何一个不一样都被当作是不一样的域；

 

Json（JavaScript Object Notation）：一种轻量级的数据交换格式。基于ECMAScript的一个子集。采用彻底独立于语言的文本格式，可是也使用了相似相似于C语言家族的习惯，这些特性是json成为理想的交换语言，易于人阅读也易于机器解析和生成。

JSONP（JSON with Padding）：是JSON的一种使用模式，可用于解决主流浏览器的跨域数据访问的问题。因为同源策略，通常来讲位于server1.example.com的网页没法与不是server1.example.com的服务器沟通，而HTML的<script>元素是一个列外。利用<script>元素这个开放策略，网页能够获得从其余来源动态产生的json自理啊，而这种使用模式就是所谓的JSONP。使用JSONP抓到的并非JSON，而是任意的JavaScript，用JavaScript直译器执行而不是用JSON解析器解析。

JSONP优势：不想XMLHttpRequest对象实现的ajax请求那样受到同源策略的限制，兼容性好，在古老的浏览器中均可以运行，不须要XMLHttpRequest或ActiveX的支持，而且在请求完毕后能够经过调用callback的方式回传结果。             缺点：只支持GET请求不支持POST等其余类型的HTTP请求，不能解决不一样域的两个页面之间如何调用JavaScript调用的问题。

解决跨域问题：（http://www.cnblogs.com/rainman/archive/2011/02/20/1959325.html）

  （http://segmentfault.com/a/1190000000718840）

  （http://www.cnblogs.com/oneword/archive/2012/12/03/2799443.html）

 

跨域资源共享（CORS）:CORS基本思想使用自定义的http头部让浏览器与服务器进行沟通，从而决定应该是成功仍是失败；

 

 

绝对路径即要跨域访问的接口地址，服务器端对于CORS的支持主要是经过设置Access-Control-Allow-Origin来进行的。

 

经过jsonp跨域：JSONP由两部分组成，回调函数（当响应到来时应该在页面中调用的函数）和数据（传入回调函数中的JSON数据）；在js中直接用XMLHttpRequest请求不一样域上的数据时不能够，可是在页面上引入不一样域上的js脚本文件却能够，JSONP正是利用此特性：

 

Js文件载入成功后会执行在URL参数中指定的函数，而且会把须要的json数据做为参数传入，因此JSONP是须要服务器端的页面进行相应的配合。

 

输出结果为dosomething（[‘a’,’b’,’c’]）；

若是页面使用的jQuery：

 

jQuery会自动生成一个全局函数来替换callback=？中的问好，以后获取到数据后又会自动销毁，实际上就是起一个临时代理函数的做用，$.getJSON方法会自动判断是否跨域，不跨域的话就调用普通的ajax方法，跨域的话则会以异步加载js文件的形式来调用jsonp的回调函数。

 

 

经过修改document.domain来跨子域：

将两个页面的document.domain设置成相同的域名，注意设置是有限的，只能把它设置成自身或更高一级的父域，且主域必须相同。

 

修改document.domain的方法只适用于不一样子域的框架间的交互。

 

使用window.name来进行跨域：即在一个窗口（window）的生命周期内，窗口载入的全部的页面都是共享一个window.name的，每一个页面对window.name都有读写的权限，他是持久存在一个窗口载入过的全部页面中。

 

使用HTML5的window.postMessage方法跨域：window.postmessage(message,targetOrigin)方法是html5 新引进的特性，可使用它来向其余的window对象发送消息，不管这个window对象是属于同源或不一样源。

 

jQuery：（jsonp方式）

 

执行此段js时，js向服务器发出了请求：http://192.168.0.5/Web/web1.aspx?jsoncallback=jsonp134505244726&_=1354505244742

而服务器也相应的返回了对象：jsonp1354506338864({“name”:”Zhangsan”,”date”:”2015-8-4”})

此时实现了跨域范文数据的要求。

 

动态建立script：

 

 

利用iframe和location.hash：利用location.hash来进行传值。在url:http://a.com#helloworld中的#helloworld就是lacation.hash，改变hash并不会致使页面刷新，因此能够利用hash值来进行数据传递，可是数据容量是有限的，假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息，cs1.html首先建立一个隐藏的iframe，iframe的src指向cnblogs.com域名下的cs2.html页面，这是的hash值能够作参数传递用。cs2.html响应请求后再将经过修改cs1.html的hash值来传递参数（因为两个页面不在同一个域下IE，Chrome不容许修改parent.location.hash的值，因此要借助a.com域名下的一个代理iframe；Firefox能够修改）。同时在cs1.html上加一个定时器，隔离一段时间来判断location.hash的值有没有变化，一点有变化则获取hash值

 

 

Q10：请描述一下JavaScript定时器。使用定时器编写一个时钟。

 

JavaScript是运行于单线程中的，而定时器仅仅是在将来某个时间执行，执行具体时间不能被保证，在页面的生命周期中不一样的时间有可能有其余代码在控制JavaScript的里进程。浏览器只是负责排序，纸牌某个代码在某个时间点运行；定时器对队列的工做方式：当特定的时间过去，将代码插入，添加到队列并不觉得会立刻执行，只能说会尽快执行，设定时间到达时只是被加入到队列中，若是这个时间点队列是空的则会被立刻执行；

 

 

 

setInterval()方法会不停的调用函数，直到clearInterval（）被调用或窗口被关闭。由setInterval（）返回的ID值可用做clearInterval（）方法的参数。关于重复定时器可使用setTimeout来重复建立定时器，也能够直接用setInterval，使用setInterval建立的定时器确保了定时器规则的插入队列中这个方法在于代码可能在再次添加到队列以前尚未完成执行，可能寻到定时器重复运行好几回而中间没有停顿，如今搜索殷勤能避免这个问题，当使用setInterval时，仅当没有定时器的任何其余代码时，才将定时器代码添加到队列中来确保定时器代码加入到队列的时间间隔是指定的间隔，因此使用setInterval会存在两个问题：某些间隔会被跳过；多个定时器的代码执行间隔可能会比预期的小。为避免此问题使用链式setTimeout调用：

 

 

 

倒记计时器：timename=setTimeout(“function();”,delaytime);只做用一次

循环计时器：timename=setInterval(“function();”,delaytime);反复做用

 

获取焦点：if(“mid” == document.activeElement.id){alert();}”mid”表单对应的ID