同步请求即客户端向服务器发送请求后需要等待服务器的回应才能继续下一步加载页面,
而异步请求即发送请求后不需要等待服务器的响应,继续自己的工作,待响应返回数据再对其进行数据的接收和处理。
使用ajax可以实现异步请求,其原理就想是第三方中介人员,帮助客户解决需求,当需求解决后将其结果返回给客户,客户不需要等待结果,既高效又节省时间。
原始ajax的使用:
常用的有get和post请求:
1、get请求

//1、创建XMLHttpRequest对象
        var xhr=new XMLHttpRequest();
        //2、准备发送, xhr.open('请求方式get或post','请求的URL地址','省略默认异步请求,true表示异步,false表示同步')
        xhr.open('GET','./checkLogin.php?username='+uname+'&password='+pw,true);//为防止IE浏览器中URL地址传递的中文参数乱码,需要使用encodeURI(参数)将中文参数转码
        //3、执行发送动作
        xhr.send(null);//get请求参数为null,open中的URL地址中可以传递参数,post请求send()中写传递的参数
        //4、指定回调函数,异步请求中对调函数是最后执行的避免阻塞,不用等待服务器端的响应先继续执行
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4&&xhr.status==200){
           readyState:
            2 表示浏览器已经收到服务器响应的数据
            3 正在解析数据
            4 数据已经解析完成可以使用
            HTTP常见状态码:
            200 表示响应成功
            404 表示没有找到请求的资源
            500 表示服务器端错误
                var data=xhr.responseText;//请求返回的数据
                var info=document.getElementById("info");
                if(data=='1'){
                    info.innerHTML='登录成功';
                }else if(data=='2'){
                    info.innerHTML='用户名或密码错误';
                }
            }
        }

2、post请求

var xhr=new XMLHttpRequest();
        xhr.open('POST','./checkLogin.php',true);
        //post请求需要添加请求头部
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xhr.send("username="+uname+"&password="+pw);
        xhr.onreadystatechange=function () {
            if(xhr.readyState==4&&xhr.status==200){
                var data=xhr.responseText;//请求返回的数据
            }

readyState
2 表示浏览器已经收到服务器响应的数据
3 正在解析数据
4 数据已经解析完成可以使用
HTTP常见状态码:
200 表示响应成功
404 表示没有找到请求的资源
500 表示服务器端错误
使用jQuery封装的ajax请求,需导入jQuery文件

$.ajax({
            type:'get',//默认get请求
            url:'./checkLogin.php',
            data:{username:'',password:'',path:2},
            dataType:'text',//使用jsonp是解决跨域问题,且仅支持get请求
            success:function(data){//请求成功后返回的数据
                if(data=="3"){
                    document.getElementById("info2").innerHTML="请求成功";
                }
            }
        });