• linkedu视频
  • 平面设计
  • 电脑入门
  • 操作系统
  • 办公应用
  • 电脑硬件
  • 动画设计
  • 3D设计
  • 网页设计
  • CAD设计
  • 影音处理
  • 数据库
  • 程序设计
  • 认证考试
  • 信息管理
  • 信息安全
菜单
linkedu.com
  • 网页制作
  • 数据库
  • 程序设计
  • 操作系统
  • CMS教程
  • 游戏攻略
  • 脚本语言
  • 平面设计
  • 软件教程
  • 网络安全
  • 电脑知识
  • 服务器
  • 视频教程
  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号
您的位置:首页 > 程序设计 >AJAX > 原生ajax封装

原生ajax封装

作者: 字体:[增加 减小] 来源:互联网 时间:2017-12-31

通过本文主要向大家介绍了ajax,javascript等相关知识,希望对您有所帮助,也希望大家支持linkedu.com www.linkedu.com
<script>

/**
 * 对封装好的ajax请求进行调用
 * */
ajax({
    url:"", //请求地址
    type:'GET',   //请求方式
    data:{name:'zhangsan',age :'23',email:'2372734044@qq.com'}, //请求参数
    dataType:"json",     // 返回值类型的设定
    async:false,   //是否异步
    success:function (response,xml) {
        console.log(response);   //   此处执行请求成功后的代码
    },
    fail:function (status) {
        console.log('状态码为'+status);   // 此处为执行成功后的代码
    }

});
function ajax(options) {
    /**
     * 传入方式默认为对象
     * */
    options = options || {};
    /**
     * 默认为GET请求
     * */
    options.type = (options.type || "GET").toUpperCase();
    /**
     * 返回值类型默认为json
     * */
    options.dataType = options.dataType || 'json';
    /**
     * 默认为异步请求
     * */
    options.async = options.async || true;
    /**
     * 对需要传入的参数的处理
     * */
    var params = getParams(options.data);
    var xhr;
    /**
     * 创建一个 ajax请求
     * W3C标准和IE标准
     */
    if (window.XMLHttpRequest){
        /**
         * W3C标准
         * */
        xhr = new XMLHttpRequest();
    }else{
        /**
         * IE标准
         * @type {ActiveXObject}
         */
        xhr = new ActiveXObject('Microsoft.XMLHTTP')
    }
    xhr.onreadystatechange = function () {
        if (xhr.readyState == 4){
            var status = xhr.status;
            if (status >= 200 && status < 300 ){
                options.success && options.success(xhr.responseText,xhr.responseXML);
            }else{
                options.fail && options.fail(status);
            }
        }
    };
    if (options.type == 'GET'){
        xhr.open("GET",options.url + '?' + params ,options.async);
        xhr.send(null)
    }else if (options.type == 'POST'){
        /**
         *打开请求
         * */
        xhr.open('POST',options.url,options.async);
        /**
         * POST请求设置请求头
         * */
        xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
        /**
         * 发送请求参数
         */
        xhr.send(params);
    }
}
/**
 * 对象参数的处理
 * @param data
 * @returns {string}
 */
function getParams(data) {
    var arr = [];
    for (var param in data){
        arr.push(encodeURIComponent(param) + '=' +encodeURIComponent(data[param]));
    }
    console.log(arr);
    arr.push(('randomNumber=' + Math.random()).replace('.'));
    console.log(arr);
    return arr.join('&');
}
</script>
分享到:QQ空间新浪微博腾讯微博微信百度贴吧QQ好友复制网址打印

您可能想查找下面的文章:

  • jQuery中$.ajax()的get 方法
  • ajax提交 session失效
  • IE下遭遇Ajax缓存导致数据不更新的问题 ajax页面无刷新
  • GET请求jsonp示例
  • bootstrap table通过ajax获取后台数据展示在table
  • Ajax加载中显示loading
  • ajax 返回data "parsererror" 或者 response返回的是HTML代码
  • AJAX 工作原理
  • ajax中async设置为false与true的区别
  • 原生ajax封装

相关文章

  • 2017-05-11ajax回调打开新窗体防止浏览器拦截有效方法
  • 2017-05-11AJAX实现跨域的三种方法(代理,JSONP,XHR2)
  • 2017-05-11原生ajax调用数据实例讲解
  • 2017-05-11Ajax实现跨域访问的三种方法
  • 2017-05-11ajax使用不同namespace的action的方法
  • 2017-05-11ajax 入门基础之 XMLHttpRequest对象总结
  • 2017-05-11Ajax象棋演示和并提供代码下载
  • 2017-05-11浅析json与jsonp区别及通过ajax获得json数据后格式的转换
  • 2017-05-11纯javascript的ajax实现php异步提交表单的简单实例
  • 2017-05-11SSH网上商城之使用ajax完成用户名是否存在异步校验

文章分类

  • JavaScript
  • ASP.NET
  • PHP
  • 正则表达式
  • AJAX
  • JSP
  • ASP
  • Flex
  • XML
  • 编程技巧
  • Android
  • swift
  • C#教程
  • vb
  • vb.net
  • C语言
  • Java
  • Delphi
  • 易语言
  • vc/mfc
  • 嵌入式开发
  • 游戏开发
  • ios
  • 编程问答
  • 汇编语言
  • 微信小程序
  • 数据结构
  • OpenGL
  • 架构设计
  • qt
  • 微信公众号

最近更新的内容

    • Ajax 和 Asp 的编程
    • ajax提交session超时跳转页面使用全局的方法来处理
    • Ajax在请求过程中显示进度的简单实现
    • AJax与Jsonp跨域访问问题小结
    • Ajax获取数据然后显示在页面的实现方法
    • ajax的 responseXML返回接受 asp
    • PPJOKE 0.1 (网页嵌入聊天)提供下载
    • Ajax跨域访问Cookie丢失问题的解决方法
    • Ajax 无刷新在注册用户名时判断是否为空是否被使用
    • 关于多个Ajax请求执行返回先后的问题示例探讨

关于我们 - 联系我们 - 免责声明 - 网站地图

©2020-2025 All Rights Reserved. linkedu.com 版权所有