AJAX的理解&请求

1. ajax介绍

    1) 概念: 异步的JavaScript和xml
    2) 作用: (无刷新技术) 在不更新网页的前提下,对网页内容进行局部更新
    3) 缺点: 搜索引擎不支持

    4) 原理: 

        传统方式: 

                          发请求                 请求数据                返回数据                      组装网页
            浏览器 ======> 服务器 ========>数据库 ========> 服务器 =========> 浏览器

        
        ajax方式:
                          请求交给             发请求                   请求数据                  返回数据
            浏览器 ========> ajax =======> 服务器 ========> 数据库 =========> 服务器

  响应json                组装局部内容                                                                       

 =========> ajax ============> 浏览器

2. get请求 4步

 

 1.创建ajax对象
    const ajax = new XMLHttpRequest();

  2.配置请求
    ajax.open('get', 'url?参数=值&参数=值')

  3.监听
    ajax.addEventListener('readystatechange', function (){

      //ajax请求状态 和 http响应状态码
      if(ajax.readyState === 4 && ajax.status === 200){

          JSON.parse( ajax.responseText )
      }

    })

  4.发送
    ajax.send()

3. post请求 5步

 

1.创建ajax对象
    const ajax = new XMLHttpRequest();

  2.配置请求
    ajax.open('get', 'url')

  3.设置请求头
    //ajax.setRequestHeader( 'Content-Type', 'application/x-www-form-urlencoded' )
    ajax.setRequestHeader( 'Content-Type', 'application/json' )

  4.监听
    ajax.addEventListener('readystatechange', function (){

      //ajax请求状态 和 http响应状态码
      if(ajax.readyState === 4 && ajax.status === 200){

          JSON.parse( ajax.responseText )
      }

    })

  5.发送
    //ajax.send(参数=值&参数=值)
    ajax.send(JSON.stringify( {} ))

4. ajax请求状态  - 面试题

  0: 请求未初始化 
  1: 服务器连接已建立 
  2: 请求已接收 
  3: 请求处理中 === 开始接收数据(接收部分数据)
  4: 请求已完成，且响应已就绪 === 数据已经响应完成, 可以接收所有数据 

5. http响应状态码  - 面试题

  1xx 消息
  2xx 成功
  3xx 重定向
  4xx 请求错误
  5xx 服务器错误

  200 : 请求成功

  301 : 永久重定向
  302 : 临时重定向
  304 : 缓存

  400 : 请求参数错误
  401 : 未授权
  403 : 服务器拒绝请求
  404 : 找不到请求资源
  405 : 请求方法服务器不支持

  500 : 服务器错误

-------------------------------------------------------------------------