本站消息

站长简介/公众号


站长简介:逗比程序员,理工宅男,前每日优鲜python全栈开发工程师,利用周末时间开发出本站,欢迎关注我的微信公众号:程序员总部,程序员的家,探索程序员的人生之路!分享IT最新技术,关注行业最新动向,让你永不落伍。了解同行们的工资,生活工作中的酸甜苦辣,谋求程序员的最终出路!

  价值13000svip视频教程,java大神匠心打造,零基础java开发工程师视频教程全套,基础+进阶+项目实战,包含课件和源码

  出租广告位,需要合作请联系站长


+关注
已关注

分类  

暂无分类

标签  

暂无标签

日期归档  

2020-11(403)

2020-12(497)

2021-01(423)

2021-02(280)

2021-03(351)

技术点17:AJAX请求

发布于2020-11-19 20:48     阅读(306)     评论(0)     点赞(3)     收藏(3)


AJAX 请求

一、什么是 AJAX 请求

  AJAX 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式网页应用的网页开发技术。
  ajax 是一种浏览器通过 js 异步发起请求,局部更新页面的技术。
  Ajax 请求的局部更新,浏览器地址栏不会发生变化。
  局部更新不会舍弃原来页面的内容。
 

二、原生 AJAX 请求的示例

在ajax.html页面发送Ajax请求:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
        <meta http-equiv="pragma" content="no-cache" />
        <meta http-equiv="cache-control" content="no-cache" />
        <meta http-equiv="Expires" content="0" />
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Insert title here</title>
        <script type="text/javascript">
            function ajaxRequest() {
//                 1、我们首先要创建XMLHttpRequest 
                var xmlHttpRequest = new XMLHttpRequest();
//                 2、调用open方法设置请求参数
                xmlHttpRequest.open("GET", "http://localhost:8080/16_json_ajax_i18n/ajaxServlet?action=javaScriptAjax", true);
//                 4、在send方法前绑定onreadystatechange事件,处理请求完成后的操作。
                xmlHttpRequest.onreadystatechange = function(){
                    if (xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
                        var jsonObj = JSON.parse(xmlHttpRequest.responseText);
                        //把响应的数据显示在页面上
                        document.getElementById("div01").innerHTML = "编号:" + jsonObj.id + ", 姓名:" + jsonObj.name;
                    }
                };
//                 3、调用send方法发送请求
                xmlHttpRequest.send();

            }
        </script>
    </head>
    <body>    
        <button onclick="ajaxRequest()">ajax request</button>
        <div id="div01">
        </div>
    </body>
</html>

创建AjaxServlet程序接收Ajax请求并响应数据:

package com.zixue.servlet;

import com.google.gson.Gson;
import com.zixue.bean.Person;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * @author Mr Guo
 * @create 2020-11-18 10:48
 */
public class AjaxServlet extends BaseServlet {
    protected void javaScriptAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("Ajax请求过来了。");
        Person person = new Person(1, "郭鹏");
        //json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
        resp.getWriter().write(personJsonString);
    }
}

访问效果:

三、jQuery 中的 AJAX 请求

3.1、$.ajax 方法

url     表示请求的地址
type  表示请求的类型 GET 或 POST 请求
data  表示发送给服务器的数据
  格式有两种:
    一:name=value&name=value
    二:{key:value}
success  请求成功,响应的回调函数
dataType  响应的数据类型
  常用的数据类型有:
    text 表示纯文本
    xml 表示 xml 数据
    json 表示 json 对象

示例:

// ajax请求
                $("#ajaxBtn").click(function(){
                    $.ajax({
                        url: "http://localhost:8080/16_json_ajax_i18n/ajaxServlet",
                        type: "GET",
                        // data: "action=jQueryAjax",
                        data: {action:"jQueryAjax"},
                        success: function (data) {
                            //如果dataType的类型为text
                            var jsonObj = JSON.parse(data);
                            $("#div888").html("编号:" + jsonObj.id + ", 姓名:" + jsonObj.name);
                            //如果dataType的类型为json
                            // $("#div888").html("编号:" + data.id + ", 姓名:" + data.name);
                        },
                        dataType: "text"
                    });

                });

请求的Servlet程序:

protected void jQueryAjax(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("jQueryAjax请求过来了。");
        Person person = new Person(1, "郭鹏");
        //json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
        resp.getWriter().write(personJsonString);
    }

效果:

3.2、$.get 方法和$.post 方法

url       请求的 url 地址
data    发送的数据
callback   成功的回调函数
type    返回响应的数据类型
// ajax--get请求
                $("#getBtn").click(function(){
                    $.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet", "action=jQueryGet", function (data) {
                        $("#div888").html("get 编号:" + data.id + ", 姓名:" + data.name);
                    }, "json");
                    
                });
                
                // ajax--post请求
                $("#postBtn").click(function(){
                    // post请求
                    $.get("http://localhost:8080/16_json_ajax_i18n/ajaxServlet", "action=jQueryPost", function (data) {
                        $("#div888").html("Post 编号:" + data.id + ", 姓名:" + data.name);
                    }, "json");
                    
                });

3.3、$.getJSON 方法

url    请求的 url 地址
data    发送给服务器的数据
callback   成功的回调函数
                // ajax--getJson请求
                $("#getJSONBtn").click(function(){
                    // 调用
                    $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet", "action=jQueryGetJSON", function (data) {
                        $("#div888").html("getJSON 编号:" + data.id + ", 姓名:" + data.name);
                    });

                });

3.4、表单序列化 serialize()

serialize()可以把表单中所有表单项的内容都获取到,并以 name=value&name=value 的形式进行拼接。

ajax请求:

// ajax请求
                $("#submit").click(function(){
                    // 调用
                    $.getJSON("http://localhost:8080/16_json_ajax_i18n/ajaxServlet", "action=jQuerySerialize&" + $("#form01").serialize(), function (data) {
                        $("#div888").html("Serialize 编号:" + data.id + ", 姓名:" + data.name);
                    });
                });

Servlet程序:

    protected void jQuerySerialize(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("jQuerySerialize 请求过来了。");
        System.out.println(req.getParameter("username"));
        System.out.println(req.getParameter("password"));
        Person person = new Person(1, "郭鹏");
        //json格式的字符串
        Gson gson = new Gson();
        String personJsonString = gson.toJson(person);
        resp.getWriter().write(personJsonString);
    }

访问:

 

控制台:

 

 

 

原文链接:https://www.cnblogs.com/897463196-a/p/13995320.html



所属网站分类: 技术文章 > 博客

作者:java大师

链接:http://www.javaheidong.com/blog/article/1142/455a4e28d3ca935fb503/

来源:java黑洞网

任何形式的转载都请注明出处,如有侵权 一经发现 必将追究其法律责任

3 0
收藏该文
已收藏

评论内容:(最多支持255个字符)