ajax原理和基本操作

于 2018-11-28 23:09:01 发布
阅读量173 收藏
点赞数
分类专栏： java 文章标签： 一个ajax
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41517071/article/details/84594405
版权

 

对应41天的学习笔记

 

ajax ： 


1: ajax是什么？  
Asynchronous Javascript And XML
                                     翻译成中文就是“异步Javascript和XML
 
2： 异步和同步的交互：  

  同步： 特点： 
  （1） 发出一个请求， 服务端端获得请求， 在对请求进行处理的过程当中， 
   客户端只能等待。 不能进行其他的操作。 
   
  （2） 当服务器端响应完毕， 客户端的页面进行整体的刷新。 
  
 异步：   特点： 
  （1）发出一个请求， 客户端无需等待，在这个过程当中，可以继续发出其他的请求。
     请求是交给了ajax 引擎： 
     
   （2）当服务器端响应完毕， 服务器端的响应并不是直接到达页面， 而是交给了ajax引擎。 
   由ajax引擎， 对页面进行局部的刷新。 
   
 3： 应用场景：  
 （1）用户名称进行注册的时候， 发出异步请求。 
     对填写的用户名称进行校验。 看是否合法。  
     响应回来的数据， 对页面进行局部的刷新。 
     
 （2）百度的搜索栏， 输入一个关键字。 就可以发出请求。 
 
 
 4： ajax 优点： 
 优点： 
 （1）异步交互， 提高了用户的体验度。 用户不需要等待。 
 （2）对页面进行局部的刷新， 减轻了服务器的压力， 不需要解析整个页面。 
 
 
 弊端：  
  （1）ajax 并不能应用在所有的场景。  
  （2）ajax 无形之中增加了和服务器的交互频率。  增加了服务器的压力。 
  

二:  ajax 异步的请求： 
 
  
  四步： 
  （1）获得ajax引擎对象： XMLHttpRequest对象： 
     
    不同的浏览器获得方式不一样：  出现了浏览器的差异问题： 
  大部分浏览器：   XMLHttpRequest xmlHttp = new  XMLHttpRequest();
  IE 6   : XMLHttpRequest xmlHttp = new  ActiveXObject("Msxml2.XMLHTTP");
           XMLHttpRequest xmlHttp = new  XMLHttpRequest("Msxml2.XMLHTTP");
 
  IE5.5 : XMLHttpRequest xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  　　   
  var xmlHttp; //声明
  try{
     xmlHttp =  new  XMLHttpRequest();
  }catch(e){
       try{
         xmlHttp = new  ActiveXObject("Msxml2.XMLHTTP");
       }catch(e){
          try{
            xmlHttp= new ActiveXObject("Microsoft.XMLHTTP");
          }catch(e){
              alert("您使用的浏览器不支持ajax");
             //扔出去一个异常对象： 
             throw e; 
          }
       }
  }
    
  
  （2）打开和服务器的链接： open(); 
  open("param1","param2","param3");
 param1: 指定了ajax的提交方式： GET: POST 
 param2: 指定了提交的URL地址： 
 param3: 是否使用异步提交： true：使用异步提交： false ： 同步提交： 
  
  （3）send(); 发送数据： 
  send(param1);
  param1： 发送的请求体： 
      如果是get请求，get请求没有请求体。  null 。 强烈建议， 没有请求， 也放上null。 
      post请求：指定具体的请求体： username=lisi&age=21;
  
  （4）获得响应： 
  需要在xmlHttp 对象注册一个监听： 监听xmlHttp 的状态：  
  XMLHttpRequest 有五个状态： 
  
  0 ： xmlHttp 初始化完毕：  new XMLHttpRequest();
  1 ：请求开始， 调用了open(x,x,x);
  2 ： send(null); 调用send方法： 
  3 ： 响应开始：  获得了响应头信息， 此时状态3 ：
  4 ： 获得了响应头， 获得了响应体。 整个响应完成； 4 
      这个状态是咱们需要的： （重点）
      
  
  获得状态码： 
  获得状态码：      XMLHttpRequest.readyState ;  0 1 2 3 4 
  获得响应状态码： XMLHttpRequest.state ;// 200 500 405 404 304 302 
  获得服务端响应的内容： 
        XMLHttpRequest.responseText; //获得响应回来的内容： 类型的类型为text类型： 
        XMLHttpRequest.responseXML; // 服务器端响应回来的数据是xml ： js当中要解析dom对象： 
       
  //状态发生了改变， 就会被监听到， 就会指定该函数： 
  xmlHttp.onreadystatechange = function(){
          //监听的代码： 
          if(xmlHttp.readyState == 4 && xmlHttp.status == 200 ){//响应完成： 并且响应的状态码200： 
                var text=  xmlHttp.responseText; //获得响应的内容：
          }
  }
   
三： 演示案例： 页面的局部刷新：  即 用js函数实现：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'ajax01.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->

  </head>
  
  <body>
   <!--  演示页面的局部刷新：  -->
   <!-- 向h标签当中动态的添加内容： -->
   <script type="text/javascript">
      //静态事件： 动态事件 
   
       window.onload= function(){
          //获得btn： 
          var butEle = document.getElementById("btn");
          //给按钮注册一个事件： 
          butEle.onclick = function (){
              var hEle = document.getElementById("h1"); 
              hEle.innerHTML = "你很帅";
          }
       }
   </script>
   <h1 id="h1"></h1>
   <input type="button" value="添加" id="btn" />
  </body> 
</html>


四： ajax 请求： 获得服务器端响应的数据， 进行页面的局部刷新：   GET请求：  
  （1） 获得引擎对象。 
  （2）打开链接： 
  （3）发送请求体： 
  （4）获得响应数据： 

把获得ajax殷勤对象的内容放在commons.util中，如下：

 function getXmlHttpObject(){
   //对象的声明： 
	var xmlHttp=null;
	try{
	  // Firefox, Opera 8.0+, Safari 谷歌  IE
	   xmlHttp=new XMLHttpRequest();
	 }catch (e){
	  // Internet Explorer
		  try{
		    xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
		  } catch (e){
		     try{
		       xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
		     }catch(e){
		     	alert("您的浏览器不支持ajax");
		     	throw e; 
		     }
		     
		  }
	 }
	 return xmlHttp;
}

JSP页面如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'ajax01.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/commonsUtil.js"></script>
 <script type="text/javascript">
   	
      //静态事件： 动态事件 
        window.onload= function(){
          //获得btn： 
	          var butEle = document.getElementById("btn");
	          
	          //给按钮注册一个事件： 
	          butEle.onclick = function (){
	            
	           
			// 第一步： 调用方法获得对象：
			var xmlHttp = getXmlHttpObject();
			
			//第二步： 和服务器端建立连接： 
			xmlHttp.open("GET","/javaEE-41/servlet/AServlet",true);
			//第三步： 发送： 
			xmlHttp.send(null);//get请求发送请求体为null： 
			//注册监听： 
			xmlHttp.onreadystatechange = function(){
			   //双重判断：
			   if(xmlHttp.readyState == 4 && xmlHttp.status == 200){//响应完成， 并且状态码为200： 
			       //获得响应数据： 
			      var data =  xmlHttp.responseText;
			      //获得h元素： 
			      var hEle = document.getElementById("h1");
			      hEle.innerHTML= data;
			   }
			}
          }
       } 
   </script>
  </head>
  
  <body>
 
   <!-- 向h标签当中动态的添加内容：
   
            内容： 来源于服务器端：
    -->
  
   <h1 id="h1"></h1>
   <input type="button" value="添加" id="btn" />
   
   
  </body> 
</html>

servlet代码如下：

package com.yidongxueyuan.web.servlet;

import java.io.IOException;
import java.util.Date;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class AServlet extends HttpServlet {

	//get： 处理get请求： 
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
	
		//响应数据： 
		Date date = new Date();
		response.getWriter().println(date);
	}
	//处理post提交的： 
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		//获得发送的数据： 
		String name = request.getParameter("username");
		response.getWriter().println(name.toUpperCase());
		
	}

}


五： ajax 发送一个post请求： 
 (1) xmlHttp.open("POST","URL",true);
 (2) 设置一个请求头信息： 
     xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 
     
 (3)发送： send("username=lisi&password=321");

JSP：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'ajax01.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/commonsUtil.js"></script>
	
	<!-- 使用ajax 发送一个post请求：获得服务端的数据： 设置h标签：  -->
 <script type="text/javascript">
   	
      //静态事件： 动态事件 
        window.onload= function(){
          //获得btn： 
	          var butEle = document.getElementById("btn");
	          
	          //给按钮注册一个事件： 
	          butEle.onclick = function (){
	            
	           
			// 第一步： 调用方法获得对象：
			var xmlHttp = getXmlHttpObject();
			
			//第二步： 和服务器端建立连接： 
			xmlHttp.open("POST","/javaEE-41/servlet/AServlet",true);
			POST应该设置一个请求头信息//
			xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
			//第三步： 发送： 
			xmlHttp.send("username=lisi&password=321");//post应该设置请求体内容： 
			//注册监听： 
			xmlHttp.onreadystatechange = function(){
			   //双重判断：
			   if(xmlHttp.readyState == 4 && xmlHttp.status == 200){//响应完成， 并且状态码为200： 
			       //获得响应数据： 
			      var data =  xmlHttp.responseText;
			      //获得h元素： 
			      var hEle = document.getElementById("h1");
			      hEle.innerHTML= data;
			   }
			}
          }
       } 
   </script>
  </head>
  
  <body>
 
   <!-- 向h标签当中动态的添加内容：
   
            内容： 来源于服务器端：
    -->
  
   <h1 id="h1"></h1>
   <input type="button" value="添加" id="btn" />
   
   
  </body> 
</html>

servlet 和 上面一样，调用的是上面代码中的

五：案例： 校验用户名称是否存在 

 页面： 
  （1）表单数据：  
     用名：   <input /> <span> </span> 
     密码： 
     注册： 
     
   （2）失去焦点事件： onBlur= function(){
   
       //获得服务端的响应： 
       1： 如果服务端发送的数字1，表明用户已经已经被注册过。 在input后添加提示信息
       2： ： 如果服务端发送的数字0，什么都不需要做：
   }
   
 服务端： 
  获得前端提交的用户： 
 MVC去数据库当中进行查询： 
 如果查询到： 给客户端一个数字1.  
 没有查询到： 给客户端一个数字0. 

（下面代码直接if了）

注册jsp如下：

<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>My JSP 'ajax01.jsp' starting page</title>
    
	<meta http-equiv="pragma" content="no-cache">
	<meta http-equiv="cache-control" content="no-cache">
	<meta http-equiv="expires" content="0">    
	<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
	<meta http-equiv="description" content="This is my page">
	<!--
	<link rel="stylesheet" type="text/css" href="styles.css">
	-->
	<script type="text/javascript" src="${pageContext.request.contextPath }/js/commonsUtil.js"></script>
	
  </head>
  
  <body>
   <!--  演示页面的局部刷新：  -->
   <!-- 向h标签当中动态的添加内容： -->
   <script type="text/javascript">
      function checkusername(){
          	//alert("ss");
          	
          	//获得对象： 
          	var xmlHttp = getXmlHttpObject(); 
          	
          	//打开链接： 
          	xmlHttp.open("POST","/javaEE-41/servlet/RegistServlet",true);
          	
          	//设置一个请求头信息： 
          	xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
          	//发送数据：
          	var name = document.getElementById("username").value;
          	xmlHttp.send("username="+name);
          	
          	//获得响应数据： 
          	//注册监听： 
			xmlHttp.onreadystatechange = function(){
			   //双重判断：
			   if(xmlHttp.readyState == 4 && xmlHttp.status == 200){//响应完成， 并且状态码为200： 
			       //获得响应数据： 
			      var num =  xmlHttp.responseText;
			      //获得h元素： 
			      if(num == 1){//用户已经存在：
			      	//获得span标签： 并且给span标签设置值： 
			      	var spanEle  = document.getElementsByTagName("span")[0];
			      	spanEle.innerHTML = "<font color='red' size=2>您的用户应被注册过</font>"
			      }else{
			        var spanEle  = document.getElementsByTagName("span")[0];
			      	spanEle.innerHTML = "";
			      }
			   }
			} 
      }
   
      
   </script>
   <h1 id="h1"></h1>
   <form>
  用户名：  <input type="text" name="username" id="username"  onblur="checkusername();"/> <span></span><br/>
 密码：     <input type="password" name ="password" id="password" /><br/>
       <input type="button" value="添加" id="btn" />
   </form>
  </body> 
</html>

servlet如下：

package com.yidongxueyuan.web.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class RegistServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}
	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		//获得发送的数据： 
		String name = request.getParameter("username");
		System.out.println("前台传递的："+name);
		
		//去数据库当中进行查询： 如果用户为yidong, 说明用户已经被注册： 
		if("yidong".equals(name)){
			response.getWriter().println("1");
		}else{
			response.getWriter().println("0");
		}
		
	}

}


六： 服务端响应的数据是xml格式：  
   
  客户端： 
   接收： xmlHttp.responseText; //文本：  
      xmlHttp.responseXML ;   客户端应该修改的内容：   
                客户端获得内容是一个dom对象： 需要对xml进行解析：  
      
 服务端：  
     默认情况：  响应回来的格式：Content-Type:text/html;charset=utf-8
     修改为：    Content-Type:text/xml;charset=utf-8
         response.setContentType( "text/xml;charset=utf-8"); 
         响应回来的是一个xml格式的文本：

 

服务端响应xml数据代码如下：

package com.yidongxueyuan.web.servlet;

import java.io.IOException;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

public class RegistServlet extends HttpServlet {

	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		doPost(request, response);
	}
	
	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		request.setCharacterEncoding("utf-8");
		response.setContentType("text/html;charset=utf-8");
		//获得发送的数据： 
		String name = request.getParameter("username");
		System.out.println("前台传递的："+name);
		
		//去数据库当中进行查询： 如果用户为yidong, 说明用户已经被注册： 
		if("yidong".equals(name)){
			response.getWriter().println("1");
		}else{
			response.getWriter().println("0");
		}
		
	}

}

 
         

东方-教育技术博主
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
ajax 基本原理 ajax 基本原理
03-13
### Ajax基本原理详解 #### 一、引言 随着互联网技术的发展，用户对于网页应用的交互性和用户体验的要求越来越高...通过理解Ajax的基本原理和技术细节，开发者可以更好地利用这项技术来构建高效、交互性强的Web应用。
Ajax基本原理.pdf
最新发布
01-01
Ajax的基本原理包括以下几个关键组成部分： 1. **异步通信**：Ajax的关键特性是异步性，这意味着用户可以继续与页面交互，而后台数据请求和处理不会阻塞用户界面。通过XMLHttpRequest对象，JavaScript可以在后台与...
Ajax的原理
xp9802的专栏
10-26 118
Ajax的原理就是:通过javascript的方式，将前台数据通过xmlhttp对象传递到后台，后台在接收到请求后，将需要的结果，再传回到前台，这样就可以实现不需要页面的回发，页是数据实现来回传递，从页实现无刷新。 Ajax的原理简单来说，实际上就是通过XmlHttpRequest对象来向服务器发异步请求，从服务器获得数据，然后用javascript来操作DOM而更新页面。 这其中最关键的一步...
Ajax原理
一个2年工作经验的程序测试员
07-07 68
本文将通过一个具体的例子来展示Ajax的工作原理，通过与传统请求响应方式的对比展现Ajax中处理请求响应的不同方式。在这个示例程序中，所要完成的任务非常简单，仅仅需要输入一个姓名然后提交这个表单，在服务器端处理这个请求，然后在页面显示处理的结果，在下面的示例程序中，将展示通过传统方式和Ajax方式分别处理这个请求响应的具体过程。 传统方式： &lt;%@ page language="java...
ajax原理
吴正清的专栏
07-29 921
在使用浏览器浏览网页的时候，当页面刷新很慢的时候，你的浏览器在干什么？你的屏幕内容是什么？是的，你的浏览器在等待刷新，而你的屏幕内容是一片空白， 而你在屏幕前苦苦的等待浏览器的响应。开发人员为了克服这种尴尬的局面，不得不在每一个可能需要长时间等待响应的页面上增加一个div，告诉用户“系统正 在处理您的请求，请稍候……”。 　　现在，有一种越来越流行越热的“老”技术，可以彻底改变这种窘迫的局面。那就是ajax。如今，随着gmail、google-maps的应用和各种浏览器的支持，ajax正逐渐吸引全世界的眼球
Ajax的原理和应用[转载]
javazhuanzai的专栏
01-13 314
====================================================== 注：本文源代码点此下载 ====================================================== 在写这篇文章之前,曾经写过一篇关于ajax技术的随笔,不过涉及到的方面很窄,对ajax技术的背景、原理、优缺点等各个方面都很少涉及null。这次写
通过实例解析jQ Ajax操作相关原理
10-14
AJAX，即异步JavaScript和XML，是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。它允许网页在后台与服务器进行通信，获取数据并动态更新页面内容，从而提供了更好的用户体验，因为用户不需要等待...
AJAX技术原理和使用方法
12-12
### AJAX技术原理与使用方法详解 #### 一、引言 AJAX（Asynchronous JavaScript and XML），即异步JavaScript和XML技术，是一种用于创建快速动态网页的技术。它并不是一种单一的技术，而是多种技术的组合使用，包括...
Ajax基本运行原理
11-27
### Ajax基本运行原理详解 #### 引言 随着互联网技术的不断发展，用户对于网页应用程序的交互性和用户体验的要求越来越高。传统的浏览器/服务器（B/S）架构虽然解决了早期客户端/服务器（C/S）架构中存在的部署和...
总结 - Ajax工作原理和实现步骤
热门推荐
半夏半暖半倾城的博客
08-22 9万+
目录 一 Ajax技术与原理 1.1 Ajax简介 1.2 Ajax所包含的技术 1.3 Ajax的工作原理 1.4 XMLHttpRequest 对象的三个常用的属性 1. onreadystatechange 属性 2. readyState 属性 3. responseText 属性 1.5 xmlhttprequst的方法 1. open() 方法 2. send...
AJAX原理
dahulu的专栏
07-31 249
ajax所包含的技术      大家都知道ajax并非一种新的技术，而是几种原有技术的结合体。它由下列技术组合而成。    1.使用 CSS和XHTML来表示。    2. 使用DOM模型来交互和动态显示。    3.使用XMLHttpRequest来和服务器进行异步通信
Ajax原理详细说明(转自ibm开发者网站)
thinkpadleo的专栏
01-22 5895
Ajax 由 HTML、JavaScript™ 技术、DHTML 和 DOM 组成，这一杰出的方法可以将笨拙的 Web 界面转化成交互性的 Ajax 应用程序。本文的作者是一位 Ajax 专家，他演示了这些技术如何协同工作 —— 从总体概述到细节的讨论 —— 使高效的 Web 开发成为现实。他还揭开了 Ajax 核心概念的神秘面纱，包括 XMLHttpRequest 对象。五年前，如果不知道
深入理解Ajax：原理、应用与开发指南
"Ajax原理 和开发指南" Ajax，全称Asynchronous JavaScript and XML，是一种用于创建快速动态网页的技术。它允许Web应用程序在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容，从而极大地提升了...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

东方-教育技术博主

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值