ajax

原生AJAX

AJAX 使用 XMLHttpRequest 对象进行请求发送和响应,局部刷新页面的技术。
流程如下:

  1. 生成 XMLHttpRequest 对象:  let request = new XMLHttpRequest()
  2. 配置 XMLHttpRequest 对象:  request.open('method','path')
  3. 发送请求:  request.send()
  4. 监听 XMLHttpRequest 对象:  request.onreadystatchange()

  • 客户端:JS 发起请求
  • 服务端: JS 响应请求

发送请求的要素:

  1.  请求行(请求方法、请求路径、协议) request.open('method','/path')
  2.  请求头 request.setHeader('header','value')
  3.  请求体(请求数据) request.send('date')

响应请求的要素:

  1.  状态行(协议版本、响应码、响应文本) request.status request.statusText
  2.  响应头 request.getResponseHeader() request.getAllResponseHeaders()
  3.  响应正文(返回的数据) request.responseText

封装AJAX

let request = new XMLHttpRequest()
request.open('get','/path') 
request.send()
request.onreadystatechange = function(){
    if(request.readyState === 4){  // 请求响应完毕
        if(request.status >= 200 && request.status < 300){ // 请求响应成功
            console.log('请求成功')
            console.log('请求获取的响应数据是:' + resquest.responseText)
            console.log(typeof resquest.responseText)     // string
            let string = resquest.responseText
            let object = window.JSON.parse(string)  // 将符合JSON语法的字符串转换成js对应的值
            console.log(typeof object)         // "object" 
        } else if(quest.status >= 400){
            console.log('请求失败。')
        }
    }
}

 

posted @ 2020-07-17 16:08  CatherLee  阅读(158)  评论(0编辑  收藏  举报