浅谈jQuery异步对象(XMLHttpRequest)

 更新时间:2014年11月17日 09:09:07   投稿:hebedich  
文章浅显易懂的将jQuery异步对象分为了5个步奏,非常有利于我们学习记忆,是篇相当不错的学习jQuery异步对象的文章,这里推荐给大家。

我们先来看看异步对象五部曲

这是post请求的、

复制代码 代码如下:

 //1.00创建异步对象
            var xhr = new XMLHttpRequest();
            //2.0
            xhr.open("post", url,params, true);
            //3.0将参数使用Formdata属性传递
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            //4.0设置回调函数
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    alert(xhr.responseText);
                }
            }
            //5.0传递参数
            xhr.send(params);

结合get请求做一个异步对象的封装

get 请求中的

  xhr.setRequestHeader("If-Modified-Since", "0"); 是为了清除缓存

而post请求的

复制代码 代码如下:

 xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");

是为了传输方式
在<from method='post' type="">
<from>中的type可以得到三种方式,其中包括application/x-www-form-urlencoded
 

复制代码 代码如下:

var ajaxHelp = {
    CreatXHR: function () {
        //创建异步对象
        var xhr = new XMLHttpRequest();
        return xhr;
    },
    //ajax的get请求
    AjaxGet: function (url, callBack) {
        this.AJaxCommon("get", url, null, callBack);
    },
    //ajax的post请求
    AjaxPost: function (url, params, callBack) {
        this.AJaxCommon("post", url, params, callBack);
    },
    AJaxCommon: function (method, url, params, callBack) {
        //1.0
        var xhr = this.CreatXHR();
        //2.0
        xhr.open(method, url, true);
        //3.0
        if (method == "get") {
            xhr.setRequestHeader("If-Modified-Since", "0");
        } else {
            xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        }
        //4.0
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4 && xhr.status == 200) {
                var datas = JSON.parse(xhr.responseText);
                //执行回调函数
                callBack(datas);
            }
        }
        //5.0
        xhr.send(params);
    }
};

ps:在JQuery里面是有$.ajax  和$.get /   $.Post  等异步请求的方法的。以前的封装就不用了。额。好扯。其实他们底层也是这样的写的呢。JQuery就是为了解决各个浏览器的兼容性问题而已

以上就是本人对于jQuery异步对象(XMLHttpRequest)的理解,如有遗漏,麻烦联系我,补充上。

相关文章

  • JavaScript中获取高度和宽度函数总结

    JavaScript中获取高度和宽度函数总结

    这篇文章主要介绍了JavaScript中获取高度和宽度函数总结,例如获取视窗大小、可见区域宽、可见区域高、获取元素自身大小等,很方便的一个总结,需要的朋友可以参考下
    2014-10-10
  • 微信小程序使用vant组件库的详细步骤

    微信小程序使用vant组件库的详细步骤

    VantWeapp是有赞团队开源的小程序UI组件库,可快速搭建小程序项目,小程序支持npm安装第三方包,但需使用开发者工具构建,VantWeapp提供全局和局部注册方式,支持自定义事件和插槽,可通过解除样式隔离、使用外部样式类和CSS变量修改组件样式
    2024-09-09
  • 微信小程序引入map组件并在地图上标点的实现代码

    微信小程序引入map组件并在地图上标点的实现代码

    这篇文章主要介绍了微信小程序引入map组件并在地图上标点,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-10-10
  • JS将数字转换成三位逗号分隔的样式(示例代码)

    JS将数字转换成三位逗号分隔的样式(示例代码)

    本篇文章主要是对JS将数字转换成三位逗号分隔的样式(示例代码)进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助
    2014-02-02
  • JavaScript禁止页面回退的方法步骤

    JavaScript禁止页面回退的方法步骤

    这篇文章主要为大家介绍了JavaScript禁止页面回退的方法步骤,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2023-08-08
  • axios使用拦截器统一处理所有的http请求的方法

    axios使用拦截器统一处理所有的http请求的方法

    这篇文章主要介绍了axios使用拦截器统一处理所有的http请求的方法,通过一段实例代码给大家介绍了axios拦截器使用,代码简单易懂,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-11-11
  • JS上传组件FileUpload自定义模板的使用方法

    JS上传组件FileUpload自定义模板的使用方法

    这篇文章主要为大家详细介绍了JS上传组件FileUpload自定义模板的使用方法,感兴趣的小伙伴们可以参考一下
    2016-05-05
  • JS+CSS实现TreeMenu二级树形菜单完整实例

    JS+CSS实现TreeMenu二级树形菜单完整实例

    这篇文章主要介绍了JS+CSS实现TreeMenu二级树形菜单,以完整实例形式较为详细的分析了JS二级树形菜单的节点元素操作技巧,非常简单实用,需要的朋友可以参考下
    2015-09-09
  • Javascript实现可旋转的圆圈实例代码

    Javascript实现可旋转的圆圈实例代码

    这篇文章主要介绍了Javascript实现可旋转的圆圈实例代码,可实现圆圈的旋转与运动效果,涉及javascript动态操作页面元素属性及进行相应数学运算的技巧,需要的朋友可以参考下
    2015-08-08
  • js实现同一页面可多次调用的图片幻灯切换效果

    js实现同一页面可多次调用的图片幻灯切换效果

    这篇文章主要介绍了js实现同一页面可多次调用的图片幻灯切换效果,可实现在同一页面中多次调用幻灯切换效果,非常具有实用价值,需要的朋友可以参考下
    2015-02-02

最新评论