• Web基础 ( 六 ) AJAX

    4.7.AJAX

    4.7.1.什么是ajax

    Ajax（Asynchronous JavaScript and XML , Asynchronous 异步的）指的是一种使用 JavaScript、XML 和 HTTP 请求进行前端数据异步交互的技术。Ajax 不需要刷新整个页面就可以更新其中的一部分，使得网页的反应更快、更灵活，用户体验更好。

    通俗来说，Ajax 就是通过 JavaScript 发送 HTTP 请求到服务器，接收服务器的响应，并对网页内容进行更新，使得服务端和客户端之间不需要进行页面的完全刷新。

    使用 Ajax 可以实现许多功能，如：

    1. 异步更新页面内容，来提高页面的动态性和响应速度，从而改善用户的使用体验。
    2. 通过动态获取数据，实现部分数据的更新，减少数据传输量，从而提高页面加载速度。
    3. 在不离开当前页面的情况下，提交表单并处理请求的响应结果。
    4. 实现在线自动检查和验证表单输入，避免提交错误的表单数据。

    在 JavaScript 中使用 Ajax 技术通常需要通过 XMLHttpRequest （XHR）对象来完成，XHR 可以通过 JavaScript 代码向服务器发送请求和接收响应。也可以使用一些第三方库来简化 Ajax 请求，如 jQuery、fetch 等。

    4.7.2.同步/异步

    4.7.2.1.什么是同步请求？

    同步请求是指当前发出请求后，浏览器什么都不能做，
    必须得等到请求完成返回数据之后，才会执行后续的代码，
    相当于生活中的排队，必须等待前一个人完成自己的事物，后一个人才能接着办。

    在这里插入图片描述

    4.7.2.1.什么是异步请求？

    异步请求就当发出请求的同时，浏览器可以继续做任何事，
    Ajax发送请求并不会影响页面的加载与用户的操作，相当于是在两条线上，各走各的，互不影响。
    异步请求可以完全不影响用户的体验效果，
    无论请求的时间长或者短，用户都在专心的操作页面的其他内容，并不会有等待的感觉。

    在这里插入图片描述

    4.7.3.XMLHttpRequest

    4.7.3.1.得到XMLHttpRequest对象

    XMLHttpRequest 是JavaScript等脚本语言中使用的API，它通过HTTP协议异步向服务器发送请求，并获取服务器返回的响应。
    最大的用处是提供与服务器异步通信的能力。

    1999年上半年提出的。ie5.0首次使用的一个ActiveX对象，叫XMLHTTP。

    2000年，Mozilla实现了相同接口的原生对象XMLHttpRequest。其它浏览器也相继实现了同样的对象。

    var xhr;

function createXMLHttpRequest(){
    var xmlRequest;
	if(window.XMLHttpRequest){	    //Mozilla
		xmlRequest = new XMLHttpRequest();
	}else if(window.ActiveXObject){
		try{
			xmlRequest = new ActiveXObject("Msxml2.XMLHTTP");		
		}catch(e){
			try{
				xmlRequest = new ActiveXObject(Microsoft.XMLHTTP);
			}catch(e){
			}
		}
	}
	return  xmlRequest;
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    4.7.3.2.XMLHttpRequest 对象方法

    abort() : 停止发送当前请求

    getAllResponseHeaders() : 获取服务器返回的全部响应头

    getResponseHeaders() : 根据响应头的名字，获取对应的响应头

    setRequestHeader("label","value") : 在发送请求之前，设置请求头

    //设置请求头
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");

    • 1
    • 2

    open（“method”，"URL",asyncFlag） : ( 核心方法 ) 建立与服务器URL的连接

    ​ method : 请求方式 get / post

    ​ url : 请求的资源URL

    ​ asyncFlag : true 异步请求 , false 非异步请求

    send(content) : ( 核心方法 ) 发送请求 , 可以在括号中加入请求参数, 要通过 send() 传值 , open() 的method要设置成POST

    // 无参数
xhr.send(null)
// 有参数
xhr.send("id=" + id + "&name=" + name);

    • 1
    • 2
    • 3
    • 4
    4.7.3.3.XMLHttpRequest 对象属性

    readyState : ( 核心属性 ) XHR对象的处理状态

    0 XHR对象还没有完成初始化 尚未调用open()方法
    1 XHR对象开始发送请求 已调用open()方法，但尚未调用send()方法
    2 XHR对象的请求发送完成 已调用send()方法，但尚未接收到响应
    3 XHR对象开始读取服务器的响应 已接收到部分响应数据
    4 XHR对象读取服务器响应结束 已接收到全部响应数据，而且已经可以在客户端使用了

    responseText : ( 核心属性 ) 文本形式的响应内容

    responseXML : XML 形式的响应内容

    status : ( 核心属性 ) 响应状态码

    200 服务器响应正常

    404 需要访问的资源不存在

    500 服务器内部错误

    statusText : 服务器返回的状态文本信息

    4.7.3.4.XMLHttpRequest 对象事件

    onreadystatechange : ( 核心事件 ) 用于指定XHR对象状态改变时的事件处理函数

    ontimeout : IE8 支持 超时事件

    load : firefox支持，只要接收到响应就处发的事件

    porgress : 接到新数据j时触发

    4.7.4.实例

    4.7.4.1.页面 通过 send() 传参
    <html>
<body>
<h1>hello ajaxh1>
<input onblur="ajaxTest(this)" value="ajax-test">
body>
<script>
    var xhr;
    // 创建XHR对象
    function createXMLHttpRequest(){
        var xmlRequest;
        if(window.XMLHttpRequest){	    //Mozilla
            xmlRequest = new XMLHttpRequest();
        }else if(window.ActiveXObject){
            try{
                xmlRequest = new ActiveXObject("Msxml2.XMLHTTP");		
            }catch(e){
                try{
                    xmlRequest = new ActiveXObject(Microsoft.XMLHTTP);
                }catch(e){
                }
            }
        }
        return  xmlRequest;
    }

    function ajaxTest(inp) {
        console.log(inp.value)
        // 得到XHR对象
        xhr = createXMLHttpRequest()
        var url = "/test";
        // 发请求
        xhr.open("POST", url)
        // 监听事件
        xhr.onreadystatechange = function () {
            if (xmlRequest.readyState == 4) {
                if (xmlRequest.status == 200) {
                    console.log( xmlRequest.responseText )
                }
            }
        }
        xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded; charset=UTF-8");
        var data = 'data=' + inp.value;
        xhr.send(data);
    }
script>
html>

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33
    • 34
    • 35
    • 36
    • 37
    • 38
    • 39
    • 40
    • 41
    • 42
    • 43
    • 44
    • 45
    • 46
    4.7.4.2.Controller接参

    使用 @RequestParam("标识") 接参

    使用 @ResponseBody 将默认 转页 转换成返回数据

    package com.yuan.controller;

import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestParam;
import org.springframework.web.bind.annotation.ResponseBody;

@Controller
public class AjaxTestController {

    @RequestMapping("/test")
    @ResponseBody
    public String test( @RequestParam("data") String data){
        System.out.println("data = " + data);
        
        return "response msg";
    }
}

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    4.7.4.3.传对象(JSON)数据

    修改 send() 传 对象 JSON结构 参数

    xhr.setRequestHeader('Content-Type', 'application/json; charset=UTF-8');
var params = { data: inp.value };
xhr.send(JSON.stringify(params));

    • 1
    • 2
    • 3
    4.7.4.4.Controller 接收对象

    通过 @RequestBody 接 对象, 再使用 JSONObject 将字符串转对象

    
    @RequestMapping("/test")
    @ResponseBody
    public String test(@RequestBody String data){
        System.out.println("data = " + data); // data = {"data":"ajax-test"}
        JSONObject jsonObject = JSONObject.parseObject(data);
        String value = jsonObject.getString("data");
        System.out.println("value = " + value);

        return "response msg";
    }

    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
  • 相关阅读:
    使用JavaCV实现读取视频信息及自动截取封面图
    构造TopRecord结构问题解法
    备战数学建模2——MATLAB导入数据，处理缺失值
    基于图搜索的规划算法之Dijkstra
    在外包公司干了一年半软件测试的一些反思与总结
    WebDAV之π-Disk派盘 + 密码键盘
    天文学专业大学院校排名（2024最新排行榜）
    JavaSE ---01 数据类型与运算符
    基于grpc从零开始搭建一个准生产分布式应用(6) - 06 - MapStruct常见问题汇总
    2022年中国征信行业覆盖人群、参与者数量及征信业务查询量统计[图]
  • 原文地址：https://blog.csdn.net/yuanchun05/article/details/130910925