Ajax的实现

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

## 原生Ajax的实现 ##

### 一、查阅开发文档 ###

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

![后台文档][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI0MzQ3OQ_size_16_color_FFFFFF_t_70]

### 二、编写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方法

## 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');
            });    
        });

*  `$ajax`中的内容我们理解，是从指定的URL中返回一些值，这些值以json格式返回。`$ajax()`如果执行成功，则执行`.done()`方法，function(e)中的参数e为返回的结果，如果`$ajax()`执行发生错误，则执行`.fail()`，`.done()`不执行

关于Ajax的相关函数请查阅 [JQuery中Ajax官方文档][JQuery_Ajax]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjI0MzQ3OQ_size_16_color_FFFFFF_t_70]: /images/20230810/fdd25d00506744d7b54dc33f483e533e.png
[JQuery_Ajax]: https://www.w3school.com.cn/jquery/ajax_ajax.asp