认识和使用AJAX（一）

1、能实现请求的标签

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

上述各种请求例子或多或少有着各种限制，有没有一种限定模式可以，让我们能自己发起各种请求模式，如get、post、put、delete 请求都行，想怎样展示都行。出于这种背景，AJAX就此诞生了。

2、什么是AJAX

使用以下三个技术点取名叫做 AJAX：异步的 JavaScript 和 XML
1、使用 XMLHttpRequest 发请求
2、服务器返回 XML 格式的字符串（后期用json代替这里XML）
3、JS 解析 XML，并更新局部页面（后期用json代替这里XML）

（1）XMLHttpRequest对象方法和属性

open()：建立到服务器的新请求。
send()：向服务器发送请求。
abort()：退出当前请求。
readyState：提供当前HTML的就绪状态。
responseText：服务器返回的请求响应文本。

XMLHttpRequest.open()该方法有五个参数：
request-type：发送请求的类型可以是get、post、put、delete都行
url：要连接的URL地址。
asynch：使用异步连接则为true，否则为false。该参数是可选的，默认为true。
username：如果需要身份验证，则可以在此指定用户名。该可选参数没有默认值。
password：如果需要身份验证，则可以在此指定口令。该可选参数没有默认值。

XMLHttpRequest.readyState()五种就绪状态：
0：请求还没有发出（在调用open()之前）。
1：请求已经建立但还没有发出（调用send()之前）。
2：请求已经发出正在处理之中（指的是响应得到内容头部）。
3：请求已经处理，响应中通常有部分数据可用，但是服务器还没有完成响应。
4：响应已完成，可以访问服务器响应并使用它。

注意：我们只有在就绪状态为4时数据才可以安全使用。

3、请使用原生JS发送AJAX请求

前端页面：

myButton.addEventListener('click', (e)=>{
  let request = new XMLHttpRequest()  //获取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)
        console.log('object.note')
        console.log(object.note)

      }else if(request.status >= 400){
        console.log('说明请求失败') 
      }

    }
  }
})

let request = new XMLHttpRequest()获取XMLHttpRequest对象。
XMLHttpRequest.onreadystatechange会在 XMLHttpRequest.readyState属性发生改变时触发被调用。
let object = window.JSON.parse(string)把符合 JSON 语法的字符串转换成 JS 对应的值

后端代码：

  }else if(path==='/xxx'){
    response.statusCode = 200
    response.setHeader('Content-Type', 'text/json;charset=utf-8')
    response.write(`
    {
      "note":{
        "to": "小谷",
        "from": "方方",
        "heading": "打招呼",
        "content": "hi"
      }
    }
    `)
    response.end()

上传到github的完整代码

（2）JSON是一种新的语言

我们知道JSON是一种新的语言与JS是不同的，但是JSOP很多都是抄袭JS的，两者很多相似地方。
JSOP详细学习原文地址

我们简单对比一下JS 和JSOP各种基本类型

444.png

4、AJAX ：同源策略与CORS跨域

（1）、同源策略

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

1. http://baidu.com 可以向 http://www.baidu.com 发 AJAX 请求吗 答案No
2. http://baidu.com:80 可以向 http://baidu.com:81 发 AJAX 请求吗 答案No

同源策略好处是你可以发起请求，但是浏览器不给你响应，这样我们网站就变得安全，不然别人就能随便仿冒或者查收我们网站隐私。

（2）CORS 跨域（Cross-Origin Resource Sharing）

两个不同域名要进行访问，在AJAX中要怎么办才行。只要在后端使用CORS 就可以告诉浏览器，我俩一家的，别阻止他访问。命令行如下：
response.setHeader('Access-Control-Allow-Origin', 'URL')

上述前端页面代码路径：

request.open('get','/xxx')

修改为下面：

request.open('get','http://jack.com:8002/xxx')

后端代码新增一句：

response.setHeader('Access-Control-Allow-Origin', 'http://fei.com:8001')

上传到github的完整代码