Ajax前后端交互基础

基础

同源和跨域

Ajax核心 XMLHttpRequest

GET请求

POST请求

JSON数据交互

基础

Ajax 的全称是 Asynchronous JavaScript and XML（异步的 JavaScript 和 XML），是一种用于创建动态网页的技术。

Ajax 是一种使用现有标准的新方法，通过与服务器进行少量的数据交换，Ajax 可以使网页实现异步更新，这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

Ajax 工作原理：

在客户端（如浏览器）和服务器之间加了一个中间层：Ajax 引擎。由 Ajax 引擎独立向服务器请求数据，前端获取到 Ajax 返回的数据后，可以使用新数据来更新页面、或进行其它操作，使用户请求和服务器响应异步化，从而保证了在不刷新页面的前提下可以局部更新网页内容。

Ajax 的优点：

最大的优点是页面无刷新更新，用户的体验非常好；
使用异步方式与服务器通信，具有更迅速的响应能力；
可以将一些服务器工作转移到客户端，利用客户端资源来处理，减轻服务器和带宽的压力，节约空间和带宽租用成本；
技术标准化，并被浏览器广泛支持，不需要下载插件或者小程序；
Ajax 可使因特网应用程序更小、更快、更友好。

Ajax 的缺点：

Ajax 不支持浏览器 back 返回按钮；
有安全问题，Ajax 暴露了与服务器交互的细节；
对搜索引擎不友好；
破坏了程序的异常机制；
不容易调试。

下面是一段请求示例：

        function ajaxGet (url) {
			console.log("start");
            var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
						// console.log(xhr.responseText);
                        var res = JSON.parse(xhr.responseText);
						console.log(res);
                        oIpt_country.innerText = res.country
                        oIpt_city.innerText = res.city;
                    }
                }
            }
            
            xhr.open("GET", url);
            xhr.send();
        }

同源和跨域

同源策略是一种安全协议，是客户端脚本（尤其是 JavaScript）中重要的安全度量标准，指一段脚本只能读取同一来源的窗口和文档的属性。
同源指的是 URL 地址中的协议、域名、端口三者都相同。

同源策略使用原因：

为了数据的安全性。若没有同源策略的限制，那么黑客就可以在他的页面上任意请求你的后端数据，造成数据库内容被盗取、隐私数据泄漏。

怎样处理跨域请求？

虽然 Ajax 请求需要满足同源策略，然而在一些场景中，你真的需要 Ajax 访问其它 "源" 的数据（称为跨域访问），这时需要后端服务器进行相应的设置。

如果服务器端支持 CORS，可以通过设置Access-Control-Allow-Origin来实现跨域。如果浏览器检测到相应的设置，就会允许 Ajax 进行跨域访问。

spring boot 中可以使用@CrossOrigin或者服务器配置项解决。

    @GetMapping("/query")
    @CrossOrigin
    public Info queryInfo(HttpServletRequest req){

Ajax核心 XMLHttpRequest

Ajax 技术的核心是XMLHttpRequest类，简称 XHR，它允许脚本异步调用 HTTP API。

实例化XMLHttpRequest:

var xhr = new XMLHttpRequest();

对于不兼容的浏览器使用下面示例化：

var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

XMLHttpRequest 实现请求步骤：

实例化请求对象

var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");

指定请求
```
xhr.open("POST", url);
```

设置请求头

// 设置请求主体的编码方法
xhr.setRequestHeader("Content-Type", "application/json");

发送请求体

//xhr.send() GET请求方式
xhr.send(query);

GET请求

GET 传递参数的方式，分两步：
1.对所需发送的数据（具有名称和值）执行普通的 URL 编码，即：由一对对 "名称=值" 组成（称为：名/值对），每一对之间用 "&" 拼接，如 "name=value&name=value&...&name=value"；
2.由于名/值对会附加在 URL 地址后面，因此在这串字符参数的最前面需要添加个 "?"，表示 URL 的查询参数开始。

请求：

var url = "http://127.0.0.1:8888/query";
var query = "country=" + country + "&city=" + city + "&t=" + new Date().getTime();
            var queryURL = url + "?" + query;
			console.log(queryURL);
            ajaxGet(queryURL);

function ajaxGet (url) {
			console.log("start");
            var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
						// console.log(xhr.responseText);
                        var res = JSON.parse(xhr.responseText);
						console.log(res);
                        oIpt_country.innerText = res.country
                        oIpt_city.innerText = res.city;
                    }
                }
            }
            
            xhr.open("GET", url);
            xhr.send();
        }

响应：

    @GetMapping("/query")
    @CrossOrigin
    public Info queryInfo(HttpServletRequest req){
        Info info = new Info();
        info.setCountry(req.getParameter("country"));
        info.setCity(req.getParameter("city"));
        System.out.println("queryInfo: "+info.toString());
        return info;
    }

POST请求

POST 请求使用表单编码的方式来发送数据的关键步骤：
1.对所需发送的数据（具有名称和值）执行普通的 URL 编码，即：像 GET 请求那样拼接为名/值对的形式；
2.将"Content-Type"请求头的值设置为"application/x-www-form-urlencoded"或者你需要的类型。

			var query = "country=" + country + "&city=" + city + "&t=" + new Date().getTime();
            var queryURL = url;
            // 发起 post 请求
            ajaxPost(queryURL,query);
        function ajaxPost (url,query) {
			console.log("start");
            var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
						// console.log(xhr.responseText);
                        var res = JSON.parse(xhr.responseText);
						console.log(res);
                        oIpt_country.innerText = res.country
                        oIpt_city.innerText = res.city;
                    }
                }
            }
            
            xhr.open("POST", url);
			// 设置请求主体的编码方法
			xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
            xhr.send(query);
        }

JSON数据交互

JSON = JavaScript Object Notation，意思是：JavaScript 对象表示法，是一种轻量级的数据交换格式。它的数据结构更清晰，更易于阅读和编写，同时也易于机器解析和生成，有效地提升了网络传输数据的效率。

使用JSON方式发送数据请求头需要设置为：

xhr.setRequestHeader("Content-Type", "application/json");

            var query = {
				country: country,
				city:city
			};
            var queryURL = url;
            // 发起 post 请求
            ajaxPost(queryURL,JSON.stringify(query));
        function ajaxPost (url,query) {
			console.log("start");
            var xhr = window.XMLHttpRequest ? new window.XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
            xhr.onreadystatechange = function () {
                if (xhr.readyState === 4) {
                    if (xhr.status >= 200 && xhr.status < 300 || xhr.status === 304) {
						// console.log(xhr.responseText);
                        var res = JSON.parse(xhr.responseText);
						console.log(res);
                        oIpt_country.innerText = res.country
                        oIpt_city.innerText = res.city;
                    }
                }
            }
            
            xhr.open("POST", url);
			// 设置请求主体的编码方法
			xhr.setRequestHeader("Content-Type", "application/json");
            xhr.send(query);
        }

ES6 Fetch API

Fetch API 是随 ES6 发展而出现的一个 JavaScript 原生接口，与 Ajax 一样允许开发者异步发起 HTTP 请求，但却以更加简单明了的调用方式、基于 Promise 的数据处理方式被称作是 Ajax 的替代品。

            var data = {
                country : country,
                city : city
            };

            fetch("http://127.0.0.1:8888/query2", {
                method: "POST",
                header: new Headers({"Content-Type":"application/json"}),
                body: JSON.stringify(data)
            })
            .then(function (res) {
                return res.ok ? res.json() : Promise.reject(res);
            })
            .then(function (data) {
                oIpt_country.innerText = data.country;
                oIpt_city.innerText = data.city;
            })
            .catch(function (res) {
                alert("请求失败：" + res.status);
            })

原文链接：https://blog.csdn.net/weixin_41102181/article/details/126036020