526互联

ajax的get post 同步与异步操作

发布时间 2023-11-28 15:46:35作者: 刘先生的爱心博客
// get 同步
function getSync(url,params,success,error){
    var xhr = new XMLHttpRequest();
    xhr.open('get',url+'?'+params,false);
    xhr.send();
    if(xhr.readyState == 4&& xhr.status==200){
        success(xhr.responseText);
    }else{
        error('error');
    }
}

调用

    <script src="./temp.js"></script>
    <script>
        getSync('http://127.0.0.1/11.28-1/index.php', 'name=jack&age=18', ok, err);
        //   success();
        function ok(res) {
            var one=JSON.parse(res)
            console.log(one.info[0]);
        }
        function err(res) {
            console.log(res);
        }
    </script>
 
// get 异步
function getAsync(url,params,success,error){
    var xhr = new XMLHttpRequest();
    xhr.open('get',url+'?'+params,true);
    xhr.send();
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status==200){
                success(xhr.responseText)
            }else{
                error('error');
            }
        }
    }
}
调用
    <script src="./temp.js"></script>
    <script>
        getAsync('http://127.0.0.1/11.28-1/index.php', 'name=jack&age=18', ok, err);
        //   success();
        function ok(res) {
            var one=JSON.parse(res)
            console.log(one.info[0]);
        }
        function err(res) {
            console.log(res);
        }
    </script>
 
// post 异步
function postAsync(url,params,success,error){
    var xhr = new XMLHttpRequest();
    xhr.open('post',url,true);
    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
    xhr.send(params);
    xhr.onreadystatechange = function(){
        if(xhr.readyState == 4){
            if(xhr.status==200){
                success(xhr.responseText)
            }else{
                error('error');
            }
        }
    }
}
调用
   postAsync('http://127.0.0.1/11.28-1/index.php','name=rose&age=18',ok,err);

        function ok(res){
            var one=JSON.parse(res)
            console.log(one.info[0]);
        }
        function err(res){
            console.log(res);
        }