开发者学堂课程【Ajax 前端开发入门与实战：初步封装】学习笔记，与课程紧密联系，让用户快速学习知识。
课程地址：https://developer.aliyun.com/learning/course/595/detail/8533
初步封装
目录：
一、封装 Ajax
二、创建新文件
三、封装 Ajax 代码写法
一、封装 Ajax
到目前为止，已经用 Ajax 做了许多的案例，比如在 01_ajaxdeme 中有个注册界面，在注册界面当中要做用户名唯一性的检查、邮箱唯一性的检查、手机号唯一性的检查。
而每一次唯一性的检查都要访问服务器的数据，在访问服务器数据中，要做4个 Ajax 的四个步骤。每当需要获取数据的啥时候，都要写1234四个步骤，略显麻烦。
接下来需要将 Ajax 的几个步骤进行封装，封装到一个方法中。
对于封装方法，我们主要考虑几个方面：
1.第一方面考虑哪些东西是变的。
2. 第二方面考虑哪些东西是不变的。
3. 第三个在封装方法的内部以及与调用者之间是如何沟通的又是如何将结果通知调用者。
4. 实现相关功能后，考虑这个方法怎么样才能让比尔调用起来更加方便一些。
就主要从这四个步骤把 Ajax 的功能把它封装到一个方法当中。所以在这个地方把01_ajaxdeme 复制一份来完成这一部分的功能。
二、创建新文件
在01_ajaxdeme 上一级文件夹中创建新文件夹命名为 03_ajaxfunction，并把01_ajaxdeme 的文件内容复制到 03_ajaxfunction 中，把 Ajax 封装但这个方法当中。
打开 03_ajaxfunction 文件夹删除 .html 的一些无关文件。
随后把 register.html 文件，重新赋一个名称，名为register01.html 。01 之后会有02、03，后面逐步细化。
打开 03_ajaxfunction，然后对 01_ajaxdeme中的 Ajax 的四个步骤进行封装。
三、封装 Ajax 代码写法
封装代码写法如下：
//uname=zhangsan&age=18
function myAjax(type,url,params,dataType,callback){
//由 type 决定请求类型，也就是由调用者决定
//1 2 3 4
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
} else {
xhr = new ActiveXo]0bject(‘’Microsofet.XMLHTTP’’);
}
if(type == ‘’get’’){
url += ’’?’’ + params;
}
xhr.open(type,url,true);
if(type == ‘’get’’){
xhr.send(null);
} else if(type == ‘’post’’){
xhr.setRequesHeader(‘’Content-Type’’,’’application/x-www-form-urlencoded’’);
xhr.send(params);
}
xhr.onreadystatechange = function(){
if(xhr.readySate == 4){
if(xhr.satus == 200){
var result = null;
if(dataType == ‘’json’’){
result = xhr.responseText;
result = JSON.parse(result);
} else if(dataaType == ‘’xml’’){
result = xhr.responseXML；
} else {
result = xhr.responseText；
}
callback(result);
//
xhr.responseText;
xhr.responseXML;
//
}
}
};
//封装是为了让代码只写一份，那么在封装方法是要考虑到方方面面的一些情况
//
}
代码编写完成进行测试，测试方法是否正常，调试细节进行修改。
