说说AJAX（同源策略与CORS跨域）

作者: 不爱举铁的伪文青不是好前端 | 来源:发表于2019-03-10 16:31 被阅读2次

AJAX入门
说说AJAX（同源策略与CORS跨域）
SpringBoot2.x整合CORS解决跨域问题
跨域
CORS 跨域资源共享
同源策略与跨域
前端跨域
jsonp的跨域原理
跨域请求解决办法
解决ajax跨域问题

发请求

用 form 可以发请求，但是会刷新页面或新开页面
用 a 可以发 get 请求，但是也会刷新页面或新开页面
用 img 可以发 get 请求，但是只能以图片的形式展示
用 link 可以发 get 请求，但是只能以 CSS、favicon 的形式展示
用 script 可以发 get 请求，但是只能以脚本的形式运行

有没有一种方法可以实现

get ,post, delete ,put都可以
想用什么形式展示就用什么形式展示

IE5率先引入ActiveX对象（API)，使得js可以直接发起HTTP请求，随后Chrome，FireFox跟进了，取名为XMLHttpRequest,并纳入w3c规范

XMLHttpRequest 是一个构造函数，是window下的一个全局对象，可以new XMLHttpRequest来使用

AphWut.png

AJAX
Jesse James Garrett 讲如下技术取名叫做 AJAX：异步的 JavaScript 和 XML

使用 XMLHttpRequest 发请求
服务器返回 XML 格式的字符串 (现在用JSON)
JS 解析 XML，并更新局部页面

对于响应来说，我们得到的第四部分始终都是字符串，给浏览器响应了一个符合html格式的字符串

Ap5Uw6.png

接下来给页面添加一个按钮，然后监听这个按钮，每当点击一下，就发一个请求，之前JSONP我们用script来发请求，这次用AJAX试一试
main.js代码

button.addEventListener('click',()=>{
    let request = new XMLHttpRequest()
    request.open('GET','/xxx')
    request.send()
})

server.js代码

else if (path === '/xxx') {
        response.statusCode = 200
        response.setHeader('Content-Type', 'text/xml')
        response.write(`
            <note>
                <to>George</to>
                <from>John</from>
                <heading>Reminder</heading>
                <body>Don't forget the meeting!</body>
            </note>  
        `)
        response.end()
    }

ApoP2Q.png
然后js要把这个响应读取一下，这里先要了解readyState这个属性，当readyState是4的时候，说明请求已经把响应下载完毕了，也就是请求和响应整个过程完成。
readyState从0变到4，时间太短来不及捕捉，我们可以通过onreadystatechange来监听

ApotIK.png
如果readState等于4了，那么再判断status的值来确认请求成功还是失败

button.addEventListener('click',()=>{
    let request = new XMLHttpRequest()
    request.onreadystatechange = ()=>{
        if(request.readyState === 4){
            console.log('请求和响应都完毕了')
            if(request.status >= 200 && request.status <=300){
                console.log('请求成功')
            }else if(request.status >= 400){
                console.log('请求失败')
            }
        }
    }
    request.open('GET','/xxx')
    request.send()
})

请求和响应完成并不代表成功和失败，状态码代表成功和失败

ApTrpF.png
如果请求成功了我们就用request.responseText获取响应的内容，也就是响应的第四部分,我们可以用DOM API来操作他们

Ap7ENV.png

ApbkWT.png
这就是操作xml的方法，这种方法很快就过时了。我们想用一种更简单的形式表示数据，道格拉斯发明JSON，这是一门新的语言。

Apb7X4.png
然后我们通过JSON.parse()方法，把符合JSON语法的字符串转换成JS对象

Apqo5t.png
然后我们就可以通过obj.note.from等拿到里面的内容

同源策略：如果不是同一个域名同一个端口同一个协议，就不能发送AJAX请求。只有AJAX不允许，form,img,script,link都允许
为什么要有同源策略：form发请求后页面会自动刷新，原来的页面就回收了，没有办法拿到新页面的内容。而AJAX可以拿到响应的内容

突破同源策略就是跨域CORS
CORS可以告诉浏览器，我俩一家的不要阻止他

 else if (path === '/xxx') {
        response.statusCode = 200
        response.setHeader('Content-Type', 'text/json;charset=utf-8')
        response.setHeader('Access-Control-Allow-Origin','http://frank.com:8001')  //CORS
        response.write(`
            {
                "note":{
                    "to":"舒克",
                    "from":"贝塔",
                    "heading":"你好",
                    "content":"Hellow"
                }
            }
        `)
        response.end()
    }

这样JSONP和AJAX都可以实现跨域了，但是JSONP不能POST
CORS全称是：Cross-Origin Resource Sharing跨站资源共享

手写一个AJAX

var request  = new XMLHttpRequest
request.open('GET','http://jack.com:8002/xxx')
request.send()
request.onreadystatechange = ()=>{
  if(request.readyState === 4){
    if(request.status >= 200 && request.status <=300){
      let string = request.responseText
      let obj = window.JSON.parse(string)
    }
  }
}