ajax小test

内容简介：ajax小test

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX DEMO</title>
    <style>
        *{margin: 0;padding: 0;box-sizing: border-box;}
        ol{list-style: none;}
        #container img{width: 150px;}
        #container {display: flex;justify-content: center;flex-wrap: wrap;max-width: 800px;}
    </style>
</head>
 
<body>
<button id="btn">加载</button>
<ol id="container"></ol>
<script>
    let page = 1;
    let btn = document.getElementById("btn");
    let con = document.getElementById("container");
    btn.onclick = function () {
        let req = new XMLHttpRequest();
        req.open("GET","/page"+page+".json");
        req.onload = function () {
            page += 1;
            let object = JSON.parse(req.responseText);
            console.log(object)
            let nextPage = object.hasNextPage;
            console.log(nextPage);
            if(!nextPage){
                btn.disabled = true;
            }
            let array = object.items;
            array.forEach(function (item,index) {
                let li = document.createElement("li");
                let img = document.createElement("img");
                li.appendChild(img);
                img.src=item.url;
                con.appendChild(li);
            })
 
        }
        req.send();
    }
</script>
</body>
</html>

var http = require('http')
var fs = require('fs')
var url = require('url')
 
//console.log(Object.keys(http))
var port = process.env.PORT || 8888;
 
var server = http.createServer(function(request, response){
 
  var temp = url.parse(request.url, true)
  var path = temp.pathname
  var query = temp.query
  var method = request.method
 
  //从这里开始看，上面不要看
 
  if(path === '/'){  // 如果用户请求的是 / 路径
    var string = fs.readFileSync('./index.html')  
    response.setHeader('Content-Type', 'text/html;charset=utf-8')  
    response.end(string)   
  }else if(path === '/signUp' && method === 'POST'){
    getPostData(request, function(postData){
 
      let errors = checkPostData(postData)
      if(Object.keys(errors).length === 0){
        let {email, password} = postData
        let user = {
          email: email,
          passwordHash: frankHash(password) // 永远不要使用 MDN5，永远不要自己发明加密算法
        }
        // 写数据库
        let dbString = fs.readFileSync('./db.json', 'utf-8')  
        let dbObject = JSON.parse(dbString)
        dbObject.users.push(user)
        let dbString2 = JSON.stringify(dbObject)
        fs.writeFileSync('./db.json',dbString2, {encoding: 'utf-8'})  
      }else{
        response.statusCode = 400
      }
      response.setHeader('Content-Type', 'text/html;charset=utf-8') 
      response.end(JSON.stringify(errors)) // 运行在node.js
    })
  }else if(path === '/node_modules/jquery/dist/jquery.min.js'){
    let string = fs.readFileSync('./node_modules/jquery/dist/jquery.min.js')  
    response.setHeader('Content-Type', 'application/javascript;charset=utf-8')  
    response.end(string)   
  }else if(path === '/main.js'){
    let string = fs.readFileSync('./main.js')  
    response.setHeader('Content-Type', 'application/javascript;charset=utf-8')  
    response.end(string)   
  }else if(path === '/home'){
    var cookies = parseCookies(request.headers.cookie);
    response.setHeader('Content-Type', 'text/html;charset=utf-8')  
    if(cookies.logined === 'true'){
      response.end(`{cookies.user_id}已登录`)   
    }else{
      let string = fs.readFileSync('./home')  
      response.end(string)   
    }
  }else if(path === '/login' && method === 'POST'){
    // 读数据库
    getPostData(request, (postData)=>{
      let dbString = fs.readFileSync('./db.json', 'utf-8')  
      let dbObject = JSON.parse(dbString)
      let users = dbObject.users
 
      let {email, password} = postData
      let found 
      for( var i=0; i< users.length; i++){
        if(users[i].email === email && users[i].passwordHash === frankHash(password)){
          found = users[i]
          break
        }
      }
      if(found){
        // 标记该用户登录了 
        response.setHeader('Set-Cookie', ['logined=true; expires=1000; path=/;', 'user_id='+email+'; expires=123456789; path=/;'])
        response.end('')
      }else{
        response.statusCode = 400
        let errors = {email: '没有注册或密码错误'} 
        response.setHeader('Content-Type', 'text/html;charset=utf-8') 
        response.end(JSON.stringify(errors))   
      }
    })
  }else if(path === "/page1.json"){
      let string = fs.readFileSync("./page1.json");
      response.setHeader("content-type","application/json");
      response.end(string);
 
  }else if(path === "/page2.json"){
      let string = fs.readFileSync("./page2.json");
      response.setHeader("content-type","application/json");
      response.end(string);}
  else if(path === "/page3.json"){
      let string = fs.readFileSync("./page3.json");
      response.setHeader("content-type","application/json");
      response.end(string);}
  else if(path === "/page4.json"){
      let string = fs.readFileSync("./page4.json");
      response.setHeader("content-type","application/json");
      response.end(string);}
  else if(path === "/page5.json"){
      let string = fs.readFileSync("./page5.json");
      response.setHeader("content-type","application/json");
      response.end(string);}
  else{
    response.statusCode = 404
    response.setHeader('Content-Type', 'text/html;charset=utf-8') 
    response.end('找不到对应的路径，你需要自行修改 index.js')
  }
 
  // 代码结束，下面不要看
  console.log(method + ' ' + request.url)
})
 
function getPostData(request, callback){
    data = ''
    request.on('data', (postData) => {
      data += postData.toString()
    })
 
    request.on('end', () => {
      let array = data.split('&')
      let postData = {}
      for(var i=0; i<array.length; i++){
        let parts = array[i].split('=')
        let key = decodeURIComponent(parts[0])
        let value = decodeURIComponent(parts[1])
        postData[key] = value
      }
      callback.call(null, postData)
    })
}
 
function checkPostData(postData){
  let {email, password, password_confirmation} = postData
  let errors = {}
  // check email
  if(email.indexOf('@') <= 0){
    errors.email = '邮箱不合法'
  }
  if(password.length < 6){
    errors.password = '密码太短'
  }
 
  if(password_confirmation !== password){
    errors.password_confirmation = '两次输入密码不匹配'
  }
 
  return errors
}
 
function frankHash(string){
  return 'frank' + string + 'frank'
}
 
function parseCookies(cookie) { // JSON.parse
  try{
    return cookie.split(';').reduce(
      function(prev, curr) {
        var m = / *([^=]+)=(.*)/.exec(curr);
        var key = m[1];
        var value = decodeURIComponent(m[2]);
        prev[key] = value;
        return prev;
      },
      { }
    );
  }catch(error){
    return {}
  }
}
 
function stringifyCookies(cookies) { //JSON.stringify
  var list = [ ];
  for (var key in cookies) {
    list.push(key + '=' + encodeURIComponent(cookies[key]));
  }
  return list.join('; ');
}
 
server.listen(port)
console.log('监听 ' + port + ' 成功，请用在空中转体720度然后用电饭煲打开 http://localhost:' + port)

{
  "items": [
    {
      "url": "https://img3.doubanio.com/icon/ul1856810-26.jpg"
    },
    {
      "url": "https://img3.doubanio.com/icon/ul1856810-26.jpg"
    },
    {
      "url": "https://img3.doubanio.com/icon/ul1856810-26.jpg"
    },
    {
      "url": "https://img3.doubanio.com/icon/ul1856810-26.jpg"
    },
    {
      "url": "https://img3.doubanio.com/icon/ul1856810-26.jpg"
    }
  ],
  "hasNextPage":false
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，也希望大家多多支持 码农网

查看所有标签

本站部分资源来源于网络，本站转载出于传递更多信息之目的，版权归原作者或者来源机构所有，如转载稿涉及版权问题，请联系我们。