使用

一.准备工作

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

 

上一篇:xhr的常用属性方法整理


下一篇:解决浏览器无法读取绝对路径文件的问题——mklink