Ajax相关

 

一、手动写一个原生ajax ：

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

var xhr = new XMLHttpRequest()
xhr.open("GET", "./api", false)
xhr.onreadystatechange = function () {
    //注意，这里是异步执行
    if (xhr.readyState == 4) {
        if (xhr.status == 200) {
            alert(xhr.responseText)
        }
    }
}
xhr.send(null)

 

readyState：

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

status：

• 2xx，表示成功处理请求，如200
• 3xx，需要重定向，浏览器直接跳转
• 4xx，客户端错误，如404 

二、跨域

1、什么是跨域？

• 浏览器有同源策略，不允许ajax访问其他域接口
• 跨域条件：协议、域名、端口，只要有一个不一样，就算跨域
• 有三个标签允许跨域加载资源：

1. <img src="xxx" >，浏览器没有跨域限制，有些网站如百度、知乎做了防盗链处理，就加载不出来，但大多数网站是支持img跨域的
2. <link href="xxx">，可以跨域加载css资源，可以使用CDN，CDN的也是其他域
3. <script src="xxx">，可以用于JSONP

2、JSONP（针对前端来说）

实现原理：

 

• 比如加载一个文件https://github.com/index.html
• 不一定服务器端真正有一个index.html文件
• 服务器可以根据请求，动态生成一个文件，返回
• 同理于<script src="https://github.com/api.js">，服务器端动态

3、服务器端设置http header （针对后端用）