2018.10.03 学习笔记 // 前端Javascript // Ajax与跨域

题目：

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

知识点：

• XMLHttpRequest
• 状态码说明
• 跨域

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

readyState

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

status

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

跨域：

• 什么是跨域
  • 浏览器有同源策略，不允许ajax访问其他域接口
  • http://www.yourname.com/page.html
  • http://m.imooc.com/course/ajaxcourserence?cid=459      //想访问的接口
  • 跨域条件：协议、域名、端口，有一个不同就算跨域
• 可以跨域的三个标签
  • 但是有三个标签允许跨域加载资源
  • <img src=xxx>
  • <link href=xxx>
  • <script src=xxx>
• 三个标签的场景
  • <img>用于打点统计，统计网站可能是其他域
  • <link><script>可以使用CDN，CDN的也是其他域
  • <script>可以用于JSONP
• 跨域注意事项
  • 所有的跨域请求都必须经过信息提供方允许
  • 如果未经允许即可获取，那是浏览器同源策略出现漏洞
• JSONP实现原理
  • 加载http://www.yourname.com/page.html
  • 不一定服务器端真正有一个classdex.html文件
  • 服务器可以根据请求，动态生成一个文件，返回
  • 同理于<script src="http://www.yourname.com/api.js">

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

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