JS面试—Ajax

目录

一、题目

1、手动编写一个Ajax，不依赖第三方库

2、跨域的几种方式

二、知识点

2.1 XMLHttpRequest

2.2 状态码说明

2.3 跨域

---

一、题目

1、手动编写一个Ajax，不依赖第三方库

2、跨域的几种方式

• JSONP跨域
• CORS跨域资源共享

二、知识点

2.1 XMLHttpRequest

//创建对象
var xhr=new XMLHttpRequest();
//绑定地址
    xhr.open("get","/api",false)  //false异步
//绑定监听
    xhr.onreadystatechange=function (){
        //这里的函数异步执行，可参考之前JS基础中的异步模块
        if(xhr.readyState==4&&xhr.status==200){
            console.log(xhr.responseText)
        }
    }
    xhr.send()

 IE低版本使用ActiveXObject，和W3C标准不一样

2.2 状态码说明

1.readyState的状态码

• 0：请求未初始化 还没有调用send()方法
• 1：服务器建立连接   已调用send()方法，正在发送请求
• 2：收到的请求  send()方法执行完成，已经接收到全部的响应内容
• 3：处理请求   正在解析响应内容
• 4：请求完成和响应准备就绪   响应解析完成，可以在客户端调用了

2.status的状态码

• 2xx    表示成功处理请求 如200
• 3xx   表示重定向，浏览器直接跳转
• 4xx   客户端请求错误，如404
• 5xx    服务器端错误    504服务器连接数据库超时

2.3 跨域

• 什么是跨域

浏览器有同源策略，不允许ajax访问其他域接口

• 跨域条件：

协议、端口、域名，有一个不同就算跨域（HTTP协议默认端口80  HTTPS协议默认端口443）

• 有三个标签允许跨域加载资源

<img src="xxxxxxx">     可以用于打点统计，统计网站可能是其他域

<link href="xxxxxxx">    css样式   可以使用CDN,CDN的也是其他域

<script src="xxxxxxx">   可以用于JSONP 

• 跨域注意事项

所有的跨域请求都必须经过信息提供方允许

如果未经允许即可获取，那是浏览器同源策略出现漏洞

• JSONP

参考本篇文章http://blog.sina.com.cn/s/blog_c112a2980102xm4q.html   一定要看，写的很棒的

它的核心是动态添加script标签来调用服务器提供的js脚本，

简单的来说如果想通过纯web端跨域访问数据就要在远程服务器上把数据放进js格式的文件里，供客户端调用和处理，web客户端通过调用脚本的方法，来跨域调用服务器上动态生成的js格式文件，服务器可以动态的把客户端需要的数据生成json文件。

举个简单的例子就是我们在本地定义一个callback函数，并且将callback作为一个参数传递给服务器，然后服务器返回数据时就会调用这个callback函数，并且把json数据作为参数传入，这样客户端就可以接收到数据并且可以处理数据了

<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

CORS跨域资源共享

Access-Control-Allow-Origin