Ajax设置请求和接收响应、自己封装简易jQuery.Ajax、回调函数

Harpsichord1207 发布于2019-08-23 10:42 / 1340人阅读

摘要：设置请求和接收响应自己封装简易这篇文章是承接前几篇博客的是前几篇继续学习包括学习与理解和简化版自己实现等这篇文章只算是我的个人学习笔记内容没有精心排版一些错误请见谅所有代码都在这里从历史可以看到所有代码摆阔一个简易的服务器所有代码在历史里

Ajax设置请求和接收响应、自己封装简易jQuery.Ajax

这篇文章是承接前几篇博客的,是前几篇继续学习
包括Ajax学习与理解和简化版自己实现jQuery等
这篇文章只算是我的个人学习笔记,内容没有精心排版,一些错误请见谅.

所有代码都在这里,从历史commit可以看到所有代码,摆阔一个简易的node.js服务器
所有代码在历史commit里(AjaxStudy---github)

1JS设置任意请求

一个http请求分为四个部分
请求行,请求头,回车,请求体

设置请求的四个部分(第三部分为回车):

第一部分 request.open("get", "/xxx")

第二部分 request.setRequestHeader("content-type","x-www-form-urlencoded")

第四部分 request.send("a=1&b=2")

request.setRequestHeader()方法需要注意的是此方法必须在 open() 方法和 send() 之间调用。
XMLHttpRequest.setRequestHeader()

另外需要注意的是,如果设置西请求方法为get 并且设置了请求体(第四部分),在谷歌浏览器中看不到请求体,不报错但是不显示
示例代码:

myButton.addEventListener("click",(e)=>{
    let request = new XMLHttpRequest();
    request.open("POST","/xxx")//配置request
    //设置第二部分
    request.setRequestHeader("mataotao","123123xxx")
    request.setRequestHeader("content-type","x-www-form-urlencoded")
    request.send("a=1&b=2");//发送请求

    request.onreadystatechange = ()=>{
        if(request.readyState ===4){
            console.log("请求和响应都完毕了");
            if ( request.status>=200&&request.status<=400){
                console.log("说明请求成功");
                let string = request.responseText;
                //把符合json语法的字符串转化为js对应的值
                let object2 = window.JSON.parse(string);
                console.log(object2)
            }else if(request.status>=400){
                console.log("响应失败");
            }
        } 
    }
})

查看请求

2JS获取任意响应

响应的四个部分

获取四个部分的响应

第一部分 request.status / request.statusText

第二部分 request.getResponseHeader() / request.getAllResponseHeaders()

第四部分 request.responseText

myButton.addEventListener("click",(e)=>{
    let request = new XMLHttpRequest();
    request.open("POST","/xxx")//配置request
    //设置第二部分
    request.setRequestHeader("mataotao","123123xxx")
    request.setRequestHeader("content-type","x-www-form-urlencoded")
    request.send("a=1&b=2");//发送请求

    request.onreadystatechange = ()=>{
        if(request.readyState ===4){
            console.log("请求和响应都完毕了");
            if ( request.status>=200&&request.status<=400){
                console.log("说明请求成功");

                //*核心代码 */
                //第一部分:
                console.log("获取响应第一部分:")
                console.log(request.status)//200
                console.log(request.statusText)//ok

                //第二部分:
                console.log("获取响应第二部分:")
                console.log(request.getResponseHeader("Content-Type"))
                console.log(request.getAllResponseHeaders())

                //第四部分:
                console.log("获取响应第四部分:")
                console.log(request.responseText)
                 //*核心代码 */


                let string = request.responseText;
                //把符合json语法的字符串转化为js对应的值
                let object2 = window.JSON.parse(string);
                // console.log(object2)

            }else if(request.status>=400){
                console.log("响应失败");
            }
        } 
    }
})

3 客户端/服务器模型

客户端使用js设置请求的四个部分,
服务器用nodejs也可以设置响应的四个部分

为什么要三次握手?

三次握手:
A:我能连你了吗?
B: 可以连我,你连吧
A:那我连你了
开始发送数据

原因:因为要保证A/B 都可以收发信息 ,数据才能在AB之间传输

1.
A:我能连你了吗?
B: 可以
说明A可以发信息,B可以接受信息

2.
B: 可以连我,你连吧
A:那我连你了
说明B可以发送信息,A可以接受信息

3 自己封装jQuery.Ajax(简单原理)

所有代码在历史commit里(AjaxStudy---github)

3.1 方法一

window.jQuery = ()=>{//假装有一个简易的jQuery,具体封装
    let object1 = {};
    boject1.addClass = function(){};
    boject1.show = function(){};
    return object1;
}

window.jQuery.ajax = (method,path,body,successFn,failFn)=>{
    let request = new XMLHttpRequest();
    request.open(method,path)
    request.send(body);
    request.onreadystatechange = ()=>{
        if(request.readyState ===4){
            if ( request.status>=200&&request.status<=400){
                successFn.call(undefined,request.responseText)//执行成功函数
            }else if(request.status>=400){
                failFn.call(undefined,request)//执行失败函数
            }
        }
    }
}

window.$ = window.jQuery;
myButton.addEventListener("click",(e)=>{
    //使用ajax
    $.ajax("post",
           "/xxx",
           "username=mtt&password=1",
           function(result){
                console.log("成功了,返回的响应体为:")
                console.log(result);//打印request.responseText
           },
           function(result){
                console.log(result);
                console.log(result.status);//打印失败的状态码
                console.log(result.responseText);//打印失败时返回的响应体
                
           }
)
})

结果:
成功时:

失败时:(假如请求一个不存在的路径,响应状态码是404,但是也有响应体responseText)

例如,访问一个不存在的路径/frank:

myButton.addEventListener("click",(e)=>{
    //使用ajax
    $.ajax("post",
           "/frank",
           "username=mtt&password=1",
           function(result){
                console.log("成功了,返回的响应体为:")
                console.log(result);//打印request.responseText
           },
           function(result){
                console.log(result);
                console.log(result.status);//打印失败的状态码
                console.log(result.responseText);//打印失败时返回的响应体
                
           }
)
})

返回状态码404,而且有设置的返回体

因为我的服务器端的代码为:

else {
    response.statusCode = 404
    response.setHeader("Content-Type", "text/html;charset=utf-8")
    response.write(`{
      "error":"404error"
    }`)
    response.end()
  }

这种方法的缺点:这个函数必须按照规定的顺序传参,第二,如果没有参数就会出现类似于$.ajax("post",null,successFn,null)的情况,必须传有结构的参数(对象)

3.2什么是回调

在上面的代码中,在ajax函数中传了一个successFN,failFn函数作为参数,但是执行的时候是在别的地方执行的(在request.onreadystatechange里)

 if(request.readyState ===4){
            if ( request.status>=200&&request.status<=400){
                successFn.call(undefined,request.responseText)//执行成功函数
            }else if(request.status>=400){
                failFn.call(undefined,request)//执行失败函数

这两个函数就是回调函数

回调(callback):
回来执行的意思,自己不call.
把这个函数给别人,自己不执行,让别人执行,就是callback

回调:使用方代码不执行,只传一个函数,回来再执行

回调就是传一个函数,自己不执行,传到别的地方让他在那里执行的函数!只要满足这个条件就叫回调而已.他是一个函数,只不过在别的地方执行了

所以看上去没有执行,实际上success了就执行传进去的这个函数

3.3封装方法二:传有结构的参数(对象)

let myButton = document.getElementById("myButton");

window.jQuery = ()=>{//假装有一个简易的jQuery
    let object1 = {};
    boject1.addClass = function(){};
    boject1.show = function(){};
    return object1;
}

window.jQuery.ajax = (options)=>{
    //获取传进来的对象的value
    let method = options.method;
    let path = options.path;
    let body = options.body;
    let successFn = options.successFn;
    let failFn = options.failFn;
    let headers = options.headers;

    let request = new XMLHttpRequest();
    request.open(method,path);//配置

    for (const key in headers) {//遍历header,设置响应头
        let value = headers[key];
        request.setRequestHeader(key,value);
    }
    request.send(body);//发送,并配置响应体

    request.onreadystatechange = ()=>{
        if(request.readyState ===4){
            if ( request.status>=200&&request.status<=400){
                successFn.call(undefined,request.responseText);//执行成功函数
            }else if(request.status>=400){
                failFn.call(undefined,request);//执行失败函数
            }
        }
    }
}

window.$ = window.jQuery;
myButton.addEventListener("click",(e)=>{
    //使用ajax
    $.ajax({
        method:"post",
        path:"/xxx",
        body:"username=mtt&password=1",
        headers:{
            "content-type":"application/x-www-form-urlencoded",
            "mataotao":18
        },
        successFn:function(result){//成功函数的回调
            console.log("成功了,返回的响应体为:");
            console.log(result);//打印request.responseTex
        },
        failFn:function(){
            console.log(result);
            console.log(result.status);//打印失败的状态码
            console.log(result.responseText);//打印失败时返回的响应体
        }
    }
)
})

结果:

4真正的jQuery.ajax()API如何使用

jQuery.ajax()API
例子

$.ajax({
  type: "GET",
  url: "/test",
  dataType: "script",
  data:{}
  success:function(){},
});

dataType就是setRequestHeader("content-type","application/javascript")

data就是请求的第四部分

5函数传不同的参数

例如文档里的
jQuery.ajax( url [, settings ] )

jQuery.ajax( [settings ] )
jQuery.ajax第一个参数既可以是url字符串你也可以是对象
如何实现这种封装?
只要在最开始判断参数长度即可

let url;
    if(arguments.length===1){//参数长度为1
        url = options.url;
    }else if(arguments.length===2){//参数长度为2
        url = arguments[0];
        options = arguments[1];
    }

其余代码不变

6 一点点ES6语法:解构赋值

解构赋值MDN

或者直接

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/96605.html

回调、使用Promise封装ajax()、Promise入门

摘要：回调使用封装入门回调是啥看这里回调是什么方应杭知乎是一种特殊的函数，这个函数被作为参数传给另一个函数去调用。回调、使用Promise封装ajax()、Promise入门 1 回调是啥 call a functioncall a function back callback 看这里:Callback（回调）是什么？---方应杭知乎 callback 是一种特殊的函数，这个函数被作为参数...

godlong_X 2019-08-23 10:50 评论0 收藏0
AJAX 之 Promise

摘要：如下用回调最大的问题是回调函数没有命名规范，每个开发者都有自己的风格，一旦引用了多个库，各个库之间的回调函数可能会互相影响，的出现正好解决了这个问题。 AJAX 的所有功能 AJAX 出现之后解决了前后端交互问题，前端也正式走向前台。AJAX 最核心的8句话 1. let request = new XMLHttpRequest() 2. request.onreadystatecha...

microcosm1994 2019-08-26 11:55 评论0 收藏0
Ajax详解

摘要：当请求完成后注册一个回调函数。该请求是否触发全局处理事件如等，请求发送前的回调函数，用来修改请求发送前，此功能可用来设置自定义头信息，在函数中返回将取消这个请求。例如，为请求指定一个回调函数名。即改变回调函数的，默认就是传入的整个对象。 Ajax Ajax 全称是 asynchronous javascript and xml，并不是新的编程语言，可以说是已有技术的组合，主要用来实现客...

jokester 2019-08-23 14:15 评论0 收藏0
JQuery DOM 常用操作汇总

摘要：通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数。请求完成后回调函数请求成功或失败时均调用。一、JQuery对象的基本方法： (1) get(); 取得所有匹配的元素 (2) get(index); 取得其中一个匹配的元素 $(this).get(0) 等同于 $(this)[0] (3) Number index(jqueryObj); 搜索子对象 (...

airborne007 2019-08-21 10:24 评论0 收藏0
如何构建通用 api 中间层

摘要：是在收到响应后执行的函数，可以不用返回。一步步介绍了如何构建以及使用中间层，来统一管理接口地址，最后还介绍了下中间件等高级功能。零、问题的由来开门见山地说，这篇文章是一篇安利软文~，安利的对象就是最近搞的 tua-api。顾名思义，这就是一款辅助获取接口数据的工具。发请求相关的工具辣么多，那我为啥要用你呢？理想状态下，项目中应该有一个 api 中间层。各种接口在这里定义，业务...

BingqiChen 2019-08-23 13:00 评论0 收藏0