原生JavaScript的ajax方法——请求数据

1、使用nodejs配置本地服务器

 window.function () {
                getData()
            }

2、在浏览器运行程序，并发送数据请求

3、在路由中拦截请求，调用控制器中相应方法getStuData，返回数据

router.get("/student.do",stuCtrl.getStuData)

4、使用ajax获得数据

function getData() {
                // 获取ajax对象
                if(window.XMLHttpRequest){
                    var xhr=new XMLHttpRequest();//DOM获取ajax对象的方法
                }else{
                    var xhr=new ActiveXObject("Microsoft.XMLHTTP");//ie获取ajax对象的方法
                }
                // 打开ajax对象参数（1.请求方式 2.请求地址和发送数据 3.同步(false)或者异步(true)
                xhr.open("get","/student.do？data",true);
                // 利用ajax对象发送数据
                xhr.send("mydata="+data+"&num="+num);
              	/*  
                  	//post方法·
                    xhr.open("post","/student.do",true);
                    // 添加http头，发送信息至服务器时内容编码类型
					xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");  
                    xhr.send("mydata="+data+"&num="+num);
                */
                // ajax请求结束所触发的事件
                xhr.onreadystatechange=function () {//回调函数
                    if(xhr.readyState==4&&xhr.status==200){
                        console.log("响应完毕");
                        //获得数据，并转为JSON格式
                        let stuArr=JSON.parse(xhr.responseText);  
                        //进行其他的数据操作
                        ......
                    }
               }
    		}    

封装ajax

		//method：请求方式    url：拦截地址      obj：数据     fn：回调函数
		function myAjax(method,url,obj,fn) {
                    if (window.XMLHttpRequest) {
                        var xhr = new XMLHttpRequest();
                    } else {
                        var xhr = new ActiveXObject("Microsoft.XMLHTTP");
                    }
                    let str=""
                    for(let i in obj) {
                        str+=i+"="+obj[i]+"&";
                    }
                    str=str.slice(0,str.length-1);
                    if(method=="get"){
                        xhr.open(method, url+"?"+str, true);
                        xhr.send(null);
                    }else if(method=="post"){
                        xhr.open(method, url, true);
                        xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
                        xhr.send("myStr="+str);
                    }
                    xhr.onreadystatechange = function () {
                        if (xhr.readyState == 4 && xhr.status == 200) {
                            fn(xhr.responseText);
                        }
                    };
                }

AJAX完整请求响应图：