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;
    }
}

测试结果