前端Ajax入门

Posted 2021-09-01 LLLLLII-iii

前端ajax入门：

导语：本人是一学了三年前端的菜鸟，今天复习ajax，感觉知识又还给老师了，翻阅ppt和笔记，小总结了一下，应该学前端的都会有ajax困惑吧，今天自己复习，顺便小分享一下，如有错误，请各路大佬帮忙指出！

名词解释：

AJAX即“Asynchronous javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。

作用：与后台服务器交互，进行数据传输，实现页面的局部刷新

应用：

   五部曲：

1. 实例化一个xhr对象

var xhr = new XMLHttpRequest();

2. 设置请求行

xhr.open(method,url);

3. 设置请求头

xhr.setRequestHeader(key,val)

4. 设置请求体，当请求方式为get的时候，data不需要设置；当请求方式为post的时候，data需要设置

xhr.send([data])

5. 获取响应内容

xhr.onreadystatechange = function(){

    //就绪状态当为4的时候表示响应成功回来了

    if(this.readystate === 4){

    //后台响应状态

          if(this.status === 200){

        // 获取响应信息

        this.response

          }

     }

}

  传参：

   get

      参数格式：查询字符串（表单数据）application/x-www-form-urlencoded

      传参位置：拼接到url地址后面，用 ? 来拼接

   post

      参数格式：查询字符串（表单数据）、json数据 application/json

      传参位置：send(data) 参数放在http请求报文的请求体

   如何修改当前请求的参数格式

      1.请求头

        xhr.setRequestHeader('Conte-Type','application/json')

      2.将参数转码（和Conytene-Type保持一致)

        将对象转成查询字符串

          qs.stringify(data)

        对象 -> json字符串

         JSON.stringify(data)

       json字符串 -> 对象

         JSON.parse(data)

   认证：

     xhr.setRequestHeader('Authorization',token)

以上内容来自本人ppt及本人课堂内容