Web基础 ( 六 ) AJAX

春哥的魔法书

已于 2023-05-29 21:28:38 修改

阅读量1.1k

点赞数 1

分类专栏： web基础 javascript 文章标签： ajax 前端 javascript

于 2023-05-28 11:39:14 首次发布

本文链接：https://blog.csdn.net/yuanchun05/article/details/130910925

版权

javascript 同时被 2 个专栏收录

20 篇文章 2 订阅

订阅专栏

web基础

16 篇文章 1 订阅

订阅专栏

4.7.AJAX

4.7.1.什么是ajax

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

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

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

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

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

4.7.3.2.XMLHttpRequest 对象方法

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

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

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

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

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

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

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 ajax</h1>
<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>

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

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

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
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web基础 ( 六 ) AJAX

Ajax（Asynchronous JavaScript and XML , Asynchronous 异步的）指的是一种使用 JavaScript、XML 和 HTTP 请求进行前端数据异步交互的技术。Ajax 不需要刷新整个页面就可以更新其中的一部分，使得网页的反应更快、更灵活，用户体验更好。通俗来说，Ajax 就是通过 JavaScript 发送 HTTP 请求到服务器，接收服务器的响应，并对网页内容进行更新，使得服务端和客户端之间不需要进行页面的完全刷新。
复制链接

扫一扫