说说AJAX(同源策略与CORS跨域)

发请求

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

有没有一种方法可以实现

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

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(`
            
                George
                John
                Reminder
                Don't forget the meeting!
              
        `)
        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)
    }
  }
}

你可能感兴趣的:(说说AJAX(同源策略与CORS跨域))