什么是Ajax？ | 余韵之

一、我们如何向服务器发送请求？

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

那么有没有什么方式，可以使用get、post、put、delete 请求都行，并且用任意的方式返回给浏览器展示？

当然有，这个就是AJAX。

二、什么是AJAX？

Jesse James Garrett 讲同时满足以下技术取名叫做AJAX:异步的 JavaScript 和 XML。

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

如何使用XMLHttpRequest？

JS文件代码如下：

myButton.addEventListener('click', (e)=>{
    let request = new XMLHttpRequest()
    request.open('get', '/xxx') // 配置request，请求方式和路径
    request.onreadystatechange = ()=>{
        if(request.readyState===4){  //当请求相应完毕，执行以下代码
            if(request.status >= 200 && request.status < 300){  //判断状态码
                let string = request.responseText    
                // 把符合 JSON 语法的字符串,转换成 JS 对应的值
                let object = window.JSON.parse(string)  
                // JSON.parse 是浏览器提供的
                console.log(typeof object)//得到的值为object类型
                console.log(object)   // 得到后端返回字符串转成符合JSON语法的对象
                console.log(object.note.from) //得到余咖咖
             }else if(request.status >= 400){
                console.log('说明请求失败') 
            }
        }
    }
    request.send()
})

解释：

当点击按钮的时候发送请求，请求过程从2开始
初始化new XMLHttpRequest()
配置request的请求方式和路径
获取readyState的值，并判断是否完成
判断状态码是否是请求成功
把返回的JSON语法的字符串转化成JS对应的值

JSON是一门语言，可在该网站学习：JSON官网

后端代码如下：

else if(path === '/xxx'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/xml;charset=utf-8')
 //response.setHeader('Access-Control-Allow-Origin', '请求方地址')
    response.write(`
    {
      "note":{
        "to": "xxx",
        "from": "余咖咖",
        "heading": "很高兴认识你",
        "content": "hi"
      }
    }
    `)
    response.end()

三、什么是同源策略？

同源策略要求 协议+端口+域名 一模一样才允许发 AJAX 请求。举例：

http://xxx.com 可以向 http://www.xxx.com 发 AJAX 请求吗 no
http://xxx.com:80 可以向 http://xxx.com:81 发 AJAX 请求吗 no

为什么要有同源策略？

如果没有同源策略，就可以直接用POST、GET等向其他网站发送请求得到响应。任何一个网站都可以读取你的余额，直接进行支付转账，获取你写的私密信息，那么在互联网上就没有隐私安全了。

所以对浏览器要保证：

只有 协议+端口+域名 一模一样才允许发 AJAX 请求。

四、突破同源策略===跨域

假如A网站用ajax想给B网站发送请求并得到响应，那怎么办？即不同的域名要互相访问（请求方frank，访问响应方jack）。

用 CORS，全称是"跨域资源共享”（Cross-origin resource sharing）。它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

Jack在服务器加上这一段话：

response.setHeader('Access-Control-Allow-Origin', 'frank的地址')

告诉服务器，frank是我朋友，不用阻止了。

那CORS与JSONP的区别在哪？

CORS与JSONP的使用目的相同，但是比JSONP更强大。

JSONP只支持GET请求，CORS支持所有类型的HTTP请求。JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

五、一个问题

请用原生JS手写一个AJAX

let request = new XMLHttpRequest()
    request.open('get', '/xxx') 
    request.onreadystatechange = ()=>{
        if(request.readyState===4){ 
            if(request.status >= 200 && request.status < 300){ 
                console.log('说明请求成功了') 
                let string = request.responseText    
                let object = window.JSON.parse(string)  
             }  }else if(request.status >= 400){
                console.log('说明请求失败') 
            }
        }
    }
    request.send()

over~