1.Ajax

作用：

（1）网页异步、局部更新的JS组件

（2）模拟Http请求，处理Http响应

（3）模拟所有请求类型、所有mime类型以及文件上传、下载、跨域请求

如何使用JQuery提供的Ajax组件完成Http请求和响应的处理

（1）如何编写Ajax

++ 引入JQuery

<script src="../../lib/jquery-3.6.0-min.js" type="text/javascript"></script>

++ 编写ajax内容（编写js内容）

前端部分

<button onclick="toAjax()">调用ajax</button>

<select id="mySelect">
    <option value="0">--请选择--</option>
</select>

<script>

    function toAjax(){
        //调用一个ajax
        $.ajax({
            url:"http://localhost:8080/JavaServletDemo/textServlet",
            type:"GET",
            data:{name:"马花子"},
            dataType:"JSON",
            success:function(data){
                console.dir(data);
                for(var i in data.data){
                    $("#mySelect").append("<option value='"+i+"'>"+data.data[i].name+"</option>")
                }
            },
            error:function(XMLHttpRequest, textStatus, errorThrown){
                console.dir("请求失败！");
            }
        });
    }

</script>

后端Servlet部分：

 @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {

        Result res = new Result();

        req.setCharacterEncoding("UTF-8");
        resp.setCharacterEncoding("UTF-8");

        resp.setContentType("application/json;charset=UTF-8");

        PrintWriter writer = resp.getWriter();

        List<Map<String,String>> list = new ArrayList<>();

        for(int i=0;i<5;i++){
            Map<String,String> map = new HashMap<>();
            map.put("name","昆明"+(i+1));
            list.add(map);
        }



        res.setData(list);

        writer.print(res.toString());
        writer.flush();
        writer.close();

    }

(2)ajax的组成

ajax是$,JQuery对象的一个ajax()方法

$.ajax();

配置属性：

url: 请求地址，要求为String类型的参数，（默认为当前页地址）发送请求的地址。

type: 请求类型，GET、POST，默认为GET

timeout：最长请求时间，单位毫秒，是Number类型

async：异步参数：true=》异步执行（默认），false=》同步执行

data：参数属性：传入一个JSON对象，如 data：{userID：1}

dataType：预期服务端响应数据类型，主要有：JSON、HTML、TEXT、JSONP

contentType： 设置请求的mime类型，application/json

配置回调函数：

beforeSend : 发送前的回调

beforeSend:function(XMLHttpRequest){
    //在执行前会被调用
}

complete：请求完成之后回调方法（不管请求成功或失败都执行）

complete:function(XMLHttpRequest,textStatus){
    //在执行后会被调用（不管请求成功或失败都执行）
}

success：请求成功发送，响应成功接收

success:function(data, textStatus){
            //data可能是xmlDoc、jsonObj、html、text等等
            //textStatus ajax执行状态编码
}

error：请求失败，无法接收正常响应时调用

error:function(XMLHttpRequest, textStatus, errorThrown){
          //通常情况下textStatus和errorThrown只有其中一个包含信息
          //调用本次ajax请求时传递的options参数
          //errorThrown : 异常对象
}

标签：function,textStatus,调用,请求,data,ajax,Ajax,JSP,Servlet
来源： https://www.cnblogs.com/DQGonoes/p/15722816.html