ajax

头像
棘丶
    阅读 2 分钟
    1

    ajax 的基本步骤

    1.注册

    var xhr = new XMLHttpRequest();

    2.设置监听

    xhr.onreadystatechange=function(){
        if(xhr.readyState==4&&xhr.status==200){
            console.log(xhr.responseText);
        }
    }

    3.连接

    xhr.open("GET","https:www.baidu.com",true);//true表示异步

    4.发送

    xhr.send();

    post 请求需要请求头

    //post请求要设置请求头
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xhr.send("name="+name);

    post请求和get请求不同之处在一个是在url传值一个是在send()中传值,post请求需要设置请求头

    为了增加代码的可重用性所以需要把xhr共性进行封装使用传值的形式来使用ajax

    function submit(url,parmeter,callback){
        var xxhyp = new XMLHttpRequest();
        xxhyp.onreadystatechange=function(){
            if(xxhyp.readyState==4&&xxhyp.status==200){
                callback(xxhyp.responseText);
            }
                }
    xxhyp.open("POST",url,true);
    //post请求要设置请求头
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
    xxhyp.send(parmeter);
    }
    
    //需要使用时代码示例
    function chaer(){
    var url = "dopost";
    var parmeter = "msg";
    submit(url,parmeter,function(result){                document.ElementById("loadid").innerHTNL=result;
        });    
        }
    //callback和function(result)形成了函数的回调~~~~
    //get请求类似

    Jquery-ajax

    先得引入jquery的包哦

    1.使用jquery-ajax的get请求

    function doget(){
    var url = "dopost";
    var parmeter = "msg"; 
    $.get(url,parmeter,function(result){
        $("#loadid").html(result);
        });   
    }
    //get(url,params[,dataType])为jquery种的一个ajax函数,dataType--期望然会的类型

    2.使用jquery-ajax的post请求

    function dopost(){
    var url = "dopost";
    var parmeter = "msg"; 
    $.get(url,parmeter,function(result){
        $("#loadid").html(result);~~~~
        });   
    }

    3.使用jquer原生的ajax

    function doajax(){
      var url = "doget";
      var parmeter = "msg";
      $.ajax({
        url:url,            //url
        type:"GET",         //指定提交方法
        async:true,         //指定异步还是同步
        data:parmeter,         //指定参数
        success:function(result){
            $("#loadid").html(result);~~~~
        }
      });
    }

    4.使用load方式

    function doload(){
      var url = "doget";
      var parmeter = "msg";  
      $("#loadid").load(url,parmeter,function(){
            console.log("console控制tai");
      })
     }

    棘丶
    12 声望1 粉丝

    引用和评论

    0 条评论