一.准备工作
1.初始化环境:npm init --yes
2.下载express包:npm install express --save
3.编写js代码
// (1). 引入express
const express = require('express');
// (2). 创建应用对象
const app = express();
// (3). 创建路由规则
// request 是对请求报文的封装
// response 是对响应报文的封装
app.get('/', (request, response) => {
// 设置响应
response.send("Hello Express");
});
// (4). 监听端口,启动服务
app.listen(8000, () => {
console.log("服务已经启动, 8000 端口监听中...");
})
4.运行js程序:node xxx.js
5. 安装nodemon自动重启工具:npm install -g nodemon ndoemon server.js
二.核心对象使用步骤
1.创建XMLHttpRequest 对象
var xhr = new XMLHttpRequest();
2. 设置请求信息(请求方法和url)
// 请求方式
xhr.open(method, url);
//可以设置请求头,一般不设置
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
3. 发送请求
xhr.send(body) //get请求不传 body 参数,只有post请求使用
4. 接收响应(事件绑定,处理服务端返回的结果)
//xhr.responseXML 接收 xml格式 的响应数据
//xhr.responseText 接收 文本格式 的响应数据
xhr.onreadystatechange = function (){
// readyState 是 xhr对象中的属性, 表示状态 0 1 2 3 4
if(xhr.readyState == 4 && xhr.status == 200){
var text = xhr.responseText;
console.log(text);
}
}
三、API总结
XMLHttpRequest():创建 XHR 对象的构造函数
status:响应状态码值,如 200、404
statusText:响应状态文本,如 ’ok‘、‘not found’
readyState:标识请求状态的只读属性 0-1-2-3-4
onreadystatechange:绑定 readyState 改变的监听
responseType:指定响应数据类型,如果是 ‘json’,得到响应后自动解析响应
response:响应体数据,类型取决于 responseType 的指定
timeout:指定请求超时时间,默认为 0 代表没有限制
ontimeout:绑定超时的监听
onerror:绑定请求网络错误的监听
open():初始化一个请求,参数为:(method, url[, async])
send(data):发送请求
abort():中断请求 (发出到返回之间)
getResponseHeader(name):获取指定名称的响应头值
getAllResponseHeaders():获取所有响应头组成的字符串
setRequestHeader(name, value):设置请求头
四、jQuery 中的AJAX
1. get 请求:$.get(url, [data], [callback], [type])
url:请求的URL 地址
data:请求携带的参数
callback:载入成功时回调函数
type:设置返回内容格式,xml, html, script, json, text, _default
2. post 请求:$.post(url, [data], [callback], [type])
3. 通用方法
$.ajax({
// url
url: 'http://127.0.0.1:8000/jquery-server',
// 参数
data: {a:100, b:200},
// 请求类型
type: 'GET',
// 响应体结果
dataType: 'json',
// 成功的回调
success: function(data){console.log(data);},
// 超时时间
timeout: 2000,
// 失败的回调
error: function(){console.log('出错拉~');},
// 头信息
headers: {
c: 300,
d: 400
}
})
五. 跨域
CORS:
router.get("/testAJAX" , function (req , res) {
//通过res 来设置响应头,来允许跨域请求
//res.set("Access-Control-Allow-Origin","http://127.0.0.1:3000");
res.set("Access-Control-Allow-Origin","*");
res.send("testAJAX 返回的响应");
});