ajax && node服务 详解

ajax && node服务 详解

一、open — method 请求方式 && url 请求地址

xhr.open(method, url, async, user, password);

// 例：
xhr.open('GET', 'http://localhost:4010', true);

1.method

• GET POST PUT DELETE

• GET 获取

  • 如果发送请求的地址和上次的地址相同时，会调用缓存，不回去服务器请求
  • 在历史跳转后，回退时，get 不会再次发送请求
  • get 消息一把你只做一次请求，这次请求是做了一次请求头
  • get 请求发送时会将 cookie 也发送到服务器 （同域情况，跨域不能发送）
  • 发送请求时不会将数据传输到服务器，。但是有时候需要一些参数做标识，将这些参数通通过地址栏 search 的方式发送给服务端，但是这些内容会被明文显示，传输的数据也不能过多

• POST 发送

  • 不管地址是否相同都会请求消息
  • post 传送会做两次请求，一次是请求头，一次是请求发送数据
  • post 可以发送数据，但是这个数据不需要通过 url 地址，所以数据的消息可以非常多，并且可以有不同的格式和数据类型

• 在跨域的时候需要使用 PUT 和 DELETE 发送数据，需要在服务端响应设置

  • “Access-Control-Allow-Methods”:[“PUT”,“DELETE”]

• PUT 发送数据插入在尾部

• DELETE 删除数据内容

2.url 地址

• ajax 除了可以给服务端发送数据，也可以用于处理当前服务汇总文件
• 主要可以处理 text、json 以及 xml 数据的加载

3.async

• ajax 自带 async 异步属性，当然也可以同步
• 默认是 异步的 （true）

4.user && password

• 当访问一些网站是，服务端需要设置通信的用户名和密码验证

二、请求头发送

• 请求头，是在消息发送之前现将请求头发送到服务端

• 请求头一般会包括一系列的信息，比如发送的消息的长度

• 有一部分请求头会自动增加,比如：
  content-length,content-type

  • 当然可以修改部分请求头的值，content-type 默认的请求头设置值 text/plain；charset=utf-8
  • 在发送请求的时候使用，xhr.setRequestHeader(请求头名，请求头值)
  • 这个方法必须写在 open 之后 sand 之前
  • 所有的请求头必须是 首字母大写，用 - 连接
  • 自定义请求头必须以 X 开头，用 - 连接

• ******跨域的时候 请求头不能发送时 需要在响应投中设置
  "Access-Control-Allow-Headers":"*"

• 请求头设置

  'Content-Type': 'text/html;charset=utf-8',
  // 允许发送一下自定义的响应头
  'Access-Control-Expose-Headers': ['X-Name', 'X-Set-Cookie'],
  // 自定义属性
  'X-Name': 'xietian',
  'X-Set-Cookie': cookies,
  // 解决快于问题
  'Access-Control-Allow-Origin': '*',
  // 跨域是使用 put 和 delete 的时候需要设置
  'Access-Control-Allow-Methods': ['PUT', 'DELETE'],
  // 跨域时，请求头不能传输时，使用
  'Access-Control-Allow-Headers': '*',

• 获取响应头
  • xhr.getAllResponseHeaders()
    • 获取全部响应头
  • xhr.getResponseHeader(‘x-set-cookie’)
    • 根据响应头名获取响应头值
• 服务端获取响应头
  • req.headers[响应头名]

三、编码格式

1.URI 编码

• URI 编码是有一定信息的 URL 地址,比如：
  %E4%BD%A0%E5%A5%BD%EF%BC%8C%E6%AC%A2%E8%BF%8E%E6%9D%A5%E5%88%B0%E6%88%91%E7%9A%84%E5%AE%B6%E4%B9%A1
• encodeURIComponent
  • 将数据转为 URI 编码

  encodeURIComponent('你好，欢迎来到我的家乡');
  //%E4%BD%A0%E5%A5%BD%EF%BC%8C%E6%AC%A2%E8%BF%8E%E6%9D%A5%E5%88%B0%E6%88%91%E7%9A%84%E5%AE%B6%E4%B9%A1
  

• decodeURICompinent
  • 将 URI 编码转为正常数据

  decodeURIComponent(
    '%E4%BD%A0%E5%A5%BD%EF%BC%8C%E6%AC%A2%E8%BF%8E%E6%9D%A5%E5%88%B0%E6%88%91%E7%9A%84%E5%AE%B6%E4%B9%A1'
  );
  //你好，欢迎来到我的家乡
  

四、send 发送消息

• send 是发送数据的
  • 可以发送 类型化数组
    正整形数组 ArrayBffer Unit8Array Unit16Array Unit32Array
整形数组（可以使负数） Int8Array Int16Array Int32Array
浮点数 Float32Array Float64Array
  • Blob 数据
    • document 文档对象
    • 文本数据
    • FormData

其他

• timeout 超时事件

• abort 断开

• readyState

    readyState
      0  创建代理
      1  open已经打开
      2  send发送 并且请求头发送，并且响应头获取
      3  下载响应消息体
      4  下载完成响应消息体
  

• 例：

  var xhr = new XMLHttpRequest();
  xhr.addEventListener('load', loadHandler);
  // 超时事件，监听超时事件
  xhr.addEventListener('timeout', timeoutHandler);
  xhr.timeout = 3;
  xhr.open('POST', 'http://localhost:4010');
  xhr.send('a=1&b=2');
  
  function loadHandler(e) {
    console.log(xhr.response);
  }
  
  function timeoutHandler(e) {
    xhr.abort(); //断开连接
  }