AJAX入门

1.历史上发送请求的方式

用form发请求会刷新页面或新开页面
用a发get请求会刷新页面或新开页面
用img发请求，但只能以图片的形式展示
用link发请求，只能以css、favicon形式展示
用script发请求，只能以脚本的形式运行
以上都除了form都只能发get请求

现在需要一个能发所有请求（GET,POST,PUT,DELETE）并且想以什么形式展现就以什么形式展示的方法。

---

2.微软的重大突破

IE 5 率先在 JS 中引入 ActiveX 对象（API），使得 JS 可以直接发起 HTTP 请求。
随后 Mozilla、 Safari、 Opera 也跟进了，取名 XMLHttpRequest，并被纳入 W3C 规范

---

3.AJAX

Jesse James Garrett 讲如下技术取名叫做 AJAX：异步的 JavaScript 和 XML
A：async；J：JavaScript；A：and；X：XML

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

let request = new XMLHttpRequest()
    request.onreadystatechange = () =>{   //尽量放在最上面，这样就不会错过任何变化，
       if(request.readyState === 4){      //如果放在request.send()之后，这时候readyState已经从0变为1，就只能捕获到2，3，4。
           if(request.status >= 200 && request.status <= 300){
               console.log('请求成功')
           }else if(request.status >= 400){
               console.log('请求失败')
           }
       }
    }
    request.open('GET', '/xxx')  //初始化请求
    request.send()  //发送请求

readyState：请求的五种状态

• 0 未打开 open()方法还未被调用
• 1 未发送 send()方法还未被调用
• 2 已经获取响应头 send()方法已经被调用，响应头和响应状态已经返回
• 3 正在下载响应体 响应体下载中；responseText中已经获取了部分数据
• 4 请求完成 整个请求过程完成

---

4.JSON

JSON —— 一门新语言，抄袭了JavaScript。不是编程语言，是数据语言。
JSON与JavaScript的区别：

• JSON没有抄袭 function、undefined和变量
• JSON的字符串首尾必须是双引号 " "

JS	vs	JSON
undefined		无
null		null
['a', 'b']		["a", "b"]
function fn(){}		无
{name: 'zink'}		{"name": "zink"}
'zink'		"zink"
var a = {};a.self = a		没有变量，搞不定
__proto__		没有原型链

后台永远只返回字符串
后端代码：

response.write(`{             //返回符合JSON语法的字符串
      "note":{
        "to": "jack",
        "from": "zink",
        "heading": "打招呼",
        "content": "hi"
      }
    }`)

JS代码：

let request = new XMLHttpRequest()
    request.onreadystatechange = () =>{
       if(request.readyState === 4){
           console.log('请求响应都完毕了')
           if(request.status >= 200 && request.status <= 300){
               console.log('请求成功')
               console.log(request.responseText)
               let string = request.responseText
               // 把符合 JSON 语法的字符串
               // 转换成 JS 对应的值
               let object = window.JSON.parse(string)    //JSON.parse()浏览器提供
               console.log(object)
               console.log(object.note)
               console.log(object.note.to)
           }else if(request.status >= 400){
               console.log('请求失败')
           }
       }
    }
    request.open('GET', '/xxx')  //初始化请求
    request.send()  //发送请求

---

5.同源策略：

• 只有协议+端口+域名 一模一样才允许发AJAX请求，使用其他的方式可以发送跨域请求。

1. http://baidu.com 可以向 https://www.baidu.com 发送AJAX请求吗？ NO
2. http://baidu.com:80 可以向 http://baidu.com:81 发送AJAX请求吗？ NO

为什么使用同源策略？
拿form来说，原页面用form提交到另一个域名后，原页面的脚本已经无法获取新页面中的内容，浏览器认为这是安全的。
而AJAX是可以读取响应的内容的，因此浏览器不允许这样做。在开发者工具下面我们可以发现，当我们使用AJAX请求另一个网页时，AJAX请求已经发送了，只是拿不到响应而已。
所以浏览器这个策略的本质是：一个域名的JS，在未经允许的情况下，不能读取另一个域名的内容，但你可以向另一个域名发送请求。

CROSS 会告诉浏览器，我们是一家的，可以访问。
后端代码：

//加入响应头
 response.setHeader('Access-Control-Allow-Origin', 'http://zink.com:8001')    //允许http://zink.com:8001向我发起请求
 response.setHeader('Access-Control-Allow-Origin', '*')    //允许所有域名向我发起请求

---

面试题：请使用原生JS来发送AJAX请求。

let request = new XMLHttpRequest()    
    request.open('GET', '/xxx')  //初始化请求
    request.send()  //发送请求
    request.onreadystatechange = () =>{
           if(request.readyState === 4){       
               if(request.status >= 200 && request.status <= 300){               
                   let string = request.responseText             
                   let object = window.JSON.parse(string)    //JSON.parse()浏览器提供          
               }
           }
     }