Ajax

最新推荐文章于 2024-11-04 16:42:12 发布

占枫

最新推荐文章于 2024-11-04 16:42:12 发布

阅读量65

点赞数 1

文章标签： ajax javascript 前端

本文链接：https://blog.csdn.net/m0_72041293/article/details/129803471

版权

一、Ajax 的概念

AJAX 即 "Asynchronous Javascript And XML"

(异步 JavaScript 和 XML)，是指一种创建交互式

网页应用的网页开发技术

ajax 是一种浏览器异步发起请求，局部更新页

面的技术

二、javaScript 原生 Ajax 请求

原生的 Ajax 请求：

① 先创建 XMLHttpRequest 对象

② 调用 open 方法设置请求参数

③ 调用 send 方法发送请求

④ 在 send 方法前绑定 onreadystatechange

事件，处理请求完成后的操作

1. 创建一个 html 页面，发起请求

<!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 xhr = new XMLHttpRequest();
//             2、调用 open 方法设置请求参数
                xhr.open("GET","ajaxServlet?action=javaScriptAjax&a="+new Date(),true);
//             4、在 send 方法前绑定 onreadystatechange 事件，处理请求完成后的操作。
                xhr.onreadystatechange = function() {
                    // 判断请求完成，并且成功
                    if (xhr.readyState == 4 && xhr.status == 200) {
                        document.getElementById("div01").innerHTML = xhr.responseText;
                    }
                }
//             3、调用 send 方法发送请求
                xhr.send();
            }
        </script>
    </head>
    <body>
        <button onclick="ajaxRequest()">ajax request</button>
        <div id="div01">
        </div>
    </body>
</html>

2. 创建一个 AjaxServlet 程序接收请求

package com.zh.servlet;

import java.io.IOException;
import java.util.Random;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import com.zh.gson.GsonTest;
import com.google.gson.Gson

public class AjaxServlet extends BaseServlet {
    private static final long serialVersionUID = 1L;

    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse
response)
            throws ServletException, IOException {
        System.out.println("ajax 请求过来了 a--" + request.getParameter("a"));
        Random random = new Random(System.currentTimeMillis());
        // 使用随机数，可以让客户端看到变化
        response.getWriter().write(
                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
    }
}

3. 在 web.xml 文件中的配置：

<servlet>
    <servlet-name>AjaxServlet</servlet-name>
    <servlet-class>com.zh.servlet.AjaxServlet</servlet-class>
</servlet>
<servlet-mapping>
    <servlet-name>AjaxServlet</servlet-name>
    <url-pattern>/ajaxServlet</url-pattern>
</servlet-mapping>

三、JQuery 的 Ajax 请求

1. 四个 Ajax 请求方法

$.ajax 方法

$.get 方法

$.post 方法

$.getJSON 方法

一个表单序列化的方法：

serialize() 表单序列化方法

2. 使用以上五个方法

在 JQuery 中和 Ajax 请求有关的方法有四个

(1) $.ajax 请求参数：

url ：请求的地址

type : 请求的方式 get 或 post

data : 请求的参数 string 或 json

success : 成功的回调函数

dataType : 返回的数据类型常用 json 或 text

(2) $.get 请求和 $.post 请求

下面的方法必须遵守参数的顺序

url :请求的 URL 地址

data :待发送 Key/value 参数

callback :载入成功时回调函数

type :返回内容格式， xml, html, script, json, text

(3) Jquery 的 $.getJSON

url : 待载入页面的 URL 地址

data : 待发送 Key/value 参数。

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

(4) 表单的序列化

serialize() 方法可以把一个 form 表单项，都以

字符串 name=value&name=value 的形式进行

拼接，省去很多不必要的工作

由于 $.get、$.post 和 $getJSON 这三个方法的底

层都是直接或间接地使用 $.ajax() 方法来实现地异

步请求的调用，所以我们以 $.ajax() 方法的使用为

例

1) Jquery_Ajax_request.html 的代码如下：

<!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" src="script/jquery-1.7.2.js"></script>
        <script type="text/javascript">
            $(function(){
                // ajax 请求
                $("#ajaxBtn").click(function(){
                    $.ajax({
                        url : "ajaxServlet",  // 请求地址
                        error:function(){     // 请求失败回调
                            alert("请求失败");
                        },
                        success:function(data){ // 请求成功回调
                            alert( data );
                        },
                        type:"POST",         // 请求的方式
                        dataType:"json",     // 返回的数据类型为 json 对象
                        data:{               // 请求的参数
                            action:"jqueryAjax",
                            a:12,
                            date: new Date()
                        }
                    });
                });

                // ajax--get 请求
                $("#getBtn").click(function(){
                    $.get(
                        "ajaxServlet",{
                            action:"jqueryGet",
                            a:12,
                            date:new Date()
                         },function(data){alert(data);},"json"
                    );
                });

                // ajax--post 请求
                $("#postBtn").click(function(){
                    // post 请求
                    $.post(
                        "ajaxServlet", // 请求路径
                        {              // 请求参数
                            action:"jqueryPost",
                            a:12,
                            date:new Date()
                        },
                        function(data){ alert( data ) }, // 成功的回调函数
                        "text"                           // 返回的数据类型
                    );
                });

                // ajax--getJson 请求
                $("#getJsonBtn").click(function(){
                    // 调用
                    $.getJSON(
                        "ajaxServlet", // 请求路径
                        {              // 请求参数
                            action:"jqueryGetJSON",
                            a:12,
                            date:new Date()
                        },
                        function(data){ alert( data ) } // 成功的回调函数
                    );
                });

                // ajax 请求
                $("#submit").click(function(){
                    // 把参数序列化
                    var data = $("#form01").serialize();
                    alert(data);
                });
            });
        </script>
    </head>
    <body>
        <div>
            <button id="ajaxBtn">$.ajax 请求</button>
            <button id="getBtn">$.get 请求</button>
            <button id="postBtn">$.post 请求</button>
            <button id="getJsonBtn">$.getJSON 请求</button>
        </div>
        <br/><br/>
        <form id="form01" >
            用户名：<input name="username" type="text" /><br/>
            密码：<input name="password" type="password" /><br/>
            下拉单选：<select name="single">
                <option value="Single">Single</option>
                <option value="Single2">Single2</option>
            </select><br/>
            下拉多选：
            <select name="multiple" multiple="multiple">
                <option selected="selected" value="Multiple">Multiple</option>
                <option value="Multiple2">Multiple2</option>
                <option selected="selected" value="Multiple3">Multiple3</option>
            </select><br/>
            复选：
            <input type="checkbox" name="check" value="check1"/> check1
            <input type="checkbox" name="check" value="check2" checked="checked"/>
check2<br/>
            单选：
            <input type="radio" name="radio" value="radio1" checked="checked"/> radio1
            <input type="radio" name="radio" value="radio2"/> radio2<br/>
            <input id="submit" type="submit" />
        </form>
    </body>
</html>

2) AjaxServlet 的代码如下：

package com.zh.servlet;

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

import com.atguigu.gson.GsonTest;
import com.google.gson.Gson;

public class AjaxServlet extends BaseServlet {
    private static final long serialVersionUID = 1L;

    protected void javaScriptAjax(HttpServletRequest request, HttpServletResponse
response)
            throws ServletException, IOException {
        System.out.println("ajax 请求过来了 a--" + request.getParameter("a"));
        Random random = new Random(System.currentTimeMillis());
        // 使用随机数，可以让客户端看到变化
        response.getWriter().write(
                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}

    protected void jqueryAjax(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    System.out.println("jqueryAjax 请求过来了 a--" + request.getParameter("a"));
    Random random = new Random(System.currentTimeMillis());
    // 使用随机数，可以让客户端看到变化
    response.getWriter().write(
            new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}

    protected void jqueryGet(HttpServletRequest request, HttpServletResponse response)
        throws ServletException, IOException {
    System.out.println("jqueryGet 请求过来了 a--" + request.getParameter("a"));
    Random random = new Random(System.currentTimeMillis());
    // 使用随机数，可以让客户端看到变化
    response.getWriter().write(
            new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}

    protected void jqueryPost(HttpServletRequest request, HttpServletResponse response)
            throws ServletException, IOException {
        System.out.println("jqueryPost 请求过来了 a--" + request.getParameter("a"));
        Random random = new Random(System.currentTimeMillis());
        // 使用随机数，可以让客户端看到变化
        response.getWriter().write(
                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
}

    protected void jqueryGetJSON(HttpServletRequest request, HttpServletResponse
response)
            throws ServletException, IOException {
        System.out.println("jqueryGetJSON 请求过来了 a--" +         request.getParameter("a"));
        Random random = new Random(System.currentTimeMillis());
        // 使用随机数，可以让客户端看到变化
        response.getWriter().write(
                new Gson().toJson(new GsonTest.Person(random.nextInt(100), "12312")));
    }
}