Ajax跨域总结

问题

1、手写一个原生ajax

2、什么是跨域，如何解决

知识点

1、XMLHttpRequest

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);

IE低版本使用的是ActiveObject对象，和W3C标准不一样； IE低版本使用量非常少，了解即可；

2、状态码说明

• readyState
  • 0 - (未初始化)还没有调用send()方法
  • 1 - (载入)已调用send()方法，正在发送请求
  • 2 - (载入完成)send()方法执行完成，已接收到全部响应内容
  • 3 - (交互)正在解析响应内容
  • 4 - (完成)内容解析完成，可以在客户端调用了
• status
  • 2XX - 表示成功处理请求。如200
  • 3XX - 需要重定向，浏览器直接跳转
  • 4XX - 客户端请求错误，如404
  • 5XX - 服务端错误

3、跨域

• 什么是跨域
  • 浏览器同源策略，不允许ajax请求其他域接口
  • 跨域条件：协议、域名、端口，有一个不同就属于跨域
  • http协议默认端口80，https协议默认端口43
• JSONP
  • 可以跨域的三个html标签
    • <img src=XXX>
    • <link href=XXX>
    • <script src=XXX>
  • JSONP原理
• 服务器端设置 http header
  • 另外一个解决跨域的方式是在服务端来做
  • 是将来解决跨域问题的一个趋势