Ajax简单使用

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。AJAX 不是新的编程语言，而是一种使用现有标准的新方法。AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。

原始的Ajax使用：

XMLHttpRequest (XHR)是 AJAX 的基础。XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

创建 XMLHttpRequest 对象的语法：

var xhr = new XMLHttpRequest();

老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象：

var xhr = new ActiveXObject("Microsoft.XMLHTTP");

使用 XMLHttpRequest 对象的 open() 和 send() 方法将请求发送到服务器：

xhr.open("GET","/try/ajax/demo_get2.php?fname=Henry&lname=Ford",true);
xhr.send();

open方法的三个参数：

1. method: 请求方式，POST或者GET

2. url: 文件在服务器上的位置

3. async: true（异步）或者false（同步）

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

        不愿使用缓存文件（更新服务器上的文件或数据库）

        向服务器发送大量数据（POST 没有数据量限制）

        发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

xhr的响应函数：

xmlhttp.onreadystatechange=function()
{
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
}

readyState为4并且status为200表示请求成功。

使用jQuery的Ajax：

引入jQuery（相应的路径下要有jQuery的js文件）：

<script src="${pageContext.request.contextPath}/jquery/jquery-3.6.0.js"></script>

直接使用jQuery的post方法（post方法中使用了ajax方法）：

$.post({
    url: "${pageContext.request.contextPath}/requestURL",
    data: {
        "bookName" : $("#bookName").val()
    },
    success: function (data) {
        $("#result").val(data);
    }
})

jQuery的取值和设置方法都是val方法，取组件则是使用$("#component_id")的形式。

上述post方法可以放在按钮或者文本框的事件触发函数中，比如blur(失去焦点)或者onkeyup(释放键盘)等。

注意此时后端需要返回的是字符串或者JSON等格式，而不是返回页面给视图解析器，因此需要在方法上加上注解@ResonseBody，如果一个类里的方法都不是返回页面而是返回消息给前端，则可以将这个类加上注解@RestController。

如果返回给前端的消息中有中文，可能会显示成问号？，此时需要在RequestMapping里加上produces属性：

@RequestMapping(value = "/requestURL", produces = {"text/html;charset=UTF-8"})

produces里的text/html可以换成application/xml或者application/json等形式。