我们知道，当点击一个链接或者提交一个表单，都会导致页面的刷新，而这会让一个页面彻底重新开始，正在进行的所有运算，都会被重置。
这就很难受了。毕竟有些时候我们并不希望跳转到到别的页面，而在当前页面中还有未完成的操作。可是这时候我们又需要向服务器提交一些数据，获得一些反馈。或者更简单一些，就是需要获取服务器上的一些数据。
整理一下需求，在不发生跳转的情况下，向服务器发送数据和获取服务器返回的数据。这要用到 Ajax。这个概念不深入的解释，反正知道用它就可以实现上面的目的就好了。
在这一章，我们使用 jQuery 来实现一个最简单的需求。
但是首先我们要明确几个细节。想使用 Ajax 就要有服务器，本地文件的形式是不行的。难道为了学习这项技术去购买一个服务器吗？当然不是，这里所说的服务器，应该是可以提供 http 服务的软件。这个就很简单了，去网上搜索各种 http 服务器软件，大概也就几百 kb 大小，就足够我们用了。
我来介绍两个简单的：
Web Server for Chrome，这是一款浏览器扩展，用起来十分的方便，虽然是全英文的，但其实只要打开以后，选择你网站跟目录的文件夹就可以了。服务会自动启动，也会把访问地址显示出来，可以说十分的新人友好了。高级的设置它也有，也就是说还可以满足我们复杂的需求。
Express，这是 VS Code 的一个插件，我们通过打开文件夹的方式打开项目的时候，可以用 F1 唤出命令，输入 Express，然后选择 Express: Host Current Workspace and Open in Browser 就行了。这会以当前文件夹为网站根目录启动一个 http 服务器，并在浏览器中打开。
这样和我们以前直接访问文件会有好多区别，比如协议不同了（// 前面的部分），比如根目录位置不同……反正这样就可以用 Ajax 了，就可以更帅了。
然后讲一下跨域。跨域就是跨域名[1]。就是不能够用 js 请求与当前域名不同的网址下的资源。这就好像你京东不能从我淘宝的库房拿东西给你的消费者一样。对，这是出于安全考虑做的设定。这个是可以绕过去的，但是我们不讲。
这一章篇幅快用完了，咱们得做点啥开心一下啊。于是我先有一个页面：
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>这个页面假装是数据</title></head><body>这里是数据的内容<div id="zy">重要数据！</div></body></html>保存为 data.html
然后再来一个页面，是用来被我们访问的：
<!DOCTYPE html><html lang="zh"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>我们来访问这个页面</title><script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script></head><body>这是页面中原有的数据<div id="box"></div><script>$(document).ready(function(){$('#box').load('data.html')})</script></body></html>代码好像有点长，其实真正新内容就一句：$('#box').load('data.html')，就是把后面这个网址中的内容，放进前面这个选择器对应的元素里。大家可以自己动手看看效果哦。
但是可能我们并不需要载入一个页面的所有数据，怎么办？$('#box').load('data.html #zy') 注意空格哦~这样就可以载入指定元素中的内容了。那么是否支持使用其他选择器呢？大家动手试试看吧。
暂无评论内容