首页 > Web开发 > 详细

Ajax

时间：2021-08-24 23:05:31      阅读：55      评论：0      收藏：0      [点我收藏+]

Ajax简介

概述

  • Asynchronous JavaScript and xml：翻译为异步的JavaScript和xml
  • JavaScript用来发送请求，xml作为相应数据
    Ajax可以增强用户的体验
  • 同步：当往服务器发送请求时，需要等待响应成功以后才能发送其他请求，有一个等待过程
  • 异步：当往服务器发送请求时，不需要等待响应成功就可以发送其他请求，没有等待过程，而且响应成功后局部刷新

JavaScript发送Ajax请求

JavaScript发送Ajax异步请求流程

  • 创建XMLHttpRequest(发送Ajax异步请求的核心对象)
  • 设置请求信息
    open(method,url,async)
    method:请求方式get/post
    url：请求地址
    async：设置请求是异步还是同步，默认是异步
  • 发送请求：send(String) String是请求体，get请求可以不指定String值，没有请求体
  • 获取响应信息

JavaScript发送Ajax的get请求示例

  • jsp页面

    <%@ page import="java.util.Date" %><%--
  Created by IntelliJ IDEA.
  User: ChengLong
  Date: 2021/8/24
  Time: 10:19
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>使用JavaScript发送ajax的get请求</title>
</head>
<script>
    /*点击id=jsAJAXget按钮，发送异步请求*/
    window.onload=function () {
        //1、获取id=jsAJAXget按钮
        var jsAJAXget = document.getElementById("jsAJAXget");
        jsAJAXget.onclick = function () {
            //2、创建XMLHttpRequest
            var xhttp;
            if (window.XMLHttpRequest) {
                xhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //3、设置请求信息
            /*
            * open(method, url, async)
            规定请求

            method：请求类型 GET 或 POST
            url：文件位置
            async：true（异步）或 false（同步） 默认true

            * */
            xhttp.open("get", "/day17/JsAjaxGetServlet?name=汤姆&pwd=123")
            //4、发送请求
            xhttp.send();
            //5、获取响应信息
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    var str = this.responseText;
                    var msg = document.getElementById("msg");
                    msg.innerHTML = str;
                }

            }
        }
    }
</script>
<body>
    <%=new Date() %>
    <button id="jsAJAXget">使用JavaScript发送ajax的gat请求</button>
    <h2 style="color: blue" id="msg"></h2>
</body>
</html>

  • 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;

/**
 * @author: ChengLong
 * @version: 11.0.2
 * @datetime: 2021/8/24 10:30
 */
@WebServlet("/JsAjaxGetServlet")
public class JsAjaxGetServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        String name = req.getParameter("name");
        String pwd = req.getParameter("pwd");
        System.out.println(name+"==="+pwd);
        //响应流对象
        PrintWriter writer = resp.getWriter();
        writer.print("我爱Java");
    }
}

JavaScript发送Ajax的post请求示例

jsp页面

<%@ page import="java.util.Date" %><%--
  Created by IntelliJ IDEA.
  User: ChengLong
  Date: 2021/8/24
  Time: 11:00
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<head>
    <title>使用JavaScript发送ajax的post请求</title>
</head>
<script>
    /*点击id=jsAJAXpost按钮，发送异步请求=*/
    window.onload=function () {
        //1、获取id=jsAJAXget按钮
        var jsAJAXget = document.getElementById("jsAJAXpost");
        jsAJAXget.onclick = function () {
            //2、创建XMLHttpRequest
            var xhttp;
            if (window.XMLHttpRequest) {
                xhttp = new XMLHttpRequest();
            } else {
                // code for IE6, IE5
                xhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            //3、设置请求信息
            /*
            * open(method, url, async)
            规定请求

            method：请求类型 GET 或 POST
            url：文件位置
            async：true（异步）或 false（同步） 默认true

            * */
            xhttp.open("post", "/day17/JsAjaxPostServlet")
            //4、发送请求
            //对请求体中内容进行编码
            xhttp.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
            xhttp.send("name=汤姆&pwd=123");
            //5、获取响应信息
            xhttp.onreadystatechange = function () {
                if (this.readyState == 4 && this.status == 200) {
                    var str = this.responseText;
                    //把str转为json
                    var strObj = JSON.parse(str);
                    alert(strObj.name);
                    var msg = document.getElementById("msg");
                    msg.innerHTML = str;
                }

            }
        }
    }
</script>
<body>

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;

/**
 * @author: ChengLong
 * @version: 11.0.2
 * @datetime: 2021/8/24 11:02
 */
@WebServlet("/JsAjaxPostServlet")
public class JsAjaxPostServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        req.setCharacterEncoding("utf-8");
        String name = req.getParameter("name");
        String pwd = req.getParameter("pwd");
        System.out.println(name+"==="+pwd);
        //响应流对象
        PrintWriter writer = resp.getWriter();
        String json = "{\"name\":\"张三\",\"age\":18,\"性别\":\"男\",\"citys\":[\"武汉\",\"北京\"]}";
        writer.print(json);
    }
}

Json

简介

  • JSON是一种轻量级的数据交互格式

json使用

  • json语法格式

    • json数组：var json1=[值1, 值2, 值3, 值4…];
    • json对象 var json2={属性名1:属性值1, 属性名2:属性值2, 属性名3:属性值3…};
    • 注意：json的属性名称必须要使用双引号，属性值可接受的数据类型为:字符串，数字，布尔，数组，对象；

  • 定义json对象

    var json1={“name”:”张三”,”age”:18,”ischeck”:true,”citys”:[“武汉”,”北京”]};
var json2={"stu1":{"name":"张三","age":18},
			"stu2":{"name":"唐僧","age":50,"hobby":"念经"},
			"stu3":{"name":"八戒","age":500,"like":[
					{"name":"高翠兰","age":16},
					{"name":"嫦娥","age":300}]
			},
		  }

json字符串和json对象的相互转换

  • 语法

    • json字符串-->json对象：JSON.parse(json字符串);
    • json对象-->json字符串：JSON.stringify(json对象);

jackson使用

介绍

  • 可以把java对象和json字符串之间相互转换
  • Jackson是一种简洁方便的可以是对象和json之间相互转换的工具，使用此工具需导入三个jar包

对象转为json字符串

  • 语法

    • ObjectMapper om=new ObjectMapper();

    • String jsonStr=om.writeValueAsString(对象); //得到json字符串

      public void test1() throws JsonProcessingException {
        Book book = new Book(1,"css入门",80,"无");
        //把book对象转为json数据
        ObjectMapper objectmapper = new ObjectMapper();
        String json = objectmapper.writeValueAsString(book);
        System.out.println(json);

    }

列表转json字符串

public void test2() throws JsonProcessingException {
        List<Book> list = new ArrayList<>();
        list.add(new Book(1,"css入门",80,"无"));
        list.add(new Book(2,"java入门",90,"无"));
        list.add(new Book(3,"js入门",50,"无"));

        //把list对象转为json数据
        ObjectMapper objectmapper = new ObjectMapper();
        String json = objectmapper.writeValueAsString(list);
        System.out.println(json);

    }

集合转json字符串

  • 语法

    • ObjectMapper om=new ObjectMapper();
    • String jsonStr=om.writeValueAsString(集合); //得到json字符串
    public void test3() throws JsonProcessingException {
        HashMap<String,Book> map = new HashMap<>();
        map.put("aa",new Book(1,"css入门",80,"无"));
        map.put("bb",new Book(1,"java入门",90,"无"));
        map.put("cc",new Book(1,"js入门",50,"无"));

        //把map对象转为json数据
        ObjectMapper objectmapper = new ObjectMapper();
        String json = objectmapper.writeValueAsString(map);
        System.out.println(json);

    }

jQuery发送Ajax请求

$.ajax发送

  • jQuery.ajax(url,[settings])

    • type：请求的方式get/post

    • url：请求地址

    • data：请求携带的数据，可以是json对象{"属性":"属性值"}，也可以是普通的请求数据类型：属性名称=属性值

    • dataType：是响应的数据类型，可以是文本也可以是xml或者json，默认文本

    • success响应成功后的回调函数，响应数据会存放在方法的参数中

    • error：程序出现异常后会调用error中的方法

    • beforeSend：请求之前调用方法

    • complete：响应完成后调用

      jsp页面

    <%--
  Created by IntelliJ IDEA.
  User: ChengLong
  Date: 2021/8/24
  Time: 14:28
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>使用jQuery发送ajax请求</title>
</head>
    <script src="../js/jquery-1.7.2.js"></script>
    <script>
        /*回调函数

        如果要处理$.ajax()得到的数据，则需要使用回调函数。beforeSend、error、dataFilter、success、complete。

        beforeSend 在发送请求之前调用，并且传入一个XMLHttpRequest作为参数。
        error 在请求出错时调用。传入XMLHttpRequest对象，描述错误类型的字符串以及一个异常对象（如果有的话）
        dataFilter 在请求成功之后调用。传入返回的数据以及"dataType"参数的值。并且必须返回新的数据（可能是处理过的）传递给success回调函数。
        success 当请求之后调用。传入返回后的数据，以及包含成功代码的字符串。
        complete 当请求完成之后调用这个函数，无论成功或失败。传入XMLHttpRequest对象，以及一个包含成功或错误代码的字符串*/
        $(function () {
            $("#btn").click(function () {
                //发送ajax异步请求
                $.ajax({
                    //请求类型
                    type:"get",
                    //请求地址
                    url:"/day17/JqueryAjaxServlet",
                    // data:"name=张三&age=18",
                    //请求参数
                    data:{name:"张三",age:18},
                    //如果值为json，会自动把后台返回的json对象
                    dataType:"json",
                    //后台返回响应数据，会自动赋值到回调函数的result中,result就是后台返回响应的数据
                    success:function (result) {
                        alert(result.title);
                        alert(JSON.stringify(result));
                    },
                    error:function (XMLHttpRequest, textStatus, errorThrown) {
                        alert(XMLHttpRequest.status)
                        alert(textStatus)
                        alert(errorThrown)
                    },
                    beforeSend:function () {
                        //发送请求之前调用该方法
                        //用户点击按钮后，禁用按钮
                        $("#btn").attr("disabled","disabled")
                    },
                    complete:function () {
                        //响应成功后，解除禁用
                        $("#btn").removeAttr("disabled")
                    }
                })
            })
        })
    </script>
<body>
    <button id="btn">使用jQuery发送ajax请求</button>
</body>
</html>

    servlet页面

    import bean.Book;
import com.fasterxml.jackson.databind.ObjectMapper;

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;

/**
 * @author: ChengLong
 * @version: 11.0.2
 * @datetime: 2021/8/24 15:02
 */
@WebServlet("/JqueryAjaxServlet")
public class JqueryAjaxServlet extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        //获取请求数据
        String name = req.getParameter("name");
        String age = req.getParameter("age");
        System.out.println(name+"==="+age);

        //模拟空指针异常
       /* String x = null;
        if (x.equals("ssss")){
            System.out.println(111);
        }*/

       //模拟网络延迟
        /*try {
            Thread.sleep(3000);
        } catch (InterruptedException e) {
            e.printStackTrace();
        }*/
        ObjectMapper objectMapper = new ObjectMapper();
        //把book对象转为json字符串
        Book book = new Book(1,"AJAX",80,"无");
        String json = objectMapper.writeValueAsString(book);
        //把json字符串响应给浏览器
        resp.getWriter().print(json);

    }
}

$.get发送

  • $.get(url,[data],[callback],[type]??

    • url：请求地址

    • data请求携带的数据，可以是json对象{"属性":"属性值"}，也可以是普通的请求数据类型：属性名称=属性值

    • type：响应数据类型，可以是文本也可以是xml或者json，默认文本

    • callback：响应成功后的回调函数，响应数据会存放方法的参数中

      jsp页面

    <%--
  Created by IntelliJ IDEA.
  User: ChengLong
  Date: 2021/8/24
  Time: 15:29
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="../js/jquery-1.7.2.js"></script>
    <script>
        /*    url,[data],[callback],[type]
            url:待载入页面的URL地址

            data:待发送 Key/value 参数。

            callback:载入成功时回调函数。

            type:返回内容格式，xml, html, script, json, text, _default。*/
        $(function () {
            $("#btn").click(function () {
                // $.get("/JqueryAjaxGetServlet02","name=北京&age=18")
                // $.get("/JqueryAjaxGetServlet02", {"city": "北京", age: 18}, function (data) {}, "json")
                var url = "/day17/JqueryAjaxGetServlet02";
                var data = {"city": "北京", age: 18};
                var callback=function (result) {
                    alert(result);
                };
                var type="json";
                $.get(url,data,callback,type);
            })
        })
    </script>
</head>

<body>
<button id="btn">使用jQuery发送ajax的get请求</button>
</body>
</html>

    servlet页面

    import bean.Book;
import com.fasterxml.jackson.databind.ObjectMapper;

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;

/**
 * @author: ChengLong
 * @version: 11.0.2
 * @datetime: 2021/8/24 15:37
 */
@WebServlet("/JqueryAjaxGetServlet02")
public class JqueryAjaxGetServlet02 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        String city = req.getParameter("city");
        String age = req.getParameter("age");
        System.out.println(city+"==="+age);
        //返回响应数据
        ObjectMapper objectMapper = new ObjectMapper();
        //把book对象转为json字符串
        Book book = new Book(1,"AJAX",80,"无");
        String json = objectMapper.writeValueAsString(book);
        //把json字符串响应给浏览器
        resp.getWriter().print(json);

    }
}

$.post发送

    1. $.post(url,[data],[callback],[type]);
    • url：请求地址
    • data请求携带的数据，可以是json对象{"属性":"属性值"}，也可以是普通的请求数据类型：属性名称=属性值
    • type：响应数据类型，可以是文本也可以是xml或者json，默认文本
    • callback：响应成功后的回调函数，响应数据会存放方法的参数中

    jsp页面

    <%--
  Created by IntelliJ IDEA.
  User: ChengLong
  Date: 2021/8/24
  Time: 15:46
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
    <script src="../js/jquery-1.7.2.js"></script>
    <script>
        /*    url,[data],[callback],[type]
            url:待载入页面的URL地址

            data:待发送 Key/value 参数。

            callback:载入成功时回调函数。

            type:返回内容格式，xml, html, script, json, text, _default。*/
        $(function () {
            $("#btn").click(function () {
                // $.post("/JqueryAjaxGetServlet02","name=北京&age=18")
                // $.post("/JqueryAjaxGetServlet02", {"city": "北京", age: 18}, function (data) {}, "json")
                var url = "/day17/JqueryAjaxGetServlet03";
                var data = {"city":"北京", age:18};
                var callback=function (result) {
                    //JSON转换为字符串
                    alert(JSON.stringify(result));
                };
                var type="json";
                $.post(url,data,callback,type);
            })
        })
    </script>
</head>
<body>
<button id="btn">使用jQuery发送ajax的post请求</button>
</body>
</html>

    servlet页面

import bean.Book;
import com.fasterxml.jackson.databind.ObjectMapper;

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;

/**
 * @author: ChengLong
 * @version: 11.0.2
 * @datetime: 2021/8/24 15:47
 */
@WebServlet("/JqueryAjaxGetServlet03")
public class JqueryAjaxPostServlet03 extends HttpServlet {
    @Override
    protected void service(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        resp.setContentType("text/html;charset=utf-8");
        req.setCharacterEncoding("utf-8");
        String city = req.getParameter("city");
        String age = req.getParameter("age");
        System.out.println(city+"==="+age);
        //返回响应数据
        ObjectMapper objectMapper = new ObjectMapper();
        //把book对象转为json字符串
        Book book = new Book(1,"AJAX入门使用",80,"无");
        String json = objectMapper.writeValueAsString(book);
        //把json字符串响应给浏览器
        resp.getWriter().print(json);

    }
}

Ajax

原文：https://www.cnblogs.com/chenglong0201/p/15182605.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
分享档案
更多>
2021年09月23日 (328)
2021年09月24日 (313)
2021年09月17日 (191)
2021年09月15日 (369)
2021年09月16日 (411)
2021年09月13日 (439)
2021年09月11日 (398)
2021年09月12日 (393)
2021年09月10日 (160)
2021年09月08日 (222)
最新文章
更多>
教程昨日排行
更多>
友情链接
汇智网   PHP教程   插件网  
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣，分享程序人生！