使用

一.准备工作

  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 返回的响应");
});