使用ajax的几种常用方式

最新推荐文章于 2022-03-09 19:51:00 发布

老f现在也猛啊

最新推荐文章于 2022-03-09 19:51:00 发布

阅读量286

点赞数

分类专栏：学习备忘文章标签： ajax java

本文链接：https://blog.csdn.net/qq_35994105/article/details/105588033

版权

学习备忘专栏收录该内容

1 篇文章 0 订阅

订阅专栏

使用ajax（Asynchronous JavaScript and XML）的几种常用方式

Ajax使用

Ajax使用

由于公司封装了一些Ajax的使用方法，在开发中使用Ajax时基本都是照搬，现在来重新系统的学习一下Ajax相关的知识，以下的都是基于原生的Servlet的例子。

使用js进行ajax

先看前台

<body>
        验证账号重复：<input type="text" id="account" />
        <input type="button" onclick="ajaxTest()">
</body>
<script>
    function ajaxTest(){
        var account = document.getElementById("account").value;
        //通过ajax异步方式请求服务端
        //变量之前没有写 var 表示该对象是一个全局对象
        xmlHttpRequest = new XMLHttpRequest();
        //设置xmlHttpRequest回调函数(函数名不需要写括号)
        xmlHttpRequest.onreadystatechange = callBack;
        xmlHttpRequest.open("post","ajaxTestServlet",true);
        //不加上这句，那么后台Request.Form获取不到参数a,b的数值
        //头信息要写在open下面
        xmlHttpRequest.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
        xmlHttpRequest.send("account="+account);
    }

    //接受服务端的返回值
    function callBack(){
        //xmlHttpRequest对象的属性：
        //readyState:请求状态
        //status:相应状态
        if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
            var data = xmlHttpRequest.responseText;//服务端返回值为String格式
            if(data == "testTrue"){
                alert("存在");
            }else{
                alert("不存在");
            }
        }

    }
</script>

需要注意的是xmlHttpRequest对象的readyState与status属性有多个值，其中readyState为4，status值为200时才是正常返回了的状态。
status为Http相应中的状态码

状态码	含义
200	服务器正常相应
400	无法找到请求的资源
403	没有访问权限
404	访问的资源不存在
500	服务器内部错误

readyState表示XMLHttpRequest对象发送的HTTP请求状态

状态码	含义
0	表示XMLHttpRequest未被初始化
1	XMLHttpRequest对象开始发送请求，已经执行了open()方法
2	XMLHttpRequest对象已经发送请求，已经执行了send()方法，但还没有接收到响应。
3	XMLHttpRequest开始读取响应信息，已经接收到HTTP响应头信息，但还没有接受完成
4	全部读取完毕

再看后台

package com.sun.servlet;



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

public class AjaxTestServlet extends HttpServlet {

    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        //设置请求/相应的编码格式
        req.setCharacterEncoding("utf-8");
        resp.setCharacterEncoding("utf-8");
        resp.setContentType("text/html;charset=UTF-8");
        //获取参数值
        String account = req.getParameter("account");
        //获取输出流（通过输出流的方式返回给客户端）
        PrintWriter writer = resp.getWriter();
        //模拟验证
        if("test".equals(account)){
            writer.write("testTrue");
        }else{
            writer.write("testFalse");
        }
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        System.out.println("....doPost....");
        doGet(req,resp);
    }

}

这种方法非常麻烦，目前Jquery已经封装了方便的使用Ajax的方式。

使用Jquery（推荐）

Jquery本质上其实是对js进行了封装，但是这种方法使用起来非常方便。Jquery使用的版本是1.8.3

下面展示一些 内联代码片。

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>111</title>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>

</head>
<body>
验证账号重复：<input type="text" id="account" />
<input type="button" onclick="ajaxTest()">
</body>

<script>

    function ajaxTest(){
        var account = $("#account").val();
        $.ajax({
            url:"ajaxTestServlet",
            type:"get",
            data:"account="+account,
            //result返回值，
            //testStatus返回状态
            success:function(result,testStatus){

            },
            //如果服务端发生异常则进入error
            error:function(xhr,errorMessage,e){

            }

        });
        //以下为固定的格式
        // $.ajax({
        //     url:地址,
        //     type:get | post,
        //     data:请求数据,
        //     //result返回值，
        //     //testStatus返回状态
        //     success:function(result,testStatus){
        //     },
        //     error:function(xhr,errorMessage,e){
        //     }
        // });
    }
</script>
</html>

这里只举了常用的使用方法，其中error:function(xhr,errorMessage,e)中的三个参数可选，可以不写。

Jquery($.get/)

这种方式需要注意的是参数值的顺序是严格规定不能换顺序。
以下为$.get方式的固定格式。
下面展示一些 内联代码片。

$.get(
    服务器地址,
    请求数据,
    function(result){

    },
     预期返回值类型（"xml","json","text"）
);

$.post格式跟get格式一样

<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>111</title>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script src="http://libs.baidu.com/jquery/1.8.3/jquery.js"></script>

</head>
<body>
验证账号重复：<input type="text" id="account" />
<input type="button" onclick="ajaxTest()">
</body>

<script>

    function ajaxTest(){



        var account = $("#account").val();
        $.post(
            "ajaxTestServlet",
            "account="+account,
            function(result){
                alert(result);
            },
             "text"
        );
       }
 </script>
</html>

老f现在也猛啊

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
使用ajax的几种常用方式

这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入欢迎使用Ma...
复制链接

扫一扫