《前端JavaScript面试技巧》学习笔记( 8 ) Ajax

问题

手动编写一个 ajax ,不依赖第三方库
跨域的几种实现方式

知识点

1: XMLHttpRequestajax 的核心 API
2: 状态码说明
3: 跨域

---

• XMLHttpRequest

var xhr = new XMLHttpRequest(); //创建xhr对象
xhr.open('GET','/api',false);
xhr.onreadystatechange = function() {
    //这里的函数异步执行,可以参考之前js基础中的 异步模块
    if (xhr.readyState == 4) { //状态的变化
        if (xhr.status == 200) { //服务端返回的状态码
            console.log(responseText) //服务端返回的内容
        }
    }
}
xhr.send(null)

IE 低版本使用 ActiveObject, 跟 W3C 标准不一样

---

• 状态码说明

xhr.onreadystatechange = function() {
    if (xhr.readyState == 4) { //状态的变化
        if (xhr.status == 200) { //服务端返回的状态码
            console.log(responseText) //服务端返回的内容
        }
    }
}

每次readyState 变化的时候,都会触发onreadystatechange 函数的执行
readyState

• 0 (未初始化) 还没有调用send() 方法
• 1 (载入) 已调用 send() 方法,正在发送请求
• 2 (载入完成) send() 方法执行完成,已经接受到全部响应内容
• 3 (交互) 正在解析响应内容
• 4 (完成) 响应内容解析完成,可以在客户端调用了

status http状态码

• 2xx - 成功处理请求。如200
• 3xx - 需要重定向，浏览器直接跳转
• 4xx - 客户端请求错误，如404（地址错误）
• 5xx - 服务器端错误

---

• 跨域
• 什么是跨域? 浏览器有同源策略,不予许 ajax 访问其它域接口
• 跨域条件: 协议 、域名 、端口, 有一个不同,就算跨域

可以跨域加载资源的三个标签

• < img src =xxx >
• < link href = xxx>
• < script src = xxx>

三个标签的场景

• <img> 用于打点统计，统计网站可能是其它域

• <link>,<script>可以使用CDN，CDN也是其它域

• <script>可以用于JSONP

• JSONP
  JSONP实现原理
  加载http://coding.m.imooc.com/classindex.html，不一定服务器端真的有一个classindex.html文件，服务器可以根据请求动态生成一个文件来返回，同理于<script src='http://coding.m.imooc.com/api.js'>

• 实现原理
  假如你的网站要跨域访问慕课网的一个接口，慕课网给你一个地址http://coding.m.imooc.com/api.js，返回内容格式如callback({x:100, y:200})（可动态生成）

<script>
window.callback=function(data){
//这是我们跨域得到的信息
console.log(data);
}
</script>
<script src='http://coding.m.imooc.com/api.js'></script>
<!-- 以上将返回callback({x:100，y:200}) -->

服务端设置http header
另外一个解决跨域的简单方法，需要服务器端来做，但是作为交互方，我们必须知道这个方法，是将来解决跨域问题的一个趋势

/注意：不同后端语言的写法可能不一样
//第二个参数填写允许跨域的域名称，不建议直接写"*"
response.setHeader('Access-Control-Allow-Origin','http://a.com,http://b.com');
response.setHeader('Access-Control-Allow-Headers','X-Request-With');
response.setHeader('Access-Control-Allow-Methods','PUT,POST,GET,DELETE,OPTIONS');
//接受跨域的cookie
response.setHeader('Access-Control-Allow-Credentials','true');