浅谈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 Ajax请求代码(2)
Jan 07 Javascript
再谈querySelector和querySelectorAll的区别与联系
Apr 20 Javascript
Knockoutjs的环境搭建教程
Nov 26 Javascript
教你如何使用PHP输出中文JSON字符串
May 22 Javascript
node.js中Socket.IO的进阶使用技巧
Nov 04 Javascript
表单验证正则表达式实例代码详解
Nov 09 Javascript
基于jQuery实现网页打印功能
Dec 01 Javascript
JavaScript实现带播放列表的音乐播放器实例分享
Mar 07 Javascript
Ztree新增角色和编辑角色回显问题的解决
Oct 25 Javascript
JS正则表达式学习之贪婪和非贪婪模式实例总结
Dec 26 Javascript
html5+CSS 实现禁止IOS长按复制粘贴功能
Dec 28 Javascript
Vue项目打包部署到apache服务器的方法步骤
Feb 01 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
人族 Terran 魔法与科技
2020/03/14 星际争霸
PHP实现分页的一个示例
2006/10/09 PHP
利用yahoo汇率接口实现实时汇率转换示例 汇率转换器
2014/01/14 PHP
支持中文和其他编码的php截取字符串函数分享(截取中文字符串)
2014/03/13 PHP
php微信公众号开发之欢迎老朋友
2018/10/20 PHP
一个网马的tips实现分析
2010/11/28 Javascript
在浏览器中获取当前执行的脚本文件名的代码
2011/07/19 Javascript
20款效果非常棒的 jQuery 插件小结分享
2011/11/18 Javascript
JavaScript var声明变量背后的原理示例解析
2013/10/12 Javascript
Javascript常用字符串判断函数代码分享
2014/12/08 Javascript
使用AmplifyJS组件配合JavaScript进行编程的指南
2015/07/28 Javascript
jQuery实现文件上传进度条特效
2015/08/12 Javascript
jQuery平滑旋转幻灯片特效代码分享
2015/09/07 Javascript
jQuery点击输入框显示验证码图片
2016/05/19 Javascript
你知道setTimeout是如何运行的吗?
2016/08/16 Javascript
原生js实现放大镜
2017/02/20 Javascript
Bootstrap modal 多弹窗之叠加关闭阴影遮罩问题的解决方法
2017/02/27 Javascript
requirejs + vue 项目搭建详解
2017/06/16 Javascript
关于Ajax的原理以及代码封装详解
2017/09/08 Javascript
解决vue单页使用keep-alive页面返回不刷新的问题
2018/03/13 Javascript
Vue插值、表达式、分隔符、指令知识小结
2018/10/12 Javascript
jQuery实现点击旋转,再点击恢复初始状态动画效果示例
2018/12/11 jQuery
如何在vue里面优雅的解决跨域(路由冲突问题)
2019/01/20 Javascript
js如何实现元素曝光上报
2019/08/07 Javascript
浅析JavaScript 函数柯里化
2020/09/08 Javascript
[01:02:17]2014 DOTA2华西杯精英邀请赛 5 24 DK VS VG
2014/05/26 DOTA
Python处理JSON数据并生成条形图
2016/08/05 Python
将Dataframe数据转化为ndarry数据的方法
2018/06/28 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Tensorflow中tf.ConfigProto()的用法详解
2020/02/06 Python
HTML实现代码雨源码及效果示例
2020/02/25 HTML / CSS
世界领先的以旅馆为主的在线预订平台:Hostelworld
2016/10/09 全球购物
预备党员转正思想汇报
2014/01/12 职场文书
优秀员工评语
2014/02/10 职场文书
毕业生如何写自荐信
2014/03/26 职场文书
团队经理竞聘书
2014/03/31 职场文书