// 什么是ajax? 异步的JavaScript和xml，英文全称async javascript and xml
// AJAX的好处？并不能提高程序执行的性能，但是可以防止页面阻塞，实现无刷新效果，增强了用户体验
// ajax中有很多，原生js中有一个xmlhttprequest对象是专门负责异步请求。
// 还是jQuary中的$.ajxa(),$,get(),$.getJSON,$.post()等还有ES6中的丰田车，axios.js脚本库中也有ajax请求方法
百度词条
Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和XML），是指一种创建交互式网页应用的网页开发技术。
Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。
Ajax 是一种用于创建快速动态网页的技术。
Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。
简单说：无需刷新就可以更新页面数据
实例：
ajax请求进行客户端渲染
ajax请求数据再渲染到视图上
router/index.js
// 在Node中每一个js文件的作用域都是独立的，当前js文件中的变量，方法只在当前js文件中有效，这一点一定和浏览器区分。即使外层的index.js已经引入了express模块，在当前router/index.js中也不能使用，要想在当前router/index.js中使用express模块，必须重新引入。
// 在浏览器端，如果一个HTML文档同时引用两个js文件，这两个js文件中的全局文件是共享的
var express = require("express");
// 先创建一个路由实例
var route = express.Router();
// 通过路由实例来创建一条“路”，创建一个API接口（application program interface应用程序接口）
/* alt shift a切换块注释 */
/* "路"有以下常用的：
get()客户端向服务器端获取信息（搜索，在浏览器地址栏中输入url地址并回车，发起的也是get请求）
post()客户端向服务器端提交信息（注册用户添加购物车）
put()客户端修改服务器端信息
delete() 客户端要删除服务器的信息
如果一个项目的接口满足这四种请求方式，我们称它是RESTFUL风格的接口
*/
// 第一个参数的路由器的路径（名字），第二个参数是路由的业务逻辑（回调函数）
// req=request负责请求，站在客户端的角度
// res=response负责响应，站在服务器端的角度
// next转到下一个网线
route.get("/order",function(req,res,next){
//res.send("我是订单列表页面");
// 此方法有硬代码，写死了
// res.sendFile("C:/Users/ASUS/Desktop/yft/上课代码/2018.8.13使用express手动创建项目/public/order.html");
// 此种方法还不是最好的
res.sendFile(__dirname.replace('router','')+"./public/order.html");
// __dirname="C:/Users/ASUS/Desktop/yft/上课代码/2018.8.13使用express手动创建项目/router"
// 后面介绍的render
// res.render();
});
route.get("/order/detail",function(req,res,next){
res.send("我是订单详情页面");
});
route.get("/api/getData",function(req,res,next){
res.json({
code:200,
message:"成功",
content:"我是更改后的内容。"
})
});
// 把路由导出
module.exports = route;
/* 路径：
相对路径：如果一个路径是/开头的，表示当前运行文件所在的盘符的根目录
如果一个路径是以./开头的或者直接以文件（夹）名字开头，表示当前运行的js文件所在的目录
如果一个路径以../开头，表示当前路径的上层目录
*/
// 访问http://localhost:3000/order/detail
order.html
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="script/jquery.js"></script>
</head>
<body>
<h1>我是订单列表页面2</h1>
<button id="btnChange">更改标题</button>
<script>
// $(document).ready(function(){})
$(function(){
$("#btnChange").click(function(){
// 1.从接口中获取数据
/* res.json({
code:200,
message:"成功",
content:"我是更改后的内容。"
}) */
// alert("fdv");
// ------------------------------方法1-------------------------
$.get("/api/getData",function(data,textStatus,xhr){
// router的index.js写route.get。。
console.log(data);
console.log(textStatus);
console.log(xhr);
// 更改元素内容
$("h1").text(data.content);
})
// 不会阻塞下方代码的执行
console.log("这行代码什么时候执行");//先执行
// 创建xhr对象（异步请求对象）
//-------- -------------------方法2-------------------------------
/* var xhr = new XMLHttpRequest();
// 使用异步对象打开远程连接
// 第一个参数是请求方式：GET，POST，PUT，DELETE
// 第二个参数是请求的接口地址："/api/getData"
xhr.open("GET","/api/getData");
//客户端开始发送请求，如果要携带数据 ，请在send方法中传值
xhr.send();
// 客户端需要接收服务器端的响应
// 发起监听
xhr.onreadystatechange = function(){
// 当状态为200时，表示成功，xhr.readyState表示数据已经准备好
if(xhr.status === 200 && xhr.readyState === 4)
// console.log(xhr);
console.log(xhr.responseText);
// JSON.parse()把一个字符串解析成js对象，方便打点调用
var data = JSON.parse(xhr.responseText);
$('h1').text(data.content);
} */
//-------- -------------------方法3-------------------------------
// 使用$.ajax()是对xmlhttprequest对象的封装
// $.get()是对$.ajax()的进一步封装
/* $.ajax({
method:"GET",
url:"/api/getData",
// 请求成功时回调的函数
success:function(data){
console.log(data);
$('h1').text(data.content);
},
// 失败时执行的回调函数
error:function(err){
console.log(err);
}
}) */
//-------- -------------------方法4------------------------------
// $.getJSON()是专门用来请求JSON格式的数据
/* $.getJSON("/api/getData",function(data){
$('h1').text(data.content);
}) */
})
})
</script>
</body>
</html>