ajax

AJAX - 创建 XMLHttpRequest 对象

var xmlhttp = new XMLHttpRequest();

通过打印实例对象我们发现，我们打印的是 xmlhttp 对象，里面所有的属性即是 XMLHttpRequest() 这个构造函数原型对象身上的属性, 既 XMLHttpRequest.prototype的属性

　　.open()

　　.send()

　　.onreadystatechange

　　.readyState

　　.status

所以，xmlhttp实例对象可以访问到这些属性，但是send()和open()存在于圆形链上，xmlhttp.__proto = XMLHttpRequest.prototype

AJAX - 向服务器发送请求请求

向服务器发送请求

如需将请求发送到服务器，我们使用 XMLHttpRequest 实例对象的 open() 和 send() 方法：

open的第二个参数url，我们需要把要请求的文件起在本地服务器上，方法在底部

第二个参数url，文件在服务器上的位置，所以说要先本地起一个服务，然后在发请求（最底部有本地起服务的方法）

1 xmlhttp.open("get", "http://localhost:3000/data", true);  
2 xmlhttp.send();

AJAX - onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。

每当 readyState 改变时，就会触发 onreadystatechange 事件。

readyState 属性存有 XMLHttpRequest 的状态信息。

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

 xmlhttp.onreadystatechange = function () {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
      document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
    }
  };

AJAX - 服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性

完整代码：

 1 <body>
 2   <div id="myDiv">
 3 
 4   </div>
 5 </body>
 6 <script>
 7   var xmlhttp = new XMLHttpRequest();
 8   console.log(XMLHttpRequest.prototype)
 9 
10   console.log(xmlhttp.__proto__.send);
11   
12   xmlhttp.onreadystatechange = function () {
13     if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
14       document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
15     }
16   };
17 
18   xmlhttp.open("get", "http://localhost:3000/obj", true);
19   xmlhttp.send();
20 </script>

最后：

1. json-server

终端运行

npm init

安装json-server

npm install -g json-server

项目根目录新建 data.json 文件（就是将数据放到本地服务器上，方便ajax请求）

{
  "obj": {
    "title": "ajax哈哈哈"
  }
}

然后配置命令

"json:server": "json-server --watch data.json"

运行

npm run json:server

输出类似以下内容，说明启动成功

{^_^}/ hi!

  Loading data.json
  Done

  Resources
  http://localhost:3000/obj

  Home
  http://localhost:3000

浏览器访问 http://localhost:3000/obj，就看到数据了，ajax请求这个路径

json-server 的相关启动参数：

参数	简写	默认值	说明
--config	-c	指定配置文件	[默认值: "json-server.json"]
--port	-p	设置端口 [默认值: 3000]	Number
--host	-H	设置域 [默认值: "0.0.0.0"]	String
--watch	-w	Watch file(s)	是否监听
--routes	-r	指定自定义路由
--middlewares	-m	指定中间件 files	[数组]
--static	-s	Set static files directory	静态目录,类比：express的静态目录
--readonly	--ro	Allow only GET requests [布尔]
--nocors	--nc	Disable Cross-Origin Resource Sharing [布尔]
--no	gzip	, --ng Disable GZIP Content-Encoding [布尔]
--snapshots	-S	Set snapshots directory [默认值: "."]
--delay	-d	Add delay to responses (ms)
--id	-i	Set database id property (e.g. _id) [默认值: "id"]
--foreignKeySuffix	--	fks Set foreign key suffix (e.g. _id as in post_id)	[默认值: "Id"]
--help	-h	显示帮助信息	[布尔]
--version	-v	显示版本号	[布尔]

2，express插件

ajax

AJAX - 创建 XMLHttpRequest 对象

AJAX - 向服务器发送请求请求

向服务器发送请求

AJAX - onreadystatechange 事件

AJAX - 服务器 响应

最后：

1. json-server

json-server 的相关启动参数：

AJAX - 服务器响应