Ajax的方法详解

持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第8天，点击查看活动详情

• XMLHTTPRequest类型对象
  • Ajax API中核心提供的是一个XMLHTTPRequest类型，所有的Ajax操作都需要使用到这个类型：var xhr = new XMLHttpRequest()
  • IE6兼容：xhr = new ActiveXObject("Microsoft.XMLHTTP")
• open（）方法开启请求
  • 本质上XMLHTTPRequest就是JavaScript在web平台中发送HTTP请求的手段，所以我们发送出去的请求仍然是HTTP请求，同样符合HTTP约定的格式
  • 语法：xhr.open(method, url)
  • method：要使用的HTTP方法，比如GET（获取数据）、POST（提交数据）、PUT（更改数据）、DELETE（删除数据）等
  • url：要向其发送请求的URL地址，字符串格式
• send（）方法发送请求
  • 用于发送HTTP请求
  • 语法：xhr.send(body)
  • body：在XHR请求中要发送的数据体，根据请求头中的类型进行传参（setRequestHeader()）
  • 如果是GET方法，无需设置数据体，可以传null或者不传参。因为可以直接在链接后面传参，即?id=1的意思是查询id为1的数据；POST方法一定要设置setRequestHeader()方法
• setRequestHeader()方法设置请求头（设置在send之前，open之后）
  • 此方法必须在open（）方法和send（）之间调用
  • 语法：xhr.setRequestHeader(header, value)
  • header：一般设置“Content-Type”，传输数据类型，即服务器需要我们传送的数据类型
  • value：具体的数据类型，常用“application/x-www-form-urlencoded”和“application/json”
• 指定回调函数readyState
  • readyState属性返回一个XMLHTTPRequest代理当前所处的状态，由于readystatechange事件是在xhr对象状态变化时触发（不单是在得到响应时），也就意味着这个事件会被处罚多次，所以我们有必要了解每一个状态值代表的含义
• 一般都是在readyState值为4时，执行响应的后续逻辑
• 补充
  • 同步和异步
    • 显示场景理解
      • 同步：一个人在同一时刻只能做一个事情，在执行一些耗时的操作（不需要看管）不去做别的事，只是等待
      • 异步：在执行一些耗时的操作（不需要看管）去做别的事，而不是等待