AJAX技术

最新推荐文章于 2022-02-12 10:04:13 发布

iceburg-blogs

最新推荐文章于 2022-02-12 10:04:13 发布

阅读量738

点赞数 2

CC 4.0 BY-SA版权

分类专栏： JavaWeb知识总结文章标签： java ee ajax jquery

本文链接：https://blog.csdn.net/eagleuniversityeye/article/details/78039233

JavaEE基础同时被 3 个专栏收录

8 篇文章

订阅专栏

前端基础/前端框架

8 篇文章

订阅专栏

JavaWeb知识总结

5 篇文章

订阅专栏

一.AJAX简介

AJAX全名“Asynchronous Javascript And XML”即异步JavaScript和XML，可以使网页实现异步更新，通俗的讲就是在和后端交互数据后不重新加载整个网页，而是对网页进行局部更新。

1.1 传统同步交互：

交互方式：客户发出HTTP请求（整个页面的数据），服务器处理数据并返回响应，浏览器接受到响应数据后刷新页面
缺点：在每次浏览器提交请求时，会讲整个页面的数据全部提交（包括不需要处理的数据）。如果页面的数据量比较大，提交后服务器不能及时处理并进行响应，那么页面提交以后用户当前的页面就成了白板。

1.2 使用AJAX进行异步交互：

这里写图片描述

交互方式：客户端不再发送HTTP请求，而是用JavaScript调用AJAX引擎来发送数据，所以不用提交整个页面
优点：不用提交整个页面，而是用JavaScript提交需要处理的数据，这样就使一些没有必要传输的数据（HTML/CSS等页面样式）不用传输了，减轻网络传输数据的压力。
由于不用刷新整个页面，所以提交以后，客户面前的页面不会消失，和用户的交互比较好。

二.AJAX技术的原理

AJAX并不是一项新技术，而是多种技术的综合，AJAX的底层使用到了Javascript、XHTML、CSS、DOM、XML和XmlHttpRequest。
其中XmlHttpRequest对象是AJAX的核心，是AJAX最重要的组件

2.1 XmlHttpRequest对象

XmlHttpRequest对象的API：

2.1.1 XmlHttpRequest对象的属性：

属性	功能
readyState	对象的状态
responseTest	服务器以文本格式返回的数据
responseXML	服务器以XML格式返回的数据
status	服务器返回的状态码
statusTest	服务器返回的状态文本信息

XmlHttpRequest对象的属性解析：

1）readyState

readyState用数字表示AJAX请求的状态：

readyState的值	含义
0	未初始化，还没有调用open方法
1	正在加载，open方法已经被调用，但send方法还没有被调用
2	已经加载完毕，Send已被调用，请求开始
3	交互中，服务器正在发送响应
4	完成，响应发送完毕

每次readyState值的改变，都会触发readystatechange事件。如果把onreadystatechange事件处理函数赋值给一个函数，那么每一次readyState值的改变都会引发该函数的执行。

2）status

在XMLHttpRequest对象中，由status属性存储服务器发送的状态码
常见状态码及含义：

状态码	含义
404	没有找到页面(not found)
403	禁止访问(forbidden)
500	内部服务器出错(internal server error)
200	一切正常(OK)
304	没有被修改

3）responseText

服务器返回HTML，XML或者普通文本格式的数据将被储存在responseText中
当readyState属性值为4（AJAX请求已经结束）时，responseText属性才可用

4）responseXML

服务器返回XML格式的数据将被储存在responseXML中

2.1.2 XmlHttpRequest对象的方法：

方法	功能
(不常用)abort()	停止当前请求
(不常用)getAllResponseHeaders()	返回HTTP响应的所有响应首部
(不常用)getResponseHeader(“xxx”)	返回HTTP响应的指定响应首部
onreadystatechange	状态改变的事件触发器
(重要)open(“POST”,”url”)	建立对服务器的调用，url指请求路径
send(xxx)	向服务器发送请求
setRequestHeader(“xxx”,”xxx”)	设置HTTP请求的请求首部，该方法使用前必须调用open()方法(发送请求)

XmlHttpRequest对象的方法解析：

1）onreadystatechange

该事件处理函数由服务器触发，在AJAX执行过程中，服务器会通知客户端当前的通信状态，当通信状态改变时，服务器触发该事件处理函数改变XMLHttpRequest对象的readyState属性的值

2） open ( method , url , asynch )

用一个AJAX调用向服务器发送请求
method表示请求类型，即POST/GET
url表示请求路径
asynch表示请求是否要异步传输，默认值为true(异步)

注：在某些情况下，有些浏览器会把多个XMLHttpRequest请求的结果缓存到同一个url。所以应该把能识别这次请求的标示加到URL后面，最常用的就是时间戳的方式，这样做能够保证url的唯一性。从而避免浏览器的缓存结果。

3） send ( data )

为已经待命的请求发送指令，data是将要传递给服务器的参数
只有当open( )中指定的方法是POST时，才能向send( )方法提供参数，如果open( )中指定的方法是GET，那么则不能使用该方法传递参数。
如果没有数据作为请求体的一部分，则传递参数null

4） setRequestHeader ( header , value )

当浏览器向服务器请求页面时，它会伴随这个请求发送一组首部信息（头信息），这些首部信息（头信息）是一系列描述请求的元数据。首部信息用来声明一个请求是GET还是POST
在AJAX请求中，发送首部信息（头信息）的工作可以由setRequestHeader完成。
参数header:首部的名字，参数value：首部的值
如果用POST请求向服务器发送数据，需要将”Content-type”的首部设置为”application/x-www-form-urlencoded”。它会告知服务器正在发送数据，并且数据已经符合url编码

2.2AJAX技术简单应用：

例一：使用AJAX发送POST请求

AJAX工作的步骤：

1.创建XMLHttpRequest对象
2.调用XMLHttpRequest对象的open( )方法发送请求
3.调用setRequestHeader( )方法设置请求头
4.调用send( )方法传递请求参数
5.使用onreadystatechange( )监听服务器返回的状态码，若服务器正常响应（readyState=4且status=200），则调用JS处理页面

W3School的网络版教程中的一个例子（可以在线测试效果）：AJAX发送POST请求

<html>
<head>
<script type="text/javascript">
function loadXMLDoc(){
    var xmlhttp;
    //1.XMLHttpRequest对象的创建，不同的浏览器，创建XMLHttpRequest对象的方式不同，这段代码是固定的，每次使用不用修改
    if (window.XMLHttpRequest){
      // code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
    }
    else{
         // code for IE6, IE5
         xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
    }
    //5.使用onreadystatechange()方法监听服务器返回的状态码
    xmlhttp.onreadystatechange=function(){
    //若状态码正常则表示数据正常返回
    if (xmlhttp.readyState==4 && xmlhttp.status==200){
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }
    //2.发送POST请求
    xmlhttp.open("POST","/ajax/demo_post2.asp",true);
    //3.设置请求头
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    //4.添加请求参数（若使用GET请求，则不能调用此方法添加参数），若不需要添加请求参数，则传入字符串"null"
    xmlhttp.send("fname=Bill&lname=Gates");
}
</script>
</head>
<body>

<h2>AJAX</h2>
<button type="button" onclick="loadXMLDoc()">请求数据</button>
<div id="myDiv"></div>

</body>
</html>

例二：使用AJAX发送GET请求并接受XML格式的响应数据

<html>
<head>
    <script type="text/javascript">
        function loadXMLDoc()
        {
            var xmlhttp;
            var txt,x,i;
            if (window.XMLHttpRequest) {
                // code for IE7+, Firefox, Chrome, Opera, Safari
                xmlhttp=new XMLHttpRequest();
            }
            else {
                // code for IE6, IE5
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            xmlhttp.onreadystatechange=function() {
                if (xmlhttp.readyState==4 && xmlhttp.status==200) {
                    //通过responseXML属性获取XML格式的响应数据
                    xmlDoc=xmlhttp.responseXML;
                    txt="";
                    x=xmlDoc.getElementsByTagName("title");
                    for (i=0;i<x.length;i++)
                    {
                        txt=txt + x[i].childNodes[0].nodeValue + "<br />";
                    }
                    document.getElementById("myDiv").innerHTML=txt;
                }
            }
            //发送GET请求
            xmlhttp.open("GET","/example/xmle/books.xml",true);
            //调用send方法，不添加请求参数
            xmlhttp.send();
        }
    </script>
</head>

<body>

<h2>My Book Collection:</h2>
<div id="myDiv"></div>
<button type="button" onclick="loadXMLDoc()">获得我的图书收藏列表</button>

</body>
</html>

三.在JQuery中使用AJAX技术

JQuery对AJAX进行了封装，常用的封装了AJAX的方法如下：

1）用请求类型做参数名的方法：

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

$.post(url, [data], [callback], [type])

上述两方法的参数相同，不同在于请求方式是POST类型还是GET类型：

参数名	功能
url	代表请求的服务器端地址
data	代表请求服务器端的数据（可以是key=value形式也可以是json格式）
callback	表示服务器端成功响应所触发的函数（只有正常成功返回才执行）
type	表示服务器端返回的数据类型（jquery会根据指定的类型自动类型转换），常用的返回类型包括text、json、html等

2）可以进行比较全面的设置的方法：

 $.ajax( { option1:value1,option2:value2... } )

option的取值及其含义：

参数名	功能
async	是否异步，默认是true代表异步
data	发送到服务器的参数，建议使用json格式
dataType	服务器端返回的数据类型，常用text和json
success	成功响应执行的函数，对应的类型是function类型
type	请求方式，POST/GET
url	请求服务器端地址

下面举几个实际项目中（黑马商城）使用JQuery进行AJAX异步交互的例子：

例一：异步校验用户名

功能分析：输入用户名，鼠标离开后查询数据库检查数据库中是否存在此用户，然后在输入框下方显示
1.页面部分：一个id为username的input文本输入框

<div class="form-group">
   <label for="username" class="col-sm-2 control-label">用户名</label>
   <div class="col-sm-6">
      <input type="text" class="form-control" id="username" name="username"
         placeholder="请输入用户名">
      <!--在用户名输入框右边添加一个span标签用于显示提示信息-->
      <span id="s1" ></span>
      </div>
</div>

2.使用JQuery，通过id获取对象并添加事件，再调用get( )方法

$(function () {
        //1.给对象设置事件，blur事件会在元素失去焦点的时候触发，既可以是鼠标行为，也可以是按tab键离开的
        $("#username").blur(function () {
            //2.获取文本框中输入的值
            var value = $(this).val();
            if(value!=null){
                $.get(
                    "${pageContext.request.contextPath}/checkUsername",
                    {"username":value},
                    function (data) {
                        var isExist = data.isExist;
                        //3.根据返回值在页面显示用户名是否可用
                        if(isExist){
                            usernameInfo = "该用户名已经存在";
                            $("#usernameInfo").css("color","red");
                        }else{
                            usernameInfo = "该用户名可以使用";
                            $("#usernameInfo").css("color","green");
                        }
                        $("#usernameInfo").html(usernameInfo);
                    },
                    "json"
                );
            }
        });
    });

3.后端代码：

public void doGet(HttpServletRequest request , HttpServletResponse response) throws IOException, ServletException {
        String username = request.getParameter("username");
        UserService userService = new UserServiceImpl();
        User user = null;
        try {
        /**查询数据库，返回用户名username相匹配的user对象*/
            user = userService.findByUsername(username);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        Boolean isExist = false;
        if(user == null){
            isExist = false;
        }else if(user != null){
            isExist = true;
        }
        /**以json格式返回数据*/
        response.getWriter().write("{\"isExist\":"+isExist+"}");

    }

例二.异步自动填充

功能分析：在搜索文本框中输入关键字，程序自动根据输入的内容（商品名称关键字）查询数据库并将数据库中的内容（商品名称）显示到页面上

页面部分：

<form class="navbar-form navbar-right" role="search">
   <div class="form-group">
      <input id="search" type="text" class="form-control" placeholder="Search">
   </div>
   <button id="submit" type="submit" class="btn btn-default">Submit</button>
   <div id="completeShow">
   </div>
</form>

Js代码：

$(function () {
        //1.为输入框添加事件，选择id为search的元素，按键释放时触发
        $("#search").keyup(function () {
            var url = "${pageContext.request.contextPath}/productFindByword";
            var word = $(this).val();
            var params = {"word":word};
            //2.若没有输入关键字，则隐藏显示框
            if(word == ""){
                $("#completeShow").slideUp(200);
                return false;
            }
            $.post(
                url,
                params,
                function (data) {
                    //3.根据返回值显示商品名称信息
                    $("#completeShow").html("<ul id='itemul' class='list-group'></ul>");
                    for(var i=0 ;i<data.length;i++){
                        var product = data[i];
                        var str = ""+product.pname;
                        str = highlight(word,str);
                        $("#itemul").append("<li class='list-group-item'><a href='#'>"+str+"</a></li>")
                        $("#completeShow").show();
                    }
                },
                "json"
            )
        })

后端代码：

public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //1.商品名称为中文，所以要设置request和response的编码格式
        request.setCharacterEncoding("UTF-8");
        response.setContentType("application/json;charset=UTF-8");
        //2.获取商品名称的关键字
        String word = request.getParameter("word");
        ProductService productService = new ProductServiceImpl();
        List<Product> list = null;
        try {
            //3.根据关键字查询数据库
            list = productService.findProductByword(word);
        } catch (SQLException e) {
            e.printStackTrace();
        }
        //4.使用Gson插件将数据转换为json数据格式
        Gson gson = new Gson();
        String json = gson.toJson(list);
        response.getWriter().println(json);

    }