js的Ajax学习

最新推荐文章于 2024-07-28 17:16:30 发布
最新推荐文章于 2024-07-28 17:16:30 发布
阅读量2.1k 收藏 4
点赞数
分类专栏： js 文章标签： javascript ajax xmlhttprequest 异步
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/liujie19901217/article/details/50782909
版权

Ajax：异步的javascript和xml

Ajax 的核心是XMLHttpRequest对象，该对象为向服务器发送请求和解析服务器响应提供了流畅的接口。能够以异步方式从服务器取得更多信息，用户不需要刷新页面也能取得数据。

同步和异步
同步是指：发送方发出数据后，等接收方发回响应以后才发下一个数据包的通讯方式。
异步是指：发送方发出数据后，不等接收方发回响应，接着发送下个数据包的通讯方式。
（简单点说：同步就是只能一件一件事的来做，而异步就是可以多件事同时进行）

一、创建ajax过程

(1)创建一个XMLHttpRequest对象

代码：

function createXhr(){
            if(typeof XMLHttpRequest !="undefined"){//主流浏览器(firefox、chrome、safari、opera、IE7以上)
                return new XMLHttpRequest();
            }else if(typeof ActiveXObject !="undefined"){//IE浏览器创建
                return new ActiveXObject("Microsoft.XMLHTTP");
            }
        }
        var xhr=createXhr();

<span style="white-space:pre">		</span>var xhr = null;
		//这里如果直接写XMLHttpRequest，如果浏览器不支持XMLHttpRequest，则会报错
		//window.XMLHttpRequest这样写，是将XMLHttpRequest当做window对象的属性来检查
		//如果不存在会返回undefined，不会出错
		if (window.XMLHttpRequest) {
			xhr = new XMLHttpRequest();
		} else {
			xhr = new ActiveXObject('Microsoft.XMLHTTP');
		}

(2)使用XMLHttpRequest对象的open方法创建一个新的HTTP请求

open方法接收三个参数：要发送请求的类型(get或者post)、请求的url、表示是否异步发送请求的布尔值
false表示同步请求，true表示异步请求
open方法并不会真正发送请求，而只是启动一个请求以备发送
(3)设置响应HTTP请求状态变化的函数.
onreadystatechange()函数

xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status>=200&&xhr.status<300||xhr.status==304){
                    console.log(xhr.responseText);
                }else{
                    console.log("请求失败："+xhr.status);
                }
            }
        }

(4)发送HTTP请求.
send方法，该方法接收一个参数，及要作为请求主体发送的数据
调用send方法之后，请求就会被分派到服务器
(5)获取异步调用返回的数据.
(6)使用JavaScript和DOM实现局部刷新.

二、get请求

function createXHR(){//创建Ajax对象
        if(window.XMLHttpRequest){
            return new XMLHttpRequest();
        }else{
            return new ActiveXObject("Microsoft.XMLHTTP");
        }
    }
    var xhr=createXHR();
    xhr.onreadystatechange=function(){
        if(xhr.readyState==4){
            if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
                console.log(xhr.responseText);
            }else{
                console.log("请求失败："+xhr.status);
            }
        }
    };
    xhr.open('get',"example.txt",true);//true表示发送异步请求
    xhr.send(null);

三、post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript">
     function checkname(){
        //ajax方式用户名校验
        //1、获取用户名信息
        var nm=document.getElementById("username").value;
        //对传递的特殊字符串进行编码处理  tn&age=34
        //同时对中文也会进行编码处理
        nm=encodeURIComponent(nm);
        //把用户名信息变为“请求字符串“
        var info="name="+nm+"&age=23";
        //2、ajax校验
        var xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                alert(xhr.responseText);
            }
        }
        xhr.open('post','./05.php?addr=beijing');
        //post方式传递数据是模拟form表单传递数据
        //form表单的post格式数据是通过xml形式传递给服务器的
        xhr.setRequestHeader("content-type","application/x-www-form-urlencoded");
        xhr.send(info);
     }
    </script>
</head>
<body>
    <h2>ajax用户名的校验(post方式)</h2>
   <p>用户名：<input type="text" id="username" οnblur="checkname()"></p>
   <p>手机号码：<input type="text" id="usertel"></p>
</body>
</html>

四、GET和POST的区别，何时使用POST？

get和post方式区别：

1. GET请求会将参数跟在URL后进行传递，而POST请求则是作为HTTP消息的实体内容发送给服务器。在Ajax请求中，这种区别对用户是不可见的。

2.GET方式对传输的数据大小有限制(通常不能大于2KB)，而使用POST方式传递的数据量要比GET方式大的多(理论上不受限制)

3.GET方式请求的数据会被浏览器缓存起来，因此其他人就可以从浏览器的历史记录中读取到这些数据，例如账号和密码等。在某种情况下，GET方式会带来严重的安全性问题，而POST方式相对来说就比较安全。

4.GET方式和POST方式传递的数据在服务器端的获取也不相同。在PHP中，GET方式的数据可以用$_GET[]获取，POST使用$_POST[]获取。两种方式都可以使用$_REQUEST[]来获取。

GET：一般用于信息获取，使用URL传递参数，对所发送信息的数量也有限制，一般在2000个字符
POST：一般用于修改服务器上的资源，对所发送的信息没有限制。
GET方式需要使用Request.QueryString来取得变量的值，而POST方式通过Request.Form来获取变量的值，也就是说Get是通过地址栏来传值，而Post是通过提交表单来传值。


然而，在以下情况中，请使用 POST 请求：
无法使用缓存文件（更新服务器上的文件或数据库）
向服务器发送大量数据（POST 没有数据量限制）
发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

get请求需要注意的地方：

1.缓存(将请求地址缓存起来，如果下一次请求地址不变，则下次请求的内容将读取缓存中的数据，而不会去请求服务器上的数据)
我们可以通过在url？后面连接一个随机数或者时间戳来解决这一问题
2.传递中文参数乱码问题，通过编码encodeURI来解决

<body>
<input type="button" name="" value="提交数据" id="btn">
<script type="text/javascript">
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
	var xhr = new XMLHttpRequest();
	xhr.open('get','get_form.php?username='+encodeURI('李四')+'&age=123&'+new Date().getTime(),true);
	xhr.send();
	xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){
		if(xhr.status == 200){
			alert(xhr.responseText);
		}
	}
}
}
</script>
</body>

get_form.php 

<?php
header("content-type:text/html;charset=utf-8");
$username = $_GET['username'];
$age = $_GET['age'];
echo "欢迎哈哈哈,你的名字是:{$username},年龄是:{$age}";
 ?>

post请求需要注意的地方：

1.post方式，数据放在send()里面作为参数传递
2.需要声明要发送的数据的类型

xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');
这里如果不设置Content-Type头部信息，那么发送给服务器的数据就不会出现在$_POST超级全局变量中。 
<body>
<input type="button" name="" value="提交数据" id="btn">
<script type="text/javascript">
var oBtn = document.getElementById("btn");
oBtn.onclick = function(){
	var xhr = new XMLHttpRequest();
	xhr.open('post','post_form.php',true);
	//post方式，数据放在send()里面作为参数传递
	xhr.setRequestHeader('content-type', 'application/x-www-form-urlencoded');//声明发送的数据类型
	xhr.send('username=李四&age=300');
	//post方式没有缓存问题和编码问题
	xhr.onreadystatechange = function(){
	if(xhr.readyState == 4){
		if(xhr.status == 200){
			alert(xhr.responseText);
		}
	}
}
}
</script>
</body>

post_form.php

<?php
header("content-type:text/html;charset=utf-8");
$username = $_POST['username'];
$age = $_POST['age'];
echo "你的名字是:{$username},年龄是:{$age}";
 ?>

五、XMLHttpRequest对象

它的属性有：

onreadystatechange  每次状态改变所触发事件的事件处理程序。
responseText     作为响应主体被返回的文本。
responseXML  将响应信息格式化为Xml Document对象并返回
status           响应的HTTP状态，比如常见的404（未找到）和200（已成功）
status Text      HTTP状态说明

当XHR对象把一个HTTP请求发送到服务器的过程中会经历几个状态，直到请求被处理，然后才接收一个回应。readyState就是XHR请求的状态属性，它本身有5个属性值：

0：未初始化。尚未调用open()方法
1：启动。已经调用open()方法,但尚未调用send()方法
2：发送。已经调用send()方法，但尚未接收到响应
3：接收。已经接收到部分响应数据                                                                                                                                                                                                                                                4：完成。已经接收到全部响应数据，而且已经可以在客户端使用了
只要readyState属性的值由一个值变成另一个值，都会触发一次onreadystatechange事件。通常，我们只对readyState值为4的阶段感兴趣，因为这时所有数据都已经就绪。

不过，必须要在调用open()方法之前指定onreadystatechange事件处理程序才能确保跨浏览器兼容性

六、http状态码

1字头：消息。这一类型的状态码，代表请求已被接受，需要继续处理。
2字头：成功。这一类型的状态码，代表请求已成功被服务器接收、理解、并接受。
3字头：重定向。这类状态码代表需要客户端采取进一步的操作才能完成请求。
4字头：客户端错误。这类状态码代表了客户端看起来可能发生错误，妨碍了服务器的处理。
5字头：服务器错误。这类状态码代表了服务器在处理请求的过程中有错误或者异常状态发生


100 Continue
  初始的请求已经接受，客户应当继续发送请求的其余部分
101 Switching Protocols
  服务器将遵从客户的请求转换到另外一种协议
201 Created
  服务器已经创建了文档，Location头给出了它的URL。
202 Accepted
  已经接受请求，但处理尚未完成。
203 Non-Authoritative Information
  文档已经正常地返回，但一些应答头可能不正确，因为使用的是文档的拷贝
204 No Content
  没有新文档，浏览器应该继续显示原来的文档。如果用户定期地刷新页面，而Servlet可以确定用户文档足够新，这个状态代码是很有用的
205 Reset Content
  没有新的内容，但浏览器应该重置它所显示的内容。用来强制浏览器清除表单输入内容
206 Partial Content
  客户发送了一个带有Range头的GET请求，服务器完成了它
300 Multiple Choices
  客户请求的文档可以在多个位置找到，这些位置已经在返回的文档内列出。如果服务器要提出优先选择，则应该在Location应答头指明。
301 Moved Permanently
  客户请求的文档在其他地方，新的URL在Location头中给出，浏览器应该自动地访问新的URL。
302 Found
  类似于301，但新的URL应该被视为临时性的替代，而不是永久性的。
303 See Other
  类似于301/302，不同之处在于，如果原来的请求是POST，Location头指定的重定向目标文档应该通过GET提取
305 Use Proxy
  客户请求的文档应该通过Location头所指明的代理服务器提取
307 Temporary Redirect
  和302（Found）相同。许多浏览器会错误地响应302应答进行重定向，即使原来的请求是 POST，即使它实际上只能在POST请求的应答是303时才能重定向。由于这个原因，HTTP 1.1新增了307，以便更加清除地区分几个状态代码： 当出现303应答时，浏览器可以跟随重定向的GET和POST请求；如果是307应答，则浏览器只能跟随对GET请求的重定向。
400 Bad Request
  请求出现语法错误。
401 Unauthorized
  客户试图未经授权访问受密码保护的页面。应答中会包含一个WWW-Authenticate头，浏览器据此显示用户名字/密码对话框，然后在填写合适的Authorization头后再次发出请求。
403 Forbidden
  资源不可用。
405 Method Not Allowed
  请求方法（GET、POST、HEAD、Delete、PUT、TRACE等）对指定的资源不适用。
406 Not Acceptable
  指定的资源已经找到，但它的MIME类型和客户在Accpet头中所指定的不兼容
407 Proxy Authentication Required
  类似于401，表示客户必须先经过代理服务器的授权。
408 Request Timeout
  在服务器许可的等待时间内，客户一直没有发出任何请求。客户可以在以后重复同一请求。
409 Conflict
  通常和PUT请求有关。由于请求和资源的当前状态相冲突，因此请求不能成功。
410 Gone
  所请求的文档已经不再可用，而且服务器不知道应该重定向到哪一个地址。它和404的不同在于，返回407表示文档永久地离开了指定的位置，而404表示由于未知的原因文档不可用。
411 Length Required
  服务器不能处理请求，除非客户发送一个Content-Length头。
412 Precondition Failed
  请求头中指定的一些前提条件失败
413 Request Entity Too Large
  目标文档的大小超过服务器当前愿意处理的大小。如果服务器认为自己能够稍后再处理该请求，则应该提供一个Retry-After头
414 Request URI Too Long
  URI太长
416 Requested Range Not Satisfiable
  服务器不能满足客户在请求中指定的Range头
501 Not Implemented
  服务器不支持实现请求所需要的功能。例如，客户发出了一个服务器不支持的PUT请求
502 Bad Gateway
  服务器作为网关或者代理时，为了完成请求访问下一个服务器，但该服务器返回了非法的应答
503 Service Unavailable
  服务器由于维护或者负载过重未能应答。例如，Servlet可能在数据库连接池已满的情况下返回503。服务器返回503时可以提供一个Retry-After头
504 Gateway Timeout
  由作为代理或网关的服务器使用，表示不能及时地从远程服务器获得应答
505 HTTP Version Not Supported

  服务器不支持请求中所指明的HTTP版本

七、HTTP头部信息

Accept 表示浏览器能够处理的内容类型
Accept-Encoding 表示浏览器能够处理的压缩编码
Accept-Language 表示浏览器当前设置的语言
Host 表示发出请求的页面所在的域
Referer 表示发出请求页面的URI
User-Agent 表示浏览器的用户代理字符串
Connection  Keep-Alive   浏览器与服务器之间连接的类型

八、传统Ajax问题

1、可以无刷新改变页面内容，但无法改变页面URL
2、为了更好的可访问性，内容发生改变后，通常改变URL的hash
3、hash的方式不能很好的处理浏览器的前进、后退等问题，进而浏览器引入了onhashchange的接口，不支持的浏览器只能定时去判断hash是否改变。但这种方式对搜索引擎很不友好，twitter和google约定了使用#!xxx（即hash第一个字符为!），搜索引擎进行支持。

九、Ajax模拟登陆

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<title>ajax登录</title>
	<style type="text/css">
	*{
		margin: 0;
		padding: 0;
		list-style: none;
		text-decoration: none;
		outline: none;
	}
	a{
		display: inline-block;
		position: absolute;
		top: 10px;
		right: 30px;
	}
	.box{
		display: none;
		width: 300px;
		height: 300px;
		position: absolute;
		top:50%;
		left:50%;
		margin-top: -150px;
		margin-left: -150px;
		/*border:1px solid #ccc;*/
		padding: 10px;
		z-index: 9999;
		background: #fff;
	}
	.list{
		margin-top: 15px;
	}
	.list label{
		display: inline-block;
		text-align: right;
		/*border: 1px solid red;*/
		width: 80px;
	}
	.input_list{
		display: inline-block;
		margin-left: 10px;
	}
	.input_list .sub{
		padding: 5px;
		width: 80px;
		cursor: pointer;
	}
	.mask{
		display: none;
		position: absolute;
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.5);
		z-index: 999;
	}
	</style>
</head>
<body>
<a href="javascript:;" id="link">登录</a>
<div class="box">
	<form action="#">
		<div class="list">
		<label>姓名:</label>
		<div class="input_list">
			<input type="text" name="username" id="username" placeholder="请输入你的姓名">
		</div>
		</div>
		<div class="list">
		<label>密码:</label>
		<div class="input_list">
			<input type="password" name="pwd" id="pwd" placeholder="请输入你的密码">
		</div>
		</div>
		<div class="list">
		<label>家庭住址:</label>
		<div class="input_list">
			<input type="text" name="address" id="address" placeholder="请输入你的住址">
		</div>
		</div>
		<div class="list">
			<label></label>
			<div class="input_list">
				<input type="button" class="sub" value="提交" id="subBtn">
			</div>
		</div>
	</form>
</div>
<div class="mask"></div>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(function(){
	$("#link").click(function(){
		$(".box").show();
		$(".mask").show();
	});
	$("#subBtn").click(function(){
		var url = "http://localhost/mywork/ajax_login/test.php";
		var obj = {
		username : $("#username").val(),
		password : $("#pwd").val()
	      };
		// console.log(obj);
		$(".box").hide();
		$(".mask").hide();
		$.post(url,obj,function(data){
			if(data == "yes"){
				alert("登录成功");
				$("#link").html("欢迎 "+$('#username').val()+" 登陆");
			}else{
				alert("登录失败");
			}
		});
	});
});
</script>
</body>
</html>

test.php 
<?php
$username=$_POST['username'];
$password=$_POST['password'];
if($username == 'admin' && $password == '123'){
	echo "yes";
}else{
	echo "no";
}
?>


自由2017
关注
专栏目录
JavaWeb：AJAX
JackChan
10-29 3352
AJAX概述1、什么是AJAXAJAX（Asynchronous Javascript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程
Message:留言板在LAMP上使用html css js ajax学习
07-10
信息 留言板使用php html css js ajax mysql apache学习 由于字体文件太大，所以没有推送到github。 您可以在“/”中创建一个名为“fonts”的文件夹。 然后在里面放一个字体文件。
AJAX学习
Unplugged
10-15 3492
这两天看了几本书: >>,>,>,>,>.收获不小，把前面漏掉的一大块知识面好好充了充电。 感觉>这本书非常不错，虽然全书用了各种服务器端技术，而不是局限于Java,但是我也通过它了解了php, .net，呵呵。首先仔细讲解了几种常见的ajax技术的使用方法，还介绍了用AJAX开发RSS收集网站，WEB SERVICE与AJAX.最后用写了个邮件服务WEB.作者的代码写得非常好，注释完整，读它的代
AJAX入门
最新发布
2302_80283616的博客
07-28 643
配套模板代码里，对应 08 标题文件夹里是我同桌的代码，它把登录也写完了，但是无法登录，我们来到模板代码中，找到运行后，在不逐行查看代码的情况下，查看请求报文，看看它登录提交的相关信息对不对，帮他找找问题出现的原因。请求方法是一些固定单词的英文，例如：GET，POST，PUT，DELETE，PATCH（这些都是http协议规定的），每个单词对应一种对服务器资源要执行的操作。所以为了和服务器有效沟通我们要认识一下。统一资源定位符，简称网址，用于定位网络中的资源（资源指的是：网页，图片，数据，视频，音频等等）
JS的AJAX
weixin_43297321的博客
06-28 1409
Ajax 异步通信技术，是Asynchronous JavaScript+XML的简写，这种技术允许向服务器请求额外的数据而无需卸载（刷新）页面。 网页发展缓慢 网页传播消息、允许进行搜索查询 搜索（SEO） 媒介搜索 静态页面能被搜索到 如果页面是需要的时候动态写入，那就无法搜索到该页面 SEO的优化，得写成静态页面 造成早期网页不能向其他语言一样直接给服务端发送消息，服务器返回消息，所以早期的通信都是前后端不分离的情况（跳转页面），这种方式能够最大限度的允许我们通过SEO搜索页面 但是有缺陷（无
js中的ajax
xie_bro的博客
08-31 510
js中的ajax 一、简介 百科词条：         Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。         通过在后台与服务器进行少量数据交换，Ajax 可以
JS中的ajax
热门推荐
不想写代码的一天
06-17 1万+
AJAX 传统的web交换缺点： 1.流量损失 2.浪费时间和带宽 AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。 概念： ajax使网页异步刷新，在不重新加载整个页面时，对网页的局部进行刷新。 特点： 局部刷新； 最大的特点：局部刷新 ajax的优点： 1.局部刷新； 2,。优化了浏览器与服务器之间的传输，减少了不必要...
基于JavaScript、HTML和CSS的Ajax学习设计源码
05-30
本项目是基于JavaScript、HTML和CSS的Ajax学习设计源码，包含148个文件，主要文件类型为png、js、jfif、html、css、jpg和json。该项目适用于Ajax学习的开发和设计，为用户提供了一个丰富的资源库，包含多种文件类型...
Ajax学习全套(最全最经典)
12-10
**Ajax 全套学习：构建交互式Web应用** Ajax（Asynchronous JavaScript and XML）是一种用于创建高度交互式和响应式Web应用的技术。它允许开发者在不刷新整个页面的情况下与服务器进行数据交换，从而提升了用户体验...
js-ajax(js)
muzidigbig的博客
07-03 3200
一、Ajax概述 1．什么是同步，什么是异步 同步现象：客户端发送请求到服务器端，当服务器返回响应之前，客户端都处于等待卡死状态（不能进行其他操作） 异步现象：客户端发送请求到服务器端，无论服务器是否返回响应，客户端都可以随意做其他事情，不会被卡死（可以进行其他操作） 2．Ajax的运行原理 页面发起请求，会将请求发送给浏览器内核中的Ajax引擎，Ajax引擎会提...
Ajax学习
m0_66239230的博客
01-15 519
客户端与服务器： 在上网过程中客户端负责获取数据，服务器负责发送和接受数据 url的组成： 通信协议+服务器地址+路径 抓包 通过F12开发人员工具，选择网络选项进行数据获取 资源分为静态资源和动态资源，静态资源指的是页面中img、js、css等一切固定的内容，动态资源指的是从服务器中请求到的数据内容 ajax是一种异步请求数据的web开发技术（在不需要重新刷新页面的情况下，通过异步请求加载后台数据，实现局部刷新） Portman可以在不写任何代码的情况下更快捷的从某个服务器获取到数据，用来
JS实现AJAX
Vamps
09-14 376
index.jsp <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%> <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4...
AJAX（详解）
冰霜的博客
09-11 2880
AJAX 1.什么是AJAX？ AJAX即“Asynchronous Javascript And XML”（异步的JavaScript和XML），是指一种创建交互式网页应用的网页开发技术，用于浏览器和服务器之间进行数据交互。AJAX在浏览器与Web服务器之间使用异步数据传输（HTTP请求），这样就可使网页从服务器请求少量的信息，而不是整个页面。AJAX描述了一种主要使用脚本操作HTTP的Web应用架构，AJAX应用的主要特点是使用脚本操纵HTTP和Web服务器进行数据交换，不会导致页面重载。 对AJA
Ajax到JQuery Ajax学习指南
"这篇教程主要关注Ajax到JQuery Ajax的学习，涵盖了XMLHttpRequest对象的创建以及其在不同浏览器环境中的实现方式。" Ajax技术是Web开发中的一个重要组成部分，它允许页面在不重新加载整个页面的情况下与服务器进行...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值