zoukankan      html  css  js  c++  java
  • 复习原生ajax

    function ajax(url, fnSucc, fnFaild)
    {
        //1.创建
        if(window.XMLHttpRequest)
        {
            var oAjax=new XMLHttpRequest();
        }
        else
        {
            var oAjax=new ActiveXObject('Microsoft.XMLHTTP');
        }
        
        //2.连接
        oAjax.open('GET', url, true);
        
        //3.发送
        oAjax.send();
        
        //4.接收
        oAjax.onreadystatechange=function ()
        {
            if(oAjax.readyState==4)        //完成
            {
                if(oAjax.status>=200 && oAjax.status<300 || oAjax.status==304)
                {
                    //alert('成功:'+oAjax.responseText);
                    if(fnSucc)
                    {
                        fnSucc(oAjax.responseText);
                    }
                }
                else
                {
                    //alert('失败:'+oAjax.status);
                    if(fnFaild)
                    {
                        fnFaild(oAjax.status);
                    }
                }
            }
        };
    }

    辅助函数处理url

    function json2url(json){
        json.t=Math.random();
    
        var arr=[];
    
        for(var i in json)
        {
            arr.push(i+'='+json[i]);
        }
    
        return arr.join('&');
    }

    实例1:读取文字

    window.onload=function ()
    {
        var oBtn=document.getElementById('btn1');
        
        oBtn.onclick=function ()
        {
            //alert('aaa.txt?t='+Math.random());
            ajax('aaa.txt?t='+Math.random(), function (str){
                //str——从服务器读回来的内容
                alert(str);
            });
        };
    };

    实例2:注册和登陆

    window.onload=function(){
        var oAddUser=document.getElementById('add_user');
        var oAddPass=document.getElementById('add_pass');
        var oAddBtn=document.getElementById('add_btn');
    
        oAddBtn.onclick=function()
        {
            var url='user.php?'+json2url({
                act:'add',
                user:oAddUser.value,
                pass:oAddPass.value
            })
    
            ajax(url,function(str){
                var json=eval('('+str+')');
                if(json.error){
                    alert('有问题'+json.desc);
                }else{
                    alert('注册成功');
                }
            },function(){
                alert('失败');
            });
        };
    
        var oLgnUser=document.getElementById('login_user');
        var oLgnPass=document.getElementById('login_pass');
        var oLgnBtn=document.getElementById('login_btn');
    
        oLgnBtn.onclick=function(){
            var url='user.php?'+json2url({
                act:'login',
                user:oLgnUser.value,
                pass:oLgnPass.value
            })
    
            ajax(url,function(str){
                var json=eval('('+str+')');
                if(json.error){
                    alert('有问题'+json.desc);
                }else{
                    alert('登陆成功');
                }
            },function(){
                alert('失败');
            })
        };
    };

    本文属于原创,如需转载请注明地址

  • 相关阅读:
    使用策略模式减少if else
    php 向二维数组中追加元素
    svn update 产生Node remains in conflict的问题
    php对ip地址的处理
    php 对比两个数组中的值是否相等
    jquery 通过attr获取属性只有一个值的解决
    php 一维数组去重
    调整ceph的pg数(pg_num, pgp_num)
    linux-Centos 7下bond与vlan技术的结合[推荐]
    centos 配置vlan
  • 原文地址:https://www.cnblogs.com/leejersey/p/3614059.html
Copyright © 2011-2022 走看看