AJAX基础知识

在AJAX出现前，网页发送请求的有哪些呢？

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

有没有什么其它的方法？

• get、post、put、delete 请求都行
• 想以什么形式展现就以什么形式展现

IE5率先在JavaScript中引入ActiveX对象（API），使得JavaScript能够直接发起HTTP请求。随后Mozilla、Safari、Opera也跟进了，取名XMLHttpRequest，并被归入W3C规范当中。

AJAX：异步的JavaScript和XML。

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

如何使用XMLHttpRequest？

myButton.addEventListener('click', (e)=>{
  let request = new XMLHttpRequest()
  request.open('get', '/xxx') // 配置request
  request.send()
  request.onreadystatechange = ()=>{
    if(request.readyState === 4){
      console.log('请求响应都完毕了')
      console.log(request.status)
      if(request.status >= 200 && request.status < 300){
        console.log('说明请求成功')
        console.log(typeof request.responseText)
        console.log(request.responseText)
        let string = request.responseText
        // 把符合 JSON 语法的字符串转换成 JS 对应的值
        let object = window.JSON.parse(string) 
        // JSON.parse 是浏览器提供的
        console.log(typeof object)
        console.log(object)
      } else if(request.status >= 400){
        console.log('说明请求失败') 
      }
    }
  }
})
复制代码

后端代码：

if(path==='/xxx'){
  response.statusCode = 200
  response.setHeader('Content-Type', 'text/json;charset=utf-8')
  response.setHeader('Access-Control-Allow-Origin', 'http://lvbin.com:8001')
  response.write(`
    {
      "note":{
        "to": "future",
        "from": "now",
        "heading": "greet",
        "content": "Hello World"
      }
    }
 `)
  response.end()
复制代码

同源策略（Cross-Origin Resource Sharing）

• 只有 协议+端口+域名 如出一辙才容许发 AJAX 请求

例如如下的都是不能够的

• baidu.com 能够向 www.baidu.com 发 AJAX 请求吗 no
• baidu.com:80 能够向 baidu.com:81 发 AJAX 请求吗 no

那为何form能够跨域请求呢？由于提交到另外一个域名以后，原页面的脚步没法获取新页面中的内容，浏览器认为这是安全的。

而AJAX是能够读取响应的内容，所以浏览器不能容许你这么作。其实请求已经发送出去了，只是拿不到响应的内容。总结来讲就是这个策略的本质是，一个域名的JS，在未经容许的状况下，不得读取另外一个域名的内容，但浏览器不会阻止向另外一个域名发送请求。

CORS跨域 假设http://lvbin.com:8001须要访问http://lvbin.com:8002，而且获取内容。那么只须要在http://lvbin.com:8002后端添加下面一行代码：

response.setHeader('Access-Control-Allow-Origin', 'http://lvbin.com:8001')
复制代码