12.Ajax

最新推荐文章于 2024-07-28 10:23:25 发布

阿支<－biubiu－⊂(`ω´∩)

最新推荐文章于 2024-07-28 10:23:25 发布

阅读量106

点赞数

分类专栏： Java Web 文章标签： ajax json

本文链接：https://blog.csdn.net/m0_56593901/article/details/117637569

版权

Java Web 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

12.Ajax

一、简介

全称：Asynchronous JavaScript And Xml，翻译过来就时异步的JavaScript和Xml
在Ajax中通过JavaScript发生请求，通过Xml作为响应数据，后来Xml被JSON替代
Ajax主要用来提升用户的体验
同步和异步的区别
- 同步请求
  - 当发送一个同步请求时，必须等到服务器响应成功之后才能发送其他请求，有一个等待的过程，而且响应成功之后会刷新整个页面
- 异步请求
  - 当发送一个异步请求时，不需要等到服务器响应成功就可以发送其他请求，而且响应成功之后可以局部刷新页面

二、通过JavaScript发送Ajax请求

1）创建XMLHttpRequest对象（除了IE6和IE5浏览器）

//1.创建XMLHttpRequest对象
var xhr = new XMLHttpRequest();

2）设置请求信息

GET请求

 //2.设置请求信息
          /*
            open(method,url,async)
              method：设置请求方式，get或post
              url：设置请求地址
              async：接收一个布尔类型的值，设置发送异步请求还是同步请求，默认值是true，
                    发送的是异步请求
           */
          xhr.open("get","${pageContext.request.contextPath}/AjaxServlet?username=admin&password=123456");

POST请求

//2.设置请求信息
          /*
            open(method,url,async)
              method：设置请求方式，get或post
              url：设置请求地址
              async：接收一个布尔类型的值，设置发送异步请求还是同步请求，默认值是true，
                    发送的是异步请求
           */
          xhr.open("post","${pageContext.request.contextPath}/AjaxServlet");
          //POST请求在发送请求之前需要设置请求头对请求体中的数据进行URL编码
          xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

3）发送请求

GET请求

//3.发送请求
          /*
            send(body)
            send方法中需要传入请求体，get请求没有请求体
           */
          xhr.send();

POST请求

//3.发送请求
          /*
            send(body)
            send方法中需要传入请求体
           */
          xhr.send("username=admin&password=123456");

4）接收响应

接收字符串类型的数据

 //给XHMLHttpRequest对象绑定onreadystatechange事件判断它的状态
          xhr.onreadystatechange = function () {
            //当xhr的readyState的值为4并且状态码为200时才接收响应
            if(xhr.readyState == 4 && xhr.status == 200){
              //4.接收响应
              var text = xhr.responseText;
              //将响应信息设置到span标签中
              var spanEle = document.getElementById("msg");
              spanEle.innerText = text;
            }
          };

接收XML格式的数据

//给XHMLHttpRequest对象绑定onreadystatechange事件判断它的状态
          xhr.onreadystatechange = function () {
            //当xhr的readyState的值为4并且状态码为200时才接收响应
            if(xhr.readyState == 4 && xhr.status == 200){
              //4.接收响应
              //接收XML格式的响应数据
              var doc = xhr.responseXML;
              //获取根标签student
              var rootEle = doc.getElementsByTagName("student")[0];
              //获取name标签
              var nameEle = rootEle.getElementsByTagName("name")[0];
              //获取name标签中的文本节点
              var textNode = nameEle.firstChild;
              //获取文本节点的节点值
              var text = textNode.nodeValue;
              //获取显示响应数据的span标签
              var spanEle = document.getElementById("msg2");
              spanEle.innerText = text;
            }
          };

AjaxServlet中的代码

package com.atguigu.ajax.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

//处理Ajax请求的Servlet
@WebServlet("/AjaxServlet")
public class AjaxServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("doPost方法被调用");
        //获取用户名和密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println(username);
        System.out.println(password);
        response.setContentType("text/xml;charset=utf-8");
        //给浏览器响应一个字符串
        PrintWriter writer = response.getWriter();
        //响应一个XML格式的数据
        writer.write("<student><name>张三</name><age>18</age></student>");
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("doGet方法被调用");
        //获取用户名和密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println(username);
        System.out.println(password);
        response.setContentType("text/html;charset=utf-8");
        //给浏览器响应一个字符串
        PrintWriter writer = response.getWriter();
        writer.write("响应成功！");
    }
}

三、通过jQery发送Ajax请求

1）通过$.ajax()方法发送Ajax请求

jsp页面

<%--
  Created by IntelliJ IDEA.
  User: 韩总
  Date: 2021/5/29
  Time: 16:16
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>通过jQuery发送Ajax请求</title>
    <script src="${pageContext.request.contextPath}/script/jquery-1.7.2.js"></script>
    <script>
        $(function () {
            //给按钮绑定单击事件
            $("#btnId").click(function () {
                //通过jQuery的ajax()方法发送Ajax请求响应字符串类型的数据
                /*
                    $.ajax(url,[settins])
                        url：必须的。用来设置请求地址
                        settings：可选的。常用的参数
                            type：用来设置请求方式，默认是get
                            data：用来设置请求参数
                            success：用来设置一个回调函数，响应成功之后系统会自动调用该函数，
                                    响应数据会以参数的形式传入到该函数中
                            error：用来指定出现异常时调用的函数
                            dataType：用来指定响应数据的类型
                 */
                $.ajax({
                    url:"${pageContext.request.contextPath}/JQueryServlet",
                    type:"get",
                    data:"username=admin&password=666666",
                    success:function (res) {
                        //将响应信息设置到span标签中
                        $("#msg").text(res);
                    },
                    error:function () {
                        alert("出现异常了！");
                    },
                    dataType:"text"
                });
            });
        });
    </script>
</head>
<body>
<button id="btnId">通过jQuery的ajax()方法发送Ajax请求响应字符串类型的数据</button><span id="msg" style="color: red"></span><br>
</body>
</html>

JQueryServlet

package com.atguigu.ajax.servlet;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

//处理通过jQuery发送的Ajax请求的Servlet
@WebServlet("/JQueryServlet")
public class JQueryServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("doPost方法被调用");
        //获取用户名和密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println(username);
        System.out.println(password);
        response.setContentType("text/html;charset=utf-8");
        //给浏览器响应一个字符串
        PrintWriter writer = response.getWriter();
        writer.write("响应成功！");
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("doGet方法被调用");
        //获取用户名和密码
        String username = request.getParameter("username");
        String password = request.getParameter("password");
        System.out.println(username);
        System.out.println(password);
        response.setContentType("text/html;charset=utf-8");
        //给浏览器响应一个字符串
        PrintWriter writer = response.getWriter();
        writer.write("响应成功！");
    }
}

2）通过 $. g e t () 或$ .post()发送Ajax请求

前端Js代码

//给第二个按钮绑定单击事件
            $("#btnId2").click(function () {
                //通过jQuery的get()/post方法发送Ajax请求响应字符串类型的数据
                /*
               $.get(url, [data], [callback], [type])
                   url：必须的。用来设置请求地址
                   data：可选的。用来设置请求参数
                   callback：可选的。用来设置一个回调函数，响应成功之后系统会自动调用该函数，
                                    响应数据会以参数的形式传入到该函数中
                   type：可选的。用来设置响应数据的类型
            */
                //设置请求地址
                var url = "${pageContext.request.contextPath}/JQueryServlet";
                //设置发送的请求参数
                var params = "username=admin&password=111111";
                $.post(url,params,function (res) {
                    //将响应数据设置到span标签中
                    $("#msg2").text(res);
                },"text");
            });

四、JSON

全称：JavaScript Object Notation，JavaScript对象的另一种表示方式，但是这个JS对象比较特殊，可以通过其他工具直接转换为一个字符串进行传输
JSON是一种跨平台、跨语言的数据交换格式
由于XML格式的数据交换格式解析复杂、性能差，现在已经被JSON替代

XML格式的响应数据

<student>
    <name>张三</name>
    <age>18</age>
</student>

JSON格式的响应数据
```
{"name":"张三","age":18}
```

JOSN格式

JSON对象
- 格式：{“属性名1”:属性值,“属性名2”:属性值,“属性名3”:属性值}
- 属性名必须使用双引号括起来；属性名和属性值之间使用冒号分隔；多个属性之间使用逗号分隔
JSON数组
- 格式：[值1,值2,值3]
JOSN格式中的值能接受的类型
- 字符串
- 数字
- null
- 布尔类型的值
- 对象
- 数组

<script>
        //声明JSON对象
        var jsonObj = {"name":"张三","age":18};
        //声明JSON数组
        var jsonArray = ["李四",24,null,true,jsonObj];
        //获取JSON数组中的第五个元素中的age属性值
        // alert(jsonArray[4].age);
        //声明一个稍微复杂的JSON对象
        var fzJsonObj = {"name":"唐僧","age":18,
                        "sons":[
                            {"name":"孙悟空","age":500},
                            {"name":"猪八戒","age":600,"wives":[
                                    {"name":"嫦娥","age":10000},
                                    {"name":"高翠兰","age":16},
                                    {"name":"某某菩萨","age":100000}
                                ]},
                            {"name":"沙悟净","age":666},
                            {"name":"小白龙","age":1000}
                        ]
                        };
        //获取猪八戒第二任夫人的名字
        // alert(fzJsonObj.sons[1].wives[1].name);
    </script>

在JavaScript中JSON对象与JSON字符串之间的转换

JSON对象转JSON字符串
- JSON.stringify(JSON对象)
JSON字符串转JSON对象
- JSON.parse(JSON字符串)

<script>
        //声明JSON对象
        var jsonObj = {"name":"张三","age":18};
        //将JSON对象转换为JSON字符串
        var objToStr = JSON.stringify(jsonObj);
        // alert(objToStr);
        //声明一个JSON格式的字符串
        var JSONStr = '{"name":"女儿国国王","age":35}';
        //将JSON格式的字符串转换为JSON对象
        var strToObj = JSON.parse(JSONStr);
        //alert(strToObj);

    </script>

在Java中将Java对象转换为JSON字符串

通过第三方工具
- gson
- json-lib
- jackson

以gson为例

导入gson的jar包
创建Gson对象
调用Gson中的toJson方法将Java对象转换为JSON字符串

 User user = new User(1, "张三", "333333", "zhangsan@lisi.com");
        //创建Gson对象
        Gson gson = new Gson();
        //将User对象转换为JSON格式的字符串
        String json = gson.toJson(user);
        System.out.println(json);

通过发送Ajax请求接受JSON格式的数据

jsp页面

<%--
  Created by IntelliJ IDEA.
  User: 韩总
  Date: 2021/5/31
  Time: 9:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>JSON格式</title>
    <script src="${pageContext.request.contextPath}/script/jquery-1.7.2.js"></script>
    <script>
        $(function () {
            //给按钮绑定单击事件
            $("#btnId").click(function () {
                //通过jQuery的post/getJson方法发送Ajax请求响应JSON类型的数据
                //设置请求地址
                var url = "${pageContext.request.contextPath}/JSONServlet";
                //通过$.post()方法发送Ajax请求
                // $.post(url,function (res) {
                //     // alert(res.id+"-"+res.username+"-"+res.password+"-"+res.email);
                //     //将响应数据设置到span标签中
                //     $("#msg").text(res.id+"-"+res.username+"-"+res.password+"-"+res.email);
                // },"json");
                //通过$.getJSON()方法接收JSON格式的响应数据，$.getJSON()发送的是一个GET请求
                $.getJSON(url,function (res) {
                    //将响应数据设置到span标签中
                    $("#msg").text(res.id+"-"+res.username+"-"+res.password+"-"+res.email);
                });
            });
        });
    </script>
</head>
<body>
<button id="btnId">通过jQuery的post/getJson方法发送Ajax请求响应JSON类型的数据</button><span id="msg" style="color: red"></span><br>
</body>
</html>

后台Servlet

package com.atguigu.ajax.servlet;

import com.atguigu.ajax.bean.User;
import com.google.gson.Gson;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.io.PrintWriter;

//将Java对象转换为JSON字符串的Servlet
@WebServlet(name = "JSONServlet",urlPatterns = "/JSONServlet")
public class JSONServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        //假设从数据库中查询到一个User对象
        User user = new User(1, "张三", "333333", "zhangsan@lisi.com");
        //创建Gson对象
        Gson gson = new Gson();
        //将User对象转换为JSON格式的字符串
        String json = gson.toJson(user);
        System.out.println(json);
        //解决响应乱码问题
        response.setContentType("text/html;charset=utf-8");
        //给浏览器响应一个JSON格式的字符串
        PrintWriter writer = response.getWriter();
        writer.write(json);
    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
        System.out.println("doGet方法被调用");
        doPost(request,response);
    }
}

阿支<－biubiu－⊂(`ω´∩)

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
12.Ajax

12.Ajax一、简介全称：Asynchronous JavaScript And Xml，翻译过来就时异步的JavaScript和Xml在Ajax中通过JavaScript发生请求，通过Xml作为响应数据，后来Xml被JSON替代Ajax主要用来提升用户的体验同步和异步的区别同步请求当发送一个同步请求时，必须等到服务器响应成功之后才能发送其他请求，有一个等待的过程，而且响应成功之后会刷新整个页面异步请求当发送一个异步请求时，不需要等到服务器响应成功就可以发送其他请求，而且响应
复制链接

扫一扫

专栏目录