Ajax使用流程

Ajax在不刷新页面的情况下,进行页面局部更新。

Ajax使用流程:

  1. 创建XmlHttpReqeust对象
  2. 发送Ajax请求
  3. 处理服务器响应

1. 创建XmlHttpReqeust对象

XmlHttpReqeust对象是Ajax的核心,使用该对象发起请求,接收响应

不同的浏览器创建方式不相同:

2. 发送Ajax请求

  • xmlhttp.open()创建请求
  • xmlhttp.send()发送到服务器

3. 处理服务器响应

  • xmlhttp.onreadystatechange()事件用来监听Ajax执行过程
  • xmlhttp.readyState属性说明XMLHttpRequest当前状态
  • xmlhttp.status属性代表服务器响应状态码

JSON语法规则

  • 数据由key:value键值对描述
  • {}代表一个完整对象,拥有多个键值对
  • []保存数组,多个对象之间使用,分隔

JSON是一种轻量级文本数据交换格式,javascript天然支持JSON。

Ajax+JSON开发模式:

JSON序列化组件Jackson

xml 复制代码
		<dependency>
			<!--添加jackson依赖-->
            <groupId>com.fasterxml.jackson.core</groupId>
            <artifactId>jackson-databind</artifactId>
            <version>2.12.3</version>
        </dependency>

将对象序列化为JSON字符串:

发起Ajax请求并处理响应

Ajax组件库-axios

http://axios-js.com/zh-cn/docs/

axios简化了Ajax的操作

axios发送GET请求:

axios发送POST请求:

Ajax默认是异步的方式执行。

Ajax同步和异步的区别:

  • 同步是在服务器未返回JSON前,JS程序一直处于阻塞状态
  • 异步是在服务器未返回JSON前,JS程序不阻塞,Ajax通过回调获取结果

Ajax同步方式请求:

因为是同步方式,监听事件不会被执行,当代码顺序执行到这一行时,说明请求已经返回

Ajax实现二级联动菜单:

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/js/axios.js"></script>
</head>
<body>
    <select id="lv1" style="width:200px;height:30px">
        <option value="-1" selected>请选择</option>
    </select>
    <select id="lv2" style="width:200px;height:30px"></select>

<script>
    var lv1=document.getElementById("lv1");
    axios.get("/channel",{params:{"level":1}})
    .then(function(response){
        var json=response.data;
        for(var i=0;i<json.length;i++){
            var channel=json[i];
            lv1.options.add(new Option(channel.name,channel.code))
        }
    }).catch(function(error){
    });
    var lv2=document.getElementById("lv2");
    lv1.onchange=function(){
        axios.get("/channel",{params:{"level":2,"parent":lv1.value}})
        .then(function(response){
            var json=response.data;
            lv2.length=0;//	清除二级菜单原来的数据
            for(var j=0;j<json.length;j++) {
                lv2.options.add(new Option(json[j].name,json[j].code))
            }
        }).catch(function(error){
        });
    }
</script>
</body>
</html>
java 复制代码
package ajax.servlet;

import ajax.entity.Channel;
import com.fasterxml.jackson.databind.ObjectMapper;

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;
import java.util.ArrayList;
import java.util.List;

@WebServlet("/channel")
public class ChannelServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String level = req.getParameter("level");
        String parent = req.getParameter("parent");
        List<Channel> chlist=new ArrayList<>();
        if(level.equals("1")){
            chlist.add(new Channel("ai","人工智能"));
            chlist.add(new Channel("web","前端开发"));
        }else if(level.equals("2")){
            if(parent.equals("ai")){
                chlist.add(new Channel("dl","深度学习"));
                chlist.add(new Channel("cv","计算机视觉"));
                chlist.add(new Channel("nlp","自然语言处理"));
            }else if(parent.equals("web")){
                chlist.add(new Channel("html","超文本标记语言"));
                chlist.add(new Channel("css","级联样式表"));
                chlist.add(new Channel("js","javascript脚本"));
            }
        }
        ObjectMapper objectMapper=new ObjectMapper();
        String json=objectMapper.writeValueAsString(chlist);
        resp.setContentType("application/json;charset=utf-8");
        resp.getWriter().println(json);
    }
}
相关推荐
2503_928411562 天前
9.8 ajax+php基础语法
ajax·okhttp·php
Yvonne爱编码3 天前
简述ajax、node.js、webpack、git
前端·git·ajax·webpack·node.js·visual studio
长城20246 天前
jQuery的$.Ajax方法分析
ajax·jquery·异步提交
芜青7 天前
JavaScript手录进阶01-跨域问题
开发语言·javascript·ajax·ecmascript
长城20247 天前
JavaScript中的XMLHttpRequest对象分析
开发语言·javascript·ajax·xmlhttprequest·xhr·ajax技术
JosieBook7 天前
【SpringBoot】20 - SpringBoot中的Ajax和MyBatis究竟是什么?
spring boot·ajax·mybatis
苏纪云8 天前
Ajax笔记(下)
前端·javascript·笔记·ajax
IT 前端 张8 天前
Axios与Ajax:现代Web请求大比拼
前端·javascript·ajax
知识分享小能手13 天前
React学习教程,从入门到精通, React教程:构建你的第一个 React 应用(1)
前端·javascript·vue.js·学习·react.js·ajax·前端框架
wuzuyu36513 天前
SyntaxError: Failed to execute ‘open‘ on ‘XMLHttpRequest‘: Invalid URL
ajax·html·api