Ajax详解

Ajax

Ajax 全称是“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式，快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

Ajax 设计到7项技术，Javascript、XMLHttpRequest、Dom、css、HTML、XML 以及相关服务器 API 。

设计步骤

1、导入文件

<script src="js/axios.min.js"></script>

2、执行语句

html端：

用户名：<input type="text" id="name" onblur="checkUserName()">
<span id="nameSpan"></span><br>

js端发送GET请求：

js端发送GET请求：function checkUserName(){
    //向服务器发送AJAX的GET请求，一个参数为url路径，第二个参数为请求参数
    axios.get("/user/checkName",{
        params:{//请求参数
            userName:$("name").value
        }
    }).then(resp =>{//处理响应信息，resp为响应对象
        var str = resp.data;//得到响应信息的消息体内容
        if (str == "ok"){
            $("nameSpan").innerHTML = "该用户已存在";
            $("nameSpan").style.color = "red";
        }
        else {
            $("nameSpan").innerHTML = "可以使用";
            $("nameSpan").style.color = "green";
        }
    });
}

js端发送POST请求：

let paramObj = new URLSearchParams();
//添加表单数据
paramObj.append("userName",$("userName").value);
paramObj.append("address",$("address").value);
axios.post("order/add",paramObj).then(resp =>{
    var info = resp.data;
    if (info == "ok"){
        cutAll(1);
        $("userName").value = null;
        $("address").value = null;
        $("addDiv").style.visibility = "hidden";
    }
});

ajax的同步与异步：

ajax称为异步的 JavaScript 和 XML 。这意味着，当使用 ajax 发送请求时，不用等到服务器响应，就可以执行别的任务。而同步请求是指，需要等到服务器响应信息到达后，才会执行别的任务。

async function send（）{
	var num = 0;
	await axios.get("getStr").then(resp =>{
		num = resp.data;
	});
	alert("num="+num);
}