浅谈jQuery异步对象(XMLHttpRequest)


Posted in Javascript onNovember 17, 2014

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

这是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 相关文章推荐
基于jquery创建的一个图片、视频缓冲的效果样式插件
Aug 28 Javascript
JQEasy-ui在IE9以下版本中二次加载的问题分析及处理方法
Jun 23 Javascript
js实现在网页上简单显示时间的方法
Mar 02 Javascript
JavaScript中setUTCMilliseconds()方法的使用详解
Jun 12 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之主动触发事件和模拟冒泡处理
Nov 24 Javascript
vue组件jsx语法的具体使用
May 21 Javascript
微信小程序项目总结之点赞 删除列表 分享功能
Jun 25 Javascript
Jquery遍历筛选数组的几种方法和遍历解析json对象,Map()方法详解以及数组中查询某值是否存在
Jan 18 jQuery
javaScript把其它类型转换为Number类型
Oct 13 Javascript
JS实现audio音频剪裁剪切复制播放与上传(步骤详解)
Jul 28 Javascript
微信小程序中使用vant框架的具体步骤
Feb 18 Javascript
详解Vue3使用axios的配置教程
Apr 29 Vue.js
node.js中watch机制详解
Nov 17 #Javascript
z-blog SyntaxHighlighter 长代码无法换行解决办法(jquery)
Nov 16 #Javascript
js构造函数、索引数组和属性的实现方式和使用
Nov 16 #Javascript
JQuery表单验证插件EasyValidator用法分析
Nov 15 #Javascript
不到30行JS代码实现Excel表格的方法
Nov 15 #Javascript
Node.js中HTTP模块与事件模块详解
Nov 14 #Javascript
jquery中append()与appendto()用法分析
Nov 14 #Javascript
You might like
php中++i 与 i++ 的区别
2012/08/08 PHP
php实现zip压缩文件解压缩代码分享(简单易懂)
2014/05/10 PHP
PHP使用array_fill定义多维数组的方法
2015/03/18 PHP
Yii中创建自己的Widget实例
2016/01/05 PHP
PHP 用session与gd库实现简单验证码生成与验证的类方法
2016/11/15 PHP
PHP使用phpunit进行单元测试示例
2019/09/23 PHP
jQuery文本框(input textare)事件绑定方法教程
2013/04/24 Javascript
20行代码实现的一个CSS覆盖率测试脚本
2013/07/07 Javascript
jquery获得当前html页面源码的方法
2015/07/14 Javascript
JavaScript预解析及相关技巧分析
2016/04/21 Javascript
使用vue.js写一个tab选项卡效果
2017/03/25 Javascript
Vue filters过滤器的使用方法
2017/07/14 Javascript
vue引入ueditor及node后台配置详解
2018/01/03 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
echarts统计x轴区间的数值实例代码详解
2019/07/07 Javascript
使用 Vue 实现一个虚拟列表的方法
2019/08/20 Javascript
[33:23]VG vs Pain 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python pickle模块用法实例分析
2015/05/27 Python
Python中的模块导入和读取键盘输入的方法
2015/10/16 Python
python中struct模块之字节型数据的处理方法
2019/08/27 Python
python数据库编程 Mysql实现通讯录
2020/03/27 Python
如何利用python生成MD5并去重
2020/12/07 Python
全面解析CSS Media媒体查询使用操作(推荐)
2017/08/15 HTML / CSS
用css3实现转换过渡和动画效果
2020/03/13 HTML / CSS
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
美国在线乐器和设备商店:Musician’s Friend
2018/07/06 全球购物
中国一家综合的外贸B2C电子商务网站:DealeXtreme(DX)
2020/03/10 全球购物
请编程遍历页面上所有 TextBox 控件并给它赋值为 string.Empty
2015/12/03 面试题
大学生咖啡店创业计划书
2014/01/21 职场文书
小学生家长评语大全
2014/02/10 职场文书
责任书范本
2014/08/25 职场文书
群众路线个人整改措施
2014/10/24 职场文书
同乡会致辞
2015/07/30 职场文书
《童年》读后感(三篇)
2019/08/27 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
一文搞懂redux在react中的初步用法
2021/06/09 Javascript