美文网首页
原生ajax封装

原生ajax封装

作者: 别让我一个人醉_1fa7 | 来源:发表于2017-09-05 14:56 被阅读0次
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Untitled Page</title>
    <script type="text/javascript" src="jquery-3.2.1.js"></script>
    <script type="text/javascript">


        function ajax(parm){

            //创建ajax对象
            var xhr = null;

            if (window.XMLHttpRequest) {
                xhr = new XMLHttpRequest();
            }
            else if (window.ActiveXObject) {
                xhr = ActiveXObject('Microsoft.XMLHTTP')
            }
            //回调函数
            xhr.onreadystatechange=function(){
                if(xhr.readyState==4){
                    if(xhr.status==200){
                        var result = xhr.responseText;//只考虑json格式
//                        var use = JSON.parse(result);
                        if (parm.success='function'){
                            parm.success(result)
                        };
                    }else{
                        parm.erro()
                    };
                }
            }
            if(parm.type=='get'){
                var URL=parm.url +"?"+'key=value';
            }
            else if (parm.type=='post'){
                xhr.setRequestHeader("Content-Type","application/x-www/form-urlencode");
            };
            xhr.open(type,URL,true);
            xhr.send(null);
        };

      $(function(){
          $("#btn").click(function(){
              var parm1 = {
                  type:'get/post',
                  dataType:"xml/json",
                  url:'01data.php',//如果type=get则URL='URL?code='+value;data设置为null
                  data:{key:value},
                  success:function(use){
                      alert(use)
                  },
                  erro:function(){}
              };
              ajax(parm1);
          })


      })

    </script>
</head>
<body>
<input type="button" id="btn" value="click">
<div id="show"></div>
</body>
</html>
</body>
</html>

相关文章

  • ajax封装

    原生ajax封装

  • ajax

    原生ajax配置详解 对ajax简单封装 调用

  • Ajax

    标签: Ajax 正文 一、实现一个原生Ajax 二、Ajax状态 三、将原生的 ajax 封装成 promise

  • 原生js ajax网络数据请求 XMLHttprequest、A

    再学封装ajax请求 原生JS,AJAX数据封装 兼容性处理 脚本: 请求操作:

  • ajax总结

    1. Ajax 1.1 原生JavaScript封装Ajax 1.2 jquery ajax 及其 快捷方法 $....

  • html5的ajax学习(三)

    一.原生的ajax封装 原生的ajax的调用 二.jquery的ajax 2.1 jquery的语法 三. fun...

  • promise封装原生ajax、jqueryAjax、axios

    原生js的ajax封装+promise 将原生js的ajax请求单独封装成一个数据请求的模块, 需要的时候直接调用...

  • jQuery中的Ajax

    jQuery中的ajax 封装第一层 - 类似于原生ajax的用法$ajax 封装第二层 - 基于第一层再次封装$...

  • 原生ajax封装

  • ajax原生封装

    1、创建ajax对象 2、连接服务器 3、发送请求 4、接收返回数据 function Ajax(type, ur...

网友评论

      本文标题:原生ajax封装

      本文链接:https://www.haomeiwen.com/subject/jvyujxtx.html