【学习打卡】第11天 前端工程师2022版 Ajax第二讲

课程名称：前端工程师2022版

课程章节： 封装Ajax

主讲老师：alex

课程内容：

今天学习的内容包括：

ajax提交表单，封装Ajax

课程收获：

1.AJAX提交表单，FormData

//使用AJAX提交表单，FormData
<form action="https://www.imooc.com/api/http/search/suggest?words=js" method="post" enctype="multipart/form-data" id="loginfrm">
    用户名：<input type="text" name="username" id="username" placeholder="用户名"><br>
    密  码：<input type="password" name="pwd" id="pwd" placeholder="密码"><br>
    <input type="submit" id="submit" value="登录">
</form>

<script>
const loginfrm=document.getElementById('loginfrm');
const submit=document.getElementById('submit');
const url="https://www.imooc.com/api/http/search/suggest?words=js";
submit.addEventListener('click',(e)=>{
    e.preventDefault();//阻止表单自动提交
    const xhr=new XMLHttpRequest();
   //组装数据
   //const data=`username=${loginfrm.username.value}&pwd=${loginfrm.pwd.value}`;
    const data=new FormData(loginfrm);//打包表单数据，Content-Type:multipart/form-data;
    data.append('age','18');//添加数据
    data.append('sex','female');
    xhr.open('POST',url,true);
    xhr.send(data);
},false)
</script>

封装Ajax

2.封装Ajax

① 构造一个类

将url作用域绑定在this上，这样类的其他方法也可以用在url上，否则url只能在constructor局部使用

class Ajax{
    constructor(url,options){
        this.url=url;
        this.options=Object.assign({},
       DEFAULTS,options );  //DEFAULTS为默认参数，options为用户传进来的参数
    }
}
export default Ajax;

②利用模块化，将默认参数编辑在另一个js文件中

class形式的ajax，在使用的时候，需要new xxx( )。new的时候，就会执行

constructor中代码：

从constructor开始，逐步执行其他代码。比如constructor中调用了this.init方法，那么就会对应执行init方法中的内容：

即init方法中，实现了一个基本的ajax操作。而ajax每一步的具体实现，比如监听xhr对象的事件，则是写在了具体的方法中：