原生js和jQuery的AJAX实现

关于js和jQuery的AJAX实现，直接进入主题

1、原生js的AJAX实现，这里的后台是test.php，点击id为inputBox的时候便触发AJAX请求：

function getInfoByJs() {//原生js获取信息
            var request=new XMLHttpRequest();
 //         request.open("GET","test.php?number="+document.getElementById("inputBox").value);//get方法向后台传值 通过url传输数据
            request.open("POST","test.php");                                                 //POST方法传值
            var data="number="+document.getElementById("inputBox").value;                    //如果是get方式这里就不需要定义data
            request.setRequestHeader("Content-Type","application/x-www-form-urlencoded;charset=gbk");//必须写的 千万注意！！！
            request.send(data);                                                               //如果是get方法就不需要send数据 用url的方式传输
            request.onreadystatechange=function () {                                          //事件监听 readyState改变的时候便会触发 
                if(request.readyState===4) {                                        //当readyState变成4的时候说明响应内容解析完成，可以在客户端调用了
                    if (request.status === 200) {                         //当请求的status是200的时候表示后台页面正常访问 可以在接下来执行相应的操作了
                        //    to do...                                    //处理相应的业务逻辑
                    }
                    else {
                        alert("发生错误:" + request.status);               //如果发生了错误 输出请求的状态码
                    }
                }
            }
        }

$(document).ready(function () {                            //当document加载完成 执行function这个匿名函数 GET测试
            $("#jqAjaxTestByGET").click(function () {      
                $.ajax({//以json 的形式传入参数     //使用jQuery的方式异步加载数据 使用GET方法 这样相当于给id为jqAjaxTest的标签添加了一个匿名函数
                    type:"GET",                    //get方法
                    url:"test.php?number="+$("#inputBox").val(),  //如果是get方法的话 数据需要在url里进行传输 用拼接url的方式传输id为inputBox的值
                                                                  //第一个参数以?符号传输 后面的以&符号继续拼接传输 比如 test.php?a=1&b=2&c=3
                   dataType:"json",              //数据以json的形式进行传输
                    success:function () {
                        alert("传输成功");
                    },                           //传输成功执行的匿名函数
                    error:function (jqXHR) {     //jqXHR是这个浏览器原生的XMLHttpRequest对象
                        alert("传输失败，错误码"+jqXHR.status);
                    }                          //传输失败执行的匿名函数
                })
            });                                 //click触发的匿名函数结束
        });                                    //ready触发的匿名函数结束

        $(document).ready(function () {                   //当document加载完成 执行function这个匿名函数 POST测试
            $("#jqAjaxTestByPOST").click(function () {  //使用jQuery的方式异步加载数据 使用POST方法 这样相当于给d为jqAjaxTest的标签添加了一个匿名函数
                $.ajax({                               
                    type:"POST",                       //POST方法
                    url:"test.php",                    //如果是get方法的话 数据需要在url里进行传输 由于是POST 就不需要了
                    dataType:"json",                  //数据以json的形式进行传输
                    data:{
                      number:$("#inputBox").val()     //data这里要写成前面dataType所对应的形式
                    },
                    success:function () {
                        alert("传输成功");
                    },                                //传输成功执行的匿名函数
                    error:function (jqXHR) {          //jqXHR表示这个jQuery的XMLHttpRequest
                        alert("传输失败，错误码"+jqXHR.status);
                    }                                 //传输失败执行的匿名函数
                })
            });                                       //click触发的匿名函数结束
        });                                           //ready触发的匿名函数结束

最后

以上就是害怕蛋挞为你收集整理的原生js和jQuery的AJAX实现的全部内容，希望文章能够帮你解决原生js和jQuery的AJAX实现所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。