2024-08-12

在这个系列中,我们将使用AJAX、Node.js、Webpack和Git来构建一个简单的前端应用程序。以下是第四部分的内容,其中我们将介绍如何使用AJAX发送GET和POST请求。

1. 使用AJAX发送GET请求




// 创建一个新的XMLHttpRequest对象
const xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'https://api.example.com/data', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('AJAX Request failed');
    }
  }
};
 
// 发送请求
xhr.send();

2. 使用AJAX发送POST请求




// 创建一个新的XMLHttpRequest对象
const xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('POST', 'https://api.example.com/data', true);
 
// 设置请求头,如内容类型
xhr.setRequestHeader('Content-Type', 'application/json');
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('AJAX Request failed');
    }
  }
};
 
// 发送包含数据的请求
xhr.send(JSON.stringify({ key: 'value' }));

以上代码演示了如何使用原生JavaScript的XMLHttpRequest对象来发送GET和POST请求。这是现代前端开发中一个非常基础且重要的概念,因为它允许我们从浏览器中异步获取数据。虽然现代开发中我们通常会使用更现代的API,如fetch,但是XMLHttpRequest对象在所有现代浏览器中都得到了支持,而且是理解AJAX基础的关键。

2024-08-12

Ajax(Asynchronous JavaScript and XML)是一种创建交互式网页的技术,可以在不重新加载整个网页的情况下,与服务器交换数据。以下是一个使用Ajax技术的示例代码,它演示了如何发送请求到服务器并处理响应:




// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'your-api-endpoint', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('There was a problem with the request.');
    }
  }
};
 
// 发送请求
xhr.send();

这段代码演示了如何使用XMLHttpRequest对象发送一个GET请求到服务器,并在请求完成时处理响应。这是Ajax技术的基本用法,适用于大多数现代Web应用程序。

2024-08-12

Ajax 和 Axios 是用于在浏览器中与服务器进行异步通信的技术。

Ajax(Asynchronous JavaScript and XML)是一种创建交互式网页应用的技术,可以在不重新加载页面的情况下更新网页的部分内容。

Axios 是一个基于 Promise 的 HTTP 客户端,用于浏览器和 node.js 环境中发送 HTTP 请求。

同步(Synchronous)和异步(Asynchronous)是指代码执行的两种方式。

  • 在同步代码中,后续代码必须等待当前代码执行完毕后才能执行。
  • 在异步代码中,后续代码不必等待当前代码执行完毕即可执行。当前代码运行完毕后,会通过回调、事件或者 Promise 的方式来通知后续代码执行。

Ajax 示例(使用 jQuery):




$.ajax({
  url: 'https://api.example.com/data',
  type: 'GET',
  success: function(response) {
    // 处理响应数据
    console.log(response);
  },
  error: function(xhr, status, error) {
    // 处理错误
    console.log(error);
  }
});

Axios 示例:




axios.get('https://api.example.com/data')
  .then(function (response) {
    // 处理响应数据
    console.log(response.data);
  })
  .catch(function (error) {
    // 处理错误
    console.log(error);
  });

在现代 JavaScript 中,Axios 比起原生的 AJAX 更受欢迎,因为它基于 Promise,并且可以在 node.js 环境中使用。同时,它也支持请求和响应拦截器,这使得处理异步请求变得更加简单和灵活。

2024-08-12

问题解释:

使用AJAX时,如果你尝试通过window.location.href进行页面跳转,但页面没有跳转,可能是因为AJAX请求还未完成就已经触发了页面跳转。

解决方法:

  1. 确保AJAX请求完成后再进行页面跳转。你可以在AJAX请求的success回调函数中设置window.location.href
  2. 如果你使用的是$.ajax(假设你使用的是jQuery),可以在complete回调函数中进行页面跳转。

示例代码(使用jQuery):




$.ajax({
    url: 'your-endpoint',
    type: 'GET',
    success: function(data) {
        // 成功处理逻辑
    },
    complete: function() {
        // 请求完成后跳转页面
        window.location.href = 'your-new-page.html';
    }
});

如果不使用jQuery,可以直接在原生JavaScript的XMLHttpRequest对象中监听onreadystatechange事件,然后在readyState4(请求已完成)并且status200(请求成功)时进行页面跳转。

示例代码(原生JavaScript):




var xhr = new XMLHttpRequest();
xhr.open('GET', 'your-endpoint', true);
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功,并且页面跳转
        window.location.href = 'your-new-page.html';
    }
};
xhr.send();

确保在AJAX请求完成后进行页面跳转,这样可以避免因为页面跳转导致AJAX请求中的异步操作未能正常完成的问题。

2024-08-12

AJAX和JSON是在现代Web应用程序中广泛使用的技术,它们可以提供更好的用户体验,使页面的部分更新成为可能。

AJAX:

AJAX(Asynchronous JavaScript and XML)技术允许在不重新加载页面的情况下更新网页的部分内容。这是通过在后台与服务器进行少量数据交换来实现的。

JSON:

JSON(JavaScript Object Notation)是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。

AJAX请求示例:




// 创建一个新的XMLHttpRequest对象
var xhr = new XMLHttpRequest();
 
// 配置HTTP请求
xhr.open('POST', 'your_server_endpoint', true);
 
// 设置请求头信息
xhr.setRequestHeader('Content-Type', 'application/json');
 
// 处理请求完成的响应
xhr.onreadystatechange = function() {
    if (xhr.readyState === 4 && xhr.status === 200) {
        // 请求成功,处理响应的JSON数据
        var response = JSON.parse(xhr.responseText);
        console.log(response);
    }
};
 
// 发送JSON格式的数据
xhr.send(JSON.stringify({ key: 'value' }));

JSON响应示例:




// 假设服务器返回的JSON数据
var jsonResponse = {
    "name": "John",
    "age": 30,
    "city": "New York"
};
 
// 处理JSON数据
console.log(jsonResponse.name); // 输出 John

AJAX和JSON结合使用可以实现前后端的分离,提高开发效率。后端只需提供JSON格式的数据,前端可以用AJAX异步获取数据并更新页面。

2024-08-12

Ajax的概念:

Ajax(Asynchronous JavaScript and XML)即异步JavaScript和XML,是一种创建交互式网页应用的技术。它允许浏览器与服务器通信而无需刷新页面。

jQuery中Ajax的3种方法:

  1. $.ajax():最灵活的方法,允许你直接访问Ajax的各种复杂特性。
  2. $.get():用于发送GET请求,专门用于简单的GET请求。
  3. $.post():用于发送POST请求,专门用于简单的POST请求。

模仿jQuery封装自己的Ajax函数:




function myAjax(options) {
    var defaults = {
        type: 'GET',
        url: '',
        data: {},
        success: function(response) {
            console.log('Success:', response);
        },
        error: function(xhr, status, error) {
            console.error('Error:', status, error);
        }
    };
 
    // 合并默认选项和传入的选项
    Object.assign(defaults, options);
 
    // 使用原生的XHR对象发送请求
    var xhr = new XMLHttpRequest();
    xhr.open(defaults.type, defaults.url, true);
 
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4) {
            if (xhr.status >= 200 && xhr.status < 300) {
                defaults.success(xhr.responseText);
            } else {
                defaults.error(xhr, xhr.statusText, xhr.responseText);
            }
        }
    };
 
    // 发送数据
    xhr.send(defaults.data);
}
 
// 使用自定义的Ajax函数
myAjax({
    url: 'https://api.example.com/data',
    success: function(response) {
        console.log('Response:', response);
    },
    error: function(xhr, status, error) {
        console.error('Error:', status, error);
    }
});

这个简易的myAjax函数模拟了jQuery的Ajax API,允许你指定请求类型、URL、数据以及成功和错误回调函数。这个函数只是一个基本的示例,实际应用中可能需要更多的错误处理和高级功能。

2024-08-12

报错解释:

org.springframework.web.HttpMediaTypeNotSupportedException: Content type 'a' not supported 这个异常通常表示客户端请求了一个不被支持的媒体类型(Content Type)。在这个例子中,客户端尝试使用一个不正确或不被服务器理解的Content Type值 'a' 发送请求。

解决方法:

  1. 检查客户端请求的头信息中的 Content-Type 是否正确设置。例如,如果你正在发送JSON数据,确保它被设置为 application/json
  2. 检查服务器端的Spring MVC配置,确保你的控制器方法能够接受并正确处理客户端发送的Content Type。
  3. 如果你正在使用Spring的 @RequestMapping 或相关注解,确保它们包含正确的 consumes 属性。
  4. 如果你是客户端开发者,确保你的请求库正确设置了Content Type。在JavaScript中使用fetch API时,你可以在请求对象的 headers 属性中设置它。

示例代码:




@PostMapping(value = "/your-endpoint", consumes = "application/json")
public ResponseEntity<?> yourMethod(@RequestBody YourRequestBodyType requestBody) {
    // ... 你的逻辑 ...
}

确保客户端在发送请求时,如果是POST或PUT操作,设置正确的Content-Type头信息。

2024-08-12

Ajax操作基本步骤包括创建一个XMLHttpRequest对象,配置请求,发送请求,以及处理响应。以下是一个简单的示例:




// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'your-api-endpoint', true);
 
// 发送请求
xhr.send();
 
// 注册事件监听器来处理服务器响应
xhr.onreadystatechange = function () {
    // 确保请求完成并且响应状态为 200 OK
    if (xhr.readyState === XMLHttpRequest.DONE) {
        if (xhr.status === 200) {
            // 处理成功的响应数据
            console.log(xhr.responseText);
        } else {
            // 处理错误情况
            console.error('AJAX Request was unsuccessful: ' + xhr.status);
        }
    }
};

这段代码演示了使用Ajax进行GET请求的基本步骤。它创建了一个XMLHttpRequest对象,打开了一个到服务器的GET请求,并在请求完成时注册了一个事件监听器来处理响应。如果响应状态为200,则表示请求成功,并打印响应文本;如果状态不是200,则在控制台输出错误信息。

2024-08-12

在Spring框架中,你可以使用RequestContextHolder来获取当前的HttpServletRequest, HttpServletResponseServletRequestAttributes。以下是一个工具类的示例代码:




import org.springframework.web.context.request.RequestContextHolder;
import org.springframework.web.context.request.ServletRequestAttributes;
 
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import javax.servlet.http.HttpSession;
 
public class WebUtils {
 
    public static HttpServletRequest getCurrentRequest() {
        ServletRequestAttributes attributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
        return attributes == null ? null : attributes.getRequest();
    }
 
    public static HttpServletResponse getCurrentResponse() {
        ServletRequestAttributes attributes = (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
        return attributes == null ? null : attributes.getResponse();
    }
 
    public static HttpSession getCurrentSession() {
        return getCurrentRequest().getSession();
    }
 
    public static ServletRequestAttributes getServletRequestAttributes() {
        return (ServletRequestAttributes) RequestContextHolder.getRequestAttributes();
    }
}

使用这个工具类,你可以在任何需要的地方获取到当前请求的HttpServletRequest, HttpServletResponseHttpSession。注意,在非web请求的线程中(例如定时任务)使用这些方法可能返回null

2024-08-12



// 创建一个新的 XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
 
// 配置请求类型、URL 以及是否异步处理
xhr.open('GET', 'https://api.example.com/data', true);
 
// 设置请求完成的回调函数
xhr.onreadystatechange = function () {
  // 请求完成并且响应状态码为 200
  if (xhr.readyState === XMLHttpRequest.DONE) {
    if (xhr.status === 200) {
      // 处理请求成功的响应数据
      console.log(xhr.responseText);
    } else {
      // 处理请求失败
      console.error('请求失败,状态码:' + xhr.status);
    }
  }
};
 
// 发送请求
xhr.send();

这段代码展示了如何使用 XMLHttpRequest 对象发送一个简单的 GET 请求,并在请求成功完成后处理响应数据。这是 AJAX 技术的一个基本实现,对于了解和学习 AJAX 是非常有帮助的。