ajax

本文导航

  1. ajax很重要
  2. 一个网页可以事先没有数据，通过JS加载后续数据
  3. ajax技术的特性就是无刷新

  • 作者：KK

  • 发表日期：2017.7.15

记得在《JavaScript常用基础》系列文章中，我对ajax是只字未提，因为我觉得新手只要先解决网页排版问题和一些基本的操作交互效果就好了，一下子跟新手说ajax往往会让他们比较懵（实际上多年来我接触到很多前端新手都不懂ajax就是证明，个人觉得主要是不了解服务端吧）

好了如果你能用心学好ajax，那就不是一个“网页排版工程师”了，你将离真正的前端工程师又接近了一步

ajax很重要

网页上要显示数据嘛，这些数据哪里来呢，有好多是通过ajax向服务器请求下来的

比如你QQ空间啊，拉到底下加载下一页好友动态，这个过程就是用ajax请求下来的

好了你先这么认为：ajax可以把数据下来

一个网页可以事先没有数据，通过JS加载后续数据

跟着我做测试，建一个text.html，复制以下代码放进去

<html>
<head>
<meta charset="utf-8"/>
<title>ajax 测试</title>
<script src="http://www.kkh86.com/it/assets/js/jquery.js"></script>
<script>
function getData(){
	var callback = function(数据){
		$('#content').html(数据);
	};

	$.get('data.txt', callback);
}
</script>
</head>
<body>

<button type="button" onclick="getData()">获取数据</button>

<div id="content">此地没有数据三百G</div>

</body>
</html>

然后在该网页的同一文件夹下新建一个data.txt文件，在里面写一些内容，比如“abc123”

将这个网页文件和数据文件放在Web主机目录下通过主机来浏览（比如http://localhost/test.html），不能像平时测试其它排版或JS代码那样直接双击运行

访问后再点击按钮，它会通过$.get这段代码请求读取相同目录下的data.txt文件里的内容，当获取到内容后会触发callback函数，函数会收到一个参数（就是数据），这些数据就是txt文件里面的内容了

ajax技术的特性就是无刷新

使用ajax功能可以不用刷新就实现改变网页的内容，以上是借jQuery的$.get方法来实现ajax

ajax的全称是Asynchronous Javascript And XML，我只是走过场地提一下，其实很多人背不出来，也没多少公司会提这样的面试题

本文章主要快速引导你学会使用jQuery实现ajax获取数据，不是教你理解ajax的根本，晚点我再出文章，反正我觉得新手学这些会绕得晕，你只管理解为读数据好了

话说回来啊，如果没有ajax，你想想，像QQ空间这样内容体量庞大的网站，怎么可能会一下子全部输出这么多HTML呢，所以都是先写一个空壳页面，各个区域都没有数据，然后在某个时刻加载其它数据咯