Ajax中的 get、post 封装

 get 封装：      

        <button id="btn">获取随机数</button>

        <button id="btn2">获取数组</button>

        <script>

            var btn=document.getElementById("btn");

            var btn2=document.getElementById("btn2");

            var txt=document.getElementById("txt");

            btn.onclick=function(){

                ajax("get","3.txt",{n:100,j:false,p:"ajax"},function(d){

                    txt.innerHTML+=d+"　";

                })

            }

            btn2.onclick=function(){

                ajax("get","3.txt",{m:true,x:30,y:50},function(d){

                    console.log(d);

                })

            }

            function ajax(type,url,data,success,error){ //type --get | post,url--可能有 可能没有,data--传给后台的要传递的参数,success--请求成功的回调函数,error--请求失败的回调函数

                var arr=[];

                for(var i in data){

                    arr.push(i+"="+data[i]);

                }

                var str=arr.join("&");

                var xhr=new XMLHttpRequest(); //创建对象

                xhr.onreadystatechange=function(){ //改变状态

                    if(xhr.readyState==4){    //4 个状态

                        if(xhr.status==200){  //请求成功

                            success(xhr.responseText);

                        }

                        if(xhr.status>=400&&xhr.status<600){//请求失败

                            error(xhr.statusText);

                        }

                    }

                }

                url+=url.indexOf("?")==-1?url+"?"+str:url+"&"+str; //有执行 url+"?"+str 没有 url+"&"+str

                xhr.open(type,url); //打开

                xhr.send();  //向服务器 发送

            }   

            

        </script>

　　

post封装：

 <input type="text" name="username" id="username">
 <input type="button" value="提交" id="btn">

　<script>

	var btn = document.getElementById('btn');
	btn.onclick = function(){
	    var uname = document.getElementById('username').value;
	    // 1、创建XMLHttpRequest对象
	        var xhr = new XMLHttpRequest();//标准
	    // 2、准备发送
	    //post请求参数通过send传递，不需要通过encodeURI()转码,必须设置请求头信息。
	    var param = 'username='+uname+"&type=post";
	    xhr.open('post','1.txt',true);
	    //设置头信息
	    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
	    // 3、执行发送动作
	    xhr.send(null);//post请求参数在这里传递，并且不需要转码
	    // 4、指定回调函数
	    xhr.onreadystatechange = function(){
	        if(xhr.readyState == 4){
	            if(xhr.status == 200){
	                alert(xhr.responseText);
	            }
	        }
	    }
	    //注意： url  只能出现一次？   
		
		//jsonp   动态生成 script src 设置成请求地址  通过一个  向后台传递一个数据      的值就是window
	}
</script>

　　

<input type="text" name="username" id="username">

        <input type="button" value="提交" id="btn">