JavaScript面试技巧（事件、ajax、存储）

最新推荐文章于 2024-10-17 09:40:47 发布

bailun1807

最新推荐文章于 2024-10-17 09:40:47 发布

阅读量70

点赞数

文章标签： javascript 面试数据库 ViewUI

原文链接：http://www.cnblogs.com/CarsonScarlet/p/7459101.html

版权

一、事件

1.编写一个通用的事件监听函数

 1 function bindEvent(elem, type, selector, fn) {
 2     if(fn == null) {
 3         fn = selector
 4         selector = null
 5     }
 6     elem.addEventListener(type,function(e) {
 7         var target
 8         if(selector) {
 9             target = e.target
10             if(target.matches(selector)) {
11                 fn.call(target, e)
12             }
13         } else {
14             fn(e)
15         }
16     })
17 }

2.事件冒泡流程

　　1）DOM树形结构

　　2）事件冒泡

　　3）阻止冒泡

　　4）冒泡的应用

3.对一个无限下拉加载图片的页面，如何给每一个图片绑定事件？

　　使用代理

二、ajax

1.手动编写一个ajax，不依赖第三方库

（无论什么复杂的ajax的封装，都是依照这个原理形式做的）

1 var xhr = new XMLHttpRequest()
2 xhr.open("GET","/api",false)  
3 xhr.onreadystatechange = function(){
4     if(xhr.readyState == 4 && xhr.status == 200) {
5         alert(xhr.responseText)
6     }
7 }
8 xhr.send(null)

readyState ==  0　　（未初始化），还没调用send()方法
　　　　　　　　　1　　（载入），已调用send()方法，正在发送
　　　　　　　　　2　　（载入完成），send()方法执行完成，已经接受到全部形影内容
　　　　　　　　　3　　（交互），正在解析相应内容
　　　　　　　　　4　　（完成），响应内容解析完成，可以在客户端调用

status == 2xx - 表示成功处理请求，如200

　　　　　 3xx - 需要重定向，浏览器直接跳转

　　　　 4xx - 客户端请求错误，如404

　　　　 5xx - 服务器端错误，如504（服务端连接数据库超时）

2.跨域

　　有三个标签允许跨域加载资源：<img src="xxx" > <link href="xxx" /> <script src="xxx"></script>

　解决跨域方法：

　　1）JSONP实现原理

　　　　服务器可以根据请求动态生成一个不存在的文件返回

　　　　window.callback = function(data) {

　　　　　　//这是我们跨域得到信息

　　　　　　console.log(data)

　　　　}

　　2）服务器端设置http header

　　　　另外一个解决跨域的解决方法需要服务器来完成

1 //不同的后盾语言的写法可能不一样
2 
3 //第二个参数填写允许跨域的域名城，不建议直接写*
4 response.setHeader("Access-Control-Allow-Origin", "http://a.com,http://b.com");
5 response.setHeader("Access-Control-Allow-Headers", "X-Requested-With");
6 response.setHeader("Access-Control-Allow-Methods", "PUT,POST,GET,DELETE,OPTIONS");
7 
8 //接受跨域的cookie
9 response.setHeader("Access-Control-Allow-Credentials", "true");