关于Ajax请求

Posted 2021-11-04 小智RE0

Ajax即Asynchronous javascript And XML（异步JavaScript和XML） 2005年被Jesse James Garrett提出的新术语，用来描述一种使用现有技术集合的‘新’方法，包括: html 或 XHTML, CSS, JavaScript, DOM, XML, XSLT, 以及最重要的XMLHttpRequest。使用Ajax技术网页应用能够快速地将增量更新呈现在用户界面上，而不需要重载（刷新）整个页面，这使得程序能够更快地回应用户的操作。

没有用JQuery封装的Ajax请求

例如这个登录请求;

function toLogin(){
   /* 先取到账户框和密码框的值 */
   var accountVal = document.getElementById("accountId").value;
   var passwordVal = document.getElementById("passwordId").value;
   if(accountVal.length==0){
       document.getElementById("outbox_form_account_error").innerHTML="用户名不能为空!";
   }
   else if(passwordVal.length==0 || passwordVal.length>6){
       document.getElementById("outbox_form_password_error").innerHTML="密码要六位数哦!";
   }
   else{
       /*创建XMLHttpRequest对象*/
       var httpObj = new XMLHttpRequest();
       //建立与服务器连接;
       httpObj.open("post", "login", true);
       //发送前要设置请求头
       httpObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
       //发送;拼接数据;
       httpObj.send("account=" + accountVal + "&password=" + passwordVal);
       //接收服务器响应之前,发送请求时,会触发回调事件;
       httpObj.onreadystatechange = function () {
           //根据就绪码和页面的状态码进行判断
           if(httpObj.readyState==4 && httpObj.status==200){
               if(httpObj.responseText == 0){
                   //replace方法 加载一个新页面取代当前页面;
                   location.replace("success.html");
               }else if(httpObj.responseText == 1){
                   document.getElementById("outbox_form_account_error").innerHTML="该用户不存在!";
               }else{
                   alert("服务器异常!!!")
               }
           }
       }
   }
}

封装后

function toLogin(){
    /* 先取到账户框和密码框的值 */
    var accountVal = $("#accountId").val();
    var passwordVal = $("#passwordId").val();
    if((accountVal.trim()).length===0){

        //console.log((accountVal.trim()).length==0) 测试使用;
        $("#outbox_form_account_error").html("用户名不能为空!");
    }
    else if((passwordVal.trim()).length === 0 ){
        $("#outbox_form_password_error").html("密码不能为空!");
    }
    else if((passwordVal.trim()).length > 6){
        $("#outbox_form_password_error").html("密码要六位数哦!");
    }
    else{

        /*参数1,url地址,参数2:表单的数据转为键值对的形式,参数3:触发的回调函数(函数参数:响应值),参数4,可指定返回的类型*/
       $.post("back/login",$("#formId").serialize(),function (data){

           //JSON转JS;
           var obj= $.parseJSON(data);
               //判断是否存在;注意用的是用JS对象进行判断;
               if(obj.id !=null){
                   // alert(data);测试时使用;
                   //用 JSON格式 存入会话;
                   window.sessionStorage.setItem("user",data);
                   //replace方法 加载一个新页面取代当前页面;
                   alert("登录成功!")
                   location.replace("success.html");

                   //不存在就提示;
               }else if(data == 1){
                   $("#outbox_form_account_error").html( "注意是不是账号密码错了呢");
               }else{
                   alert("啊这,服务器异常!!!")
               }

       });
    }
}

要将表单的所有数据提交时,直接用serialize()序列表表格内容为字符串。就会变为键值对的形式;
,选择器得到表单后;直接发送整个表单数据;不需要一个一个地用键值对去写;

例如

发送ajax请求时,若要让返回不同的结果都去改变一个标记值时,就关闭异步请求;而变为同步请求;
即使用$.ajax发送请求时将async设置为false;在没有返回值之前，同步请求将锁住浏览器，用户其它操作必须等待请求完成才可以执行.

$.ajax({…})请求时;常用的参数;
url:“请求地址”,
type:“发送的请求方式”,(默认为"get",要发"post"或其他的请求时需要标注),
data:发送的数据(键值对形式),
async:(是否开异步,默认为true),
success:发送成功后相应的数据(后面直接函数处理数据function(res){…}),
dataType:响应回来的数据格式解析,

比如说下面这段代码;
去验证宿舍号是否存在,若直接去异步请求,可能走到一半,请求完后后这个标记值flag的值都还没有变.

//对于宿舍号的输入框失焦事件绑定函数;交互查询该宿舍是否存在;
function  checkDormNumber(val){
	//定义标记点;
	var flag = false;
	//这里还需要取到楼栋的ID号;以查询是哪个宿舍楼的那个宿舍;
	var buildVal = $("#buildId").val();
	//先进行空判断;
	if((val.trim()).length==0){
	    //提示信息变色;
		$("#dorm_numberError").css("color","red");
	}
	else if(buildVal==0){
	    //提示信息;
		$("#d_buildError").css("color","red");
		$("#d_buildError").html("请选择宿舍楼后再进行宿舍号查询");
	}
	else {
		//使用get方式进行提交;关闭异步提交;
		$.ajax({
			url:"../back/dorm",
			type:"get",
			data:{mark: "checkNum", dormNumber: val,buildId:buildVal},
			async:false,
			success: function (res) {
				if (res == 369) {
					alert("对不起,您的登录信息已失效,请重新登录!");
					flag = false;
					//关闭的是外层页面;
					window.parent.location.replace("../login.html");
				} else if (res == 500) {
					alert("服务器离线");
					flag = false;
				} else if (res == 0) {
					$("#dorm_numberError").css("color", "red");
					$("#dorm_numberError").html("对不起,该宿舍已存在");
					flag  = false;
				} else {
					$("#dorm_numberError").css("color", "green");
					$("#dorm_numberError").html("OK,继续操作");
					flag = true;
				}
			}
		});
	}
	return flag;
}

---