**后端index.js**
1. const exp = require('express')
2. app = exp()
3. app.use(exp.static('static'))
4. app.listen(3000,()=>{
5. console.log('服务器运行了')
6. })
**index.html**
1. <!DOCTYPE html>
2. <html lang="en">
3. <head>
4. <meta charset="UTF-8">
5. <meta name="viewport" content="width=device-width, initial-scale=1.0">
6. <meta http-equiv="X-UA-Compatible" content="ie=edge">
7. <title>Jquery Ajax</title>
8. </head>
9. <body>
10. <button id="btn">加载HTML内容</button>
11. <a href="#">加载JSON</a>
12. <input type="button" value="加载JS">
13. <section></section>
14. <section></section>
15. <section></section>
16. <script src="js/jquery.js"></script>
17. <script src="js/index.js"></script>
18. </body>
19. </html>
**info.html**
1. <h1>这里的内容是通过Ajax加载的</h1>
2. <p>
3. 这种方式需要服务端把数据拼成HTML 目前使用较少
4. 现在流行的是服务端直接返回json数据
5. 由浏览器中的js 完成html的拼装 原因有两个<br>
6. 1 服务端不再拼html 压力会小一点<br>
7. 2 js可以通过模板化很方便的将json转换成html
8. </p>
**index.js**
1. $('button').click(function(){
2. // load方法从服务器加载数据 并把返回的数据放入被选元素中
3. $('section').load('info.html')
4. })
5. $('a').click(function(){
6. $.getJSON('js/data.json',null,function(JSONDA){
7. alert(JSONDA.message)
8. })
9. })
10. $('input').click(function(){
11. $.getScript('js/script.js',function(res){
12. console.log(res)
13. })
14. })
**data.json**
1. {
2. "status":"success",
3. "message":"服务端直接返回JSON文件\n服务端接口没有开发时可以直接返回json文件模拟请求结果"
4. }
**script.js**
1. alert('来自js的问候')