node_前端js原生ajax

html页面

<!DOCTYPE html>
<html lang="zh-cn">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="./css/index.css">
</head>
<body>
  首页
  <button id="loadData">加载数据</button>
  <div id="updata"></div>
</body>
<script type="text/javascript">
  //原生ajax网络请求
  document.querySelector('#loadData').addEventListener('click', (ev)=>{
    // 1.创建XMLHttpRequest对象 兼容低版本浏览器
    let xhr = new XMLHttpRequest() || new ActiveXObject('microsoft.XMLHTTP')
    // 2.建立请求连接通道
    xhr.open('get', 'interface.json') //相对地址
    // get与post区别
    // get请求发送不能传参，参数拼接在请求url地址后面 
    // http://localhost:8888/interface.json?count=1&name=jack&age=18
    // 数据暴露在url地址中，安全性能低，速度快
    
    // post请求发送可穿参 xhr.send('count=1&name=jack&age=18')
    // 设置请求头 注：post方式必须设置请求头（在建立连接后设置请求头）
    // xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    // post数据打包加密发送，安全性能高
    
    // 3. 发送请求
    xhr.send()
    // 4.监听相应内容
    xhr.onreadystatechange = () => {
      // readyState：返回当前文档的载入状态
      // 0-(未初始化)还没有调用send()方法
      // 1-(载入)已调用send()方法，正在发送请求
      // 2-(载入完成)send()方法执行完成，已经接收到全部响应内容
      // 3-(交互)正在解析响应内容
      // 4-(完成)响应内容解析完成，可以在客户端调用了
      if (xhr.readyState == 4) {
        // status常用状态 200成功 304重定向状态 404客户端错误状态 500 服务器错误
        let status = xhr.status
        if (status>=200 && status<300 || status==304) 
        //请求返回的数据保存在xhr.responseText属性中
        // 决定数据是由xhr.readyState传送过来, status只是定义的状态码
        updata(xhr.responseText)
      }
    }
  })
  
  function updata (data) {
    document.querySelector('#updata').innerHTML = data
  }
</script>
</html>

 

node.js

let http = require('http')
let fs = require('fs')
let url = require('url')
let querystring = require('querystring')
let server = http.createServer((req, res)=>{
  let urlObj = url.parse(req.url)
  let querystringObj = querystring.parse(urlObj.query)
  //数据接口监听
  if (urlObj.pathname == '/interface.json') {res.end("{name: 'jack', age: 18, job: 'web'}")}
  else {
    //静态资源管理
    fs.readFile(__dirname + '/src' + urlObj.pathname, (err, data)=> {
      if (err) return err
      else res.end(data)
    })
  }
}).listen(8888)

 

posted @ 2020-03-04 21:17  前端之旅  阅读(316)  评论(0)    收藏  举报