2020-05-04

JavaWeb--Ajax

字数统计: 1k字 | 阅读时长: 4分

一、什么是Ajax

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。(来自百度百科的解释)
在更清楚的理解Ajax之前，先了解什么是同步和异步：
同步：客户端必须等待服务器端的响应。在等待的期间客户端不能做其他操作。
异步：客户端不需要等待服务器端的响应。在服务器处理请求的过程中，客户端可以进行其他的操作。
所以Ajax可以通俗的理解为：在请求部分更新网页的同时，不需要等待服务器端的响应，用户可以继续做一些其它的操作，这更好的提高了用户的体验度。
注:Ajax不是一种新的编程语言，而是一种使用现有标准的新方法。

二、如何使用Ajax

1、JavaScript实现Ajax
2、JQuery实现Ajax

三、JavaScript实现Ajax

（一）步骤

1、创建核心对象
2、建立连接
3、发送请求
4、接受并处理来自服务器的响应结果

（二）入门小Demo

在JS中实现Ajax的代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        function fun() {
            //1、创建核心对象
            var xmlhttp;
            if (window.XMLHttpRequest)
            {// code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else
            {// code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

            //2、建立连接
            /**
             * 参数：
             1. 请求方式：GET、POST
                * get方式，请求参数在URL后边拼接。send方法为空参
                * post方式，请求参数在send方法中定义
             2. 请求的URL：
             3. 同步或异步请求：true（异步）或 false（同步）
             */
            xmlhttp.open("GET","AjaxServlet?username=tom",true);

            //3、发送请求
            xmlhttp.send();

            //4、获取并处理来自服务器的响应结果
            //获取方式 ：xmlhttp.responseText
            //什么时候获取？当服务器响应成功后再获取

            //每当 readyState 属性改变时，就会调用该函数。
            xmlhttp.onreadystatechange=function()
            {
                //readyState 等于 4 且状态为 200 时，表示响应已就绪：
                if (xmlhttp.readyState==4 && xmlhttp.status==200)
                {
                    var responseText = xmlhttp.responseText;
                    alert(responseText);
                }
            }
        }
    </script>

</head>
<body>
    <input type="button" value="发送异步请求" onclick="fun();">
</body>
</html>

处理请求的Servlet如下：

@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        /**
         * 1、获取参数
         * 2、处理参数
         * 3、做出响应
         */
        String username = request.getParameter("username");
        System.out.println(username);
        response.getWriter().write("hello: " + username);
    }
}

不用仔细观察也会发现，用原生JS的方式实在是有点麻烦呀。
所以就有了通过JQuery来实现Ajax的方法。

四、JQuery实现Ajax

JQ一共有三种方式来实现Ajax：
1、 $.ajax()
2、$.get()：发送get请求
3、$.post()：发送post请求

（一）$.ajax()方式

语法：$.ajax({键值对});

<script>
    function fun() {
        $.ajax({
            url:"/AjaxServlet",           			    //请求的地址
            type:"GET",                        			//请求的类型
            //data:"username=tom&pwd=123",      		//请求传递的参数
            data:{"username":"tom", "pwd":"123"},   	//请求参数一般使用json格式来传递
            success:function (respData) {           	//响应成功时执行的函数
                alert(respData);
            },
            error:function () {
                alert("出错啦...")
            },
            dataType:"text"
        })
    }
</script>

追求极致的我们还是会嫌弃有点麻烦，于是又有了针对GET请求和POST请求的方式，如下两种。

（二）$.get()方式

语法：$.get(url, [data], [callback], [type])

参数：
url：请求路径
data：请求参数
callback：回调函数
type：响应结果的类型

<script>
    function fun() {
        $.get("/AjaxServlet", {username:"tom", age:"29"}, function (respData) {
            alert(respData);
        }, "text");
    }
</script>

（三）$.post()方式

这种方式的语法和get方式的语法一样，就不重复总结啦

<script>
    function fun() {
        $.post("/AjaxServlet", {username:"tom", age:"29"}, function (respData) {
            alert(respData);
        }, "text");
    }
</script>

此处只是总结了几个入门小Demo而已，更详细的教程当然需要看文档啦！
Ajax教程
 JQuery教程

Java新手，若有错误，欢迎指正！

| 阅读量次