Ajax 详解

Ajax 即"Asynchronous Javascript And XML"(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
通过在后台与服务器进行少量数据交换,Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
产品链: H5+网页+客户端+手机端(Android IOS)+小程序
jQuery Ajax本质就是XMLHttpRequest 其进行了封装

原生XMLHttpRequest

function getXMLHttpRequest() {
    var xmlHttp;
    if (window.XMLHttpRequest) {
        xmlHttp = new XMLHttpRequest;
    } else {
        xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xmlHttp;
}
window.onload = function() {
    // 1.获取XMLHttpRequest对象
    var req = getXMLHttpRequest();
    // 4.相应结果 回调函数 是否连接成功
    req.onreadystatechange = function() {
        if (req.readyState == 4) {
            if (req.status == 200) {
                // 服务器反应正常
                // 获取服务器返回的值
                code = req.responseText;
                // icanci.alert('温馨提示', code, 'favicon');
            }
        }
    }
    // 2.建立连接
    req.open("get", "/user/outputcode?" + new Date().getTime()); // 添加随机数
    // 获取不同的session
    // 避免重复
    // 3.发送请求
    req.send(null);
}

jQuery Ajax

  • 所有参数
  • url:等待加载页面的URL地址
  • data:待发送数据的 key/value参数
  • success:载入成功的时候回掉函数
  • dataType:参数格式
  • data:封装了服务器返回的数
  • status:状态
案例
导入jQuery 库
添加依赖
 
            org.springframework
            spring-webmvc
            5.0.2.RELEASE
        
        
            org.springframework
            spring-web
            5.0.2.RELEASE
        
        
            javax.servlet
            javax.servlet-api
            3.1.0
        
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    Ajax

<%--路径问题--%>




<%--  onblur 失去焦点产生事件  --%>
用户名: 


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


    List User




姓名 年龄 性别
<%@ page contentType="text/html;charset=UTF-8" language="java" %>


    index4





    

用户名:

密码:

package cn.icanci.contorller;

import cn.icanci.pojo.User;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.http.HttpServletResponse;
import java.util.ArrayList;
import java.util.List;

/**
 * @Author: icanci
 * @ProjectName: json
 * @PackageName: cn.icanci.contorller
 * @Date: Created in 2020/2/22 7:51
 * @ClassAction: Ajax 测试
 */
@Controller
@RequestMapping("/ajax")
public class AjaxController {

    //1.第一种方式,服务器要返回字符串

    @RequestMapping("/a1")
    public void ajax(String name, HttpServletResponse response) throws Exception {
        response.setContentType("text/html;charset=utf-8");
        if ("admin".equals(name)) {
            response.getWriter().println("true");
        } else {
            response.getWriter().println("false");
        }
    }


    //返回list集合

    @RequestMapping("/a2")
    @ResponseBody
    public List ajax2() {
        User user = new User("嘻嘻嘻", 12, "女");
        List list = new ArrayList<>();
        list.add(user);
        list.add(user);
        list.add(user);
        list.add(user);
        list.add(user);
        //由于加了   @ResponseBody  会返回字符串
        return list;
    }


    @RequestMapping("/a3")
    @ResponseBody
    public String ajax3(String name, String pwd) {
        String msg = "";
        if (name != null) {
            if ("admin".equals(name)){
                msg ="ok";
            }else{
                msg="用户名有误";
            }
        }
        if (pwd!= null) {
            if ("123456".equals(pwd)){
                msg ="ok";
            }else{
                msg="密码有误";
            }
        }
        return msg;
    }
}

测试结果

Ajax 详解_第1张图片
测试结果1

Ajax 详解_第2张图片
测试结果2

Ajax 详解_第3张图片
测试结果2

Ajax 详解_第4张图片
测试结果3

总结:

1.编写对应处理的Controller,返回消息字符串或者JSON格式数据>

2.编写Ajax请求.

  • url:Controller请求路径
  • data:发送的键值对
  • success:回掉函数

3.给Ajax绑定事件.点击 click,失去焦点 onblur,键盘弹起

你可能感兴趣的:(Ajax 详解)