本站消息

站长简介/公众号

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

java大师

2700

文章

1395021

访问

+关注

分类

暂无分类

日期归档

暂无数据

技术点17：AJAX请求

发布于2020-11-19 20:48 阅读(905) 评论(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);
    }