Ajax的实现-蒲公英云

Ajax的实现

以你之姓@ 2023-08-17 15:28 188阅读 0赞

原生Ajax的实现

一、查阅开发文档

首先需要了解后台接口，需要提交哪些参数，返回哪些数据。这里我使用了一个返回json格式数据的登录接口为例，讲解怎么使用Ajax与后台接口交互。

后台文档

二、编写JavaScript（ajax）

post方法

var xmlhttp;
if (window.XMLHttpRequest){//IE7+, Firefox, Chrome, Opera, Safari

   xmlhttp=new XMLHttpRequest();

}
else{// IE6, IE5

   xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");

}
//上面的http请求对象的生成做了一个浏览器兼容性处理
var adminName = document.getElementById(‘adminName’).value;//获取html表单中adminName输入域对象的值，既账号
var psw = document.getElementById(‘psw’).value;//获取html表单中pwd输入域对象的值，既密码

xmlhttp.onreadystatechange=function(){
//当接受到响应时回调该方法

    if (xmlhttp.readyState==4 && (xmlhttp.status==200||xmlhttp.status==0))
    {
                var tip = document.getElementById('tip');//获取html的tip节点，主要用于输出登录结果
                var text = xmlhttp.responseText;//使用接口返回内容，响应内容
                var resultJson = eval("("+text+")");//把响应内容对象转成javascript对象
                var result = resultJson.result;//获取json中的result键对应的值
                var code = resultJson.code;//获取json中的code键对应的值
                if (result=="fail") {//登录失败
                    if(code==101){
                        tip.innerHTML = "密码错误!"
                    }else if(code==102){
                        tip.innerHTML = "用户不存在!"
                    }
                }else //登录成功        if(result=="success"&&code==100){
                    window.location.href="center.html";//跳转到centent.html页面
                }
      }

}
xmlhttp.open(“POST”,”control1/login”,true);//以POST方式请求该接口
xmlhttp.setRequestHeader(“Content-type”,”application/x-www-form-urlencoded”);//添加Content-type
xmlhttp.send(“adminName=”+adminName+”&psw=”+psw);//发送请求参数间用&分割

上面的代码中主要实现请求后台登录接口，若登录成功就跳转到用户中心，若登录失败，根据返回的code提示用户登录失败的原因。

get方法

var btn=document.getElementById(“btn”);

    btn.=function(){
        //1.创建ajax对象(此处兼容性的创建)
        var xhr=null;
        try{
        xhr=new XMLHttpRequest();
        }catch(e){
        xhr=new ActiveXObject("Microsoft.XMLHTTP");
        }
        //2.调用open方法----注：xhr.open("方法"，"路径?数据"，"是否异步")
        xhr.open("get","links/2.get.php?username="+encodeURI('陆小曼')+"&age=18&timp="+new Date().getTime(),true);
        //3.发送数据
        xhr.send();
        //4.请求状态改变事件
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                document.write(xhr.responseText)
                }else{
                alert("错误"+xhr.status)
                }
            }
        }
    }

Jquery 实现Ajax

//提交登录信息
btn.on('click',function(e){
        e.preventDefault();
        var username=$('.login_box #Account').val()
        var password=$('.login_box #Password').val()
        var param = {'username':username,'password':password;
// console.log("Request param = "+JSON.stringify(param));
        $.ajax({
            type:"post",
            url:'control1/login',
            dataType: 'json',
            data: JSON.stringify(param),
        }).done(function(result){
            // console.log("++++" + JSON.stringify(result));
            if (result=="fail") {//登录失败
                        if(code==101){
                            tip.innerHTML = "密码错误!"
                        }else if(code==102){
                            tip.innerHTML = "用户不存在!"
                        }
                    }else //登录成功        if(result=="success"&&code==100){
                        window.location.href="center.html";//跳转到centent.html页面
                    }
        }).fail(function(){
            console.log('fail');
        });    
    });