原生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);               //如果发生了错误 输出请求的状态码
                    }
                }
            }
        }

2、①jQuery的AJAX实现get请求,这里的后台是test.php,点击id为jqAjaxTestByGET的时候就会向AJAX触发AJAX请求:

$(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触发的匿名函数结束
     ②jQuery的AJAX实现post请求,这里的后台是test.php,点击id为jqAjaxTestByPOST的时候就会向AJAX触发AJAX请求:

        $(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触发的匿名函数结束


  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值