原生JS的Ajax方法

AJAX - Asynchronous Javascript And XML—（异步JavaScript和XML）

原生ajax五步走
1.创建XMLHttpRequest对象—ajax

2.设置相关参数ajax.open(Type,Url,bol)
—参数一：发送请求的方式【GET/POST】；
—参数二：接收请求的文件路径“index.php”
—GET请求时，将传递的参数写到入了后面—“index.php?name=yohe&age=24”
—参数三：传输的模式【true/false】-true为异步传输-false为同步传输

3.设置传递的参数
—GET方法时，传递的参数直接拼接在url后面，所以ajax.send(null);
—POST方法时,ajax.send(“key1=val1&key2=val2”);

*4.POST方法时，需要设置请求头文件，不然得不到传回来的数据【GET方法时不需要】
—ajax.setRequestHeader(“Content-Type”,”application/x-www-form-urlencoded charset=utf-8”);

5.为ajax绑定事件，监听当ajax的状态码【readyState】发生变化时，做出相应的操作

EG:

ajax.onreadystatechange = function(){
    if(ajax.readyState == 4 && ajax.status ==200){
        //这里的responseText相当于successFun中的data【字符串】
        //将json格式的字符串转换成JSON数据方法：JSON.parse(str);
        console.log(ajax.responseText);
    }
}

ps:在使用原生js的ajax方法时要加上

ajax.setRequestHeader("Content-Type","application/x-www-form-urlencoded charset=utf-8");

全步骤代码：

//创建XMLHttpRequest对象
            var ajax = false;
            if(window.ActiveXObject){
                ajax = new ActiveXObject("Microsoft.XMLHTTP");
            }else{
                ajax = new XMLHttpRequest();
            }
            //创建请求-ajax.open()---GET方法
//          ajax.open("GET","index.php?username=asd&sex=male&age=18",true);
//          ajax.send(null);
//          ajax.onreadystatechange = function(){
//              console.log(ajax.readyState);
//              if(ajax.readyState ==4){
//                  console.log(ajax.responseText);
//              }
//          }
            //创建请求-ajax.open()---POST方法
            $("#username").on("input",function(){
                var user = $("#username").val();
                ajax.open("POST","index.php",true);
                ajax.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
                ajax.send("username="+user);
                ajax.onreadystatechange = function(){
                    console.log(ajax.readyState);
                    if(ajax.readyState ==4){
                        console.log(ajax.responseText);
                        if(!ajax.responseText){
                            $("#span").html("可用");
                            $("#span").css("color","blue");
                        }else{
                            $("#span").html("有重复的啦傻逼");
                            $("#span").css("color","red");
                        }
                    }
                }

            })