ajax的get,post请求和解决回调地狱的方法封装_ajax post 回调

ajax创建

内置对象 请求对象 在请求的过程中 监听请求状态 请求成功后从而获得响应 响应里面在读取到数据

get请求

1请求携带内容会在地址栏显示

2.浏览器默认的请求方式

3.携带参数以?参数&参数&…

		//创建一个请求对象
        let xhr = new XMLHttpRequest()
        //设置请求地址
        xhr.open('get',"https://jsonplaceholder.typicode.com/todos")
        //发送请求
        xhr.send()
        //监听请求状态
        xhr.onreadystatechange = function(){
            //请求完成后,读取响应的数据
            //判断是否成功了
            //状态码    1 表示已经成功还需要继续操作  2 已经完成   3 重定向页面   4 客户端错误(404,找不到)  5服务器错误
            //readyState值  0未初始化   1 启动  2 接受请求未响应  3 部分完成    4 完成
            if(xhr.readyState == 4 && /^20\d$/.test(xhr.status)){
                console.log(xhr.responseText);//获取响应的内容
                // response 响应主体    responseType 响应数据类型
            }
        }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

post请求

1封装到请求体中

2.如果想使用post请求必须指定请求方式为post

3.post请求对应的安全性和携带的内容比get强

4.post请求效率低于get请求(表单提交使用post)

//1.创建请求对象
let xhr = createXhr()
//2.set请求方式以及地址
xhr.open('POST','http://useker.cn/login')
//6.设置请求头 key value 俩个都是string类型
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); //模拟
表单提交
//3.发送请求 send里面 没有? 也是用&拼接
xhr.send('uname=1&upwd=2') //他里面的内容会放在请求体中
//4.监听
xhr.onreadystatechange = function(){
if(xhr.readyState == 4 && /^20\d$/.test(xhr.status)){
//5.接收响应
console.log(xhr.responseText);
}
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

XMLHttpRequest（有兼容问题）

封装方法

//兼容各大浏览器
function createXhr(){
if(window.XMLHttpRequest){
return new XMLHttpRequest()
}
return new ActiveXObject("Microsoft.XMLHTTP");//兼容ie6
}

1
2
3
4
5
6
7
8

封装ajax

抽取共同的内容作为公共代码块(不同的内容做参数)

封装ajax的不同点

请求方式 请求地址 回调函数 参数不一样 是否异步 参数类型不一样

ajax({
method: 请求方式
url: 请求地址
aync: 是否异步 ture 默认为以异步
data: 请求参数
dataType: 响应的参数类型 object 默认要做json.parse操作
callback: 回调
})

1
2
3
4
5
6
7
8
9

ajax封装

为了解决回调地狱的问题,es6增加了一个promise对象

//兼容各大浏览器
function createXhr(){
    if(window.XMLHttpRequest){
        return new XMLHttpRequest()
    }
    return new ActiveXObject("Microsoft.XMLHTTP");//兼容ie6
}
function ajax(options){//options是一个对象
    //先准备默认的对象 存储默认
    let defaultObj = {
        method:'GET', //默认为get请求
        url:'', //必填
        aync: true, //默认为异步请求
        data: '',
        dataType: 'json' //默认响应数据类型为json 默认需要JSON.parse
    }
    //url地址没有传递或者传递是空值 直接出去
    if(!options.url || options.url==''){
        throw new Error('url地址必须不为空') //抛出一个错误
    }
    //取出传递options里面的数据 给到defaultObj
    for(let key in options){
        defaultObj[key] = options[key] //将对应的key进行赋值
    }
    //后面使用的就是defaultObj
    //判断method是否是get或者post 其他形式报错 全部大写
    if(defaultObj.method.toUpperCase() != "GET" && defaultObj.method.toUpperCase() != "POST"){
        throw new Error('请求方式错误') //抛出一个错误
    }
    //判断aync是否为boolean类型
    if(!typeof defaultObj.aync == "Boolean"){
        throw new Error('aync必须是boolean类型') //抛出一个错误
    }
    //对于data的类型做一个判断 如果是string类型直接拼接 如果是对象类型 需要转为对应的string
    if(defaultObj.data.toString() == "[object Object]"){ //如果你是string类型调用toString方法会直接返回对应内容
        let dataStr = ""
        for(let key in defaultObj.data){
            dataStr+=key+'='+defaultObj.data[key]+"&"
        }
        //截图到最后一个&符号（把最后一个字符剔除）
        dataStr = dataStr.slice(0,-1)
        defaultObj.data = dataStr
    }
    //如果你是get请求 那么对应的请求数据和请求地址应该拼接
    if(defaultObj.method.toUpperCase() == "GET"){
        defaultObj.url+="?"+defaultObj.data
    }
    //创建一个请求对象
    let xhr = createXhr()
    //open请求地址
    xhr.open(defaultObj.method.toUpperCase(),defaultObj.url)
    //send发送请求
    if(defaultObj.method.toUpperCase() == "POST"){
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
        xhr.send(defaultObj.data)
    }else{
        xhr.send()
    }
    //监听请求
    return new Promise((success,error)=>{
        xhr.onreadystatechange = function(){
         //接收响应
        if(xhr.readyState == 4 && /^20\d$/.test(xhr.status)){
                let res 
                if(defaultObj.dataType == "json"){
                    res = JSON.parse(xhr.responseText)//转换为json对象     
                }else{
                    res = xhr.responseText
                }
                success(res)
        }
         //服务器的响应 状态码
         if(!/^20\d$/.test(xhr.status)){
            error(xhr.status)
        }
    }
       
    })
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79

回调地狱

无限的在回调函数里面进行回调函数的调用

代码可维护性低,代码可阅读性低,执行效率低

为了解决回调地狱的问题,es6增加了一个promise对象

将异步的代码块变为同步代码块

成功resolve(解决) 失败reject(拒绝)

    <!-- 引用外部js-->
	<script src="./Ajax.js"></script> 
    <script>
        //无限的在回调函数里面进行回调函数的调用
        //代码可维护性低,代码可阅读性低,执行效率低

        //为了解决回调地狱的问题,es6增加了一个promise对象
        //将异步的代码块变为同步代码块
        //成功resolve(解决)  失败reject(拒绝)
        let promise = new Promise((resolve,reject)=>{
            ajax({
                url:'https://jsonplaceholder.typicode.com/todos/1',
                callback:function(res){
                    console.log(res);
                    resolve(res)//传递给对应的.then的参数
                }
            })
        })
        promise.then((res)=>{   //这个res参数值就是调用上面的resolve传过来的
            console.log(res);
        })
        promise.catch((error)=>{//reject里面传过来的
            console.log(error);
        })
    </script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25