关于ajax请求心得

in 默认分类 with 0 comment

大多数网站都不只有静态的div+css的静态页面,需要请求后台数据实现异步更新,web前端里就要使用到ajax
我工作的大多数时间都是在调接口

Ajax的核心是js对象是:XMLHttpRequest
ajax请求有以下几个步骤:
首先要创建XMLHttpRequest异步对象;
然后设置请求的参数,包括方法('GET','POST'),请求的url,异步(true);
然后发送请求;
注册事件,obj.onreadystatechange;
最后获取返回的数据.

原生js试例:

var xmlhttp = new XMLHttpRequest();  //创建异步对象
xmlhttp.open('GET','xx-ajax.php',true);  //方法,接口,异步
xmlhttp.send();  //发送情求
xmlhttp.onreadyststechange = fucntion(){
    //注册事件,为保证数据完整返回,一般会判断两个值status,readyState
    if(xmlhttp.status == 200 && xmlhttp.readyState == 4){
        console.log(xmlhttp.data);  //打印返回的数据
    }
}

如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

xmlhttp.open("POST","ajax_test.asp",true);
xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xmlhttp.send("fname=Bill&lname=Gates");

我常用jquery实例:

$.ajax({
    url: "xx-ajax.php",
    type: "GET",
    success: function(result){
        if(result.status == 200){
            console.log(rusult.data);
        }
    }
})

jquery类似登录代码

var username = $('.username').val();
var password = $('.password').val();
$.ajax({
    url:"https://api.piaoworld.com/api-doc/act/?moduleName=user&actionName=login",
    type:"POST",
    data:{
        username: username,
        password: password,
    },
    success:function(result){
        if(result.status==400){
            alert(result.message);
        }
    }
})
Responses