ajax邮箱心得 - 爱码网

案例总结

开始介绍

今天写了一个案例和封装了ajax函数及node服务端知识点，总得来说，时间花了很长，但最后结果还是好的。
首先先说一下：我干了什么

为了学习node的综合案例，我又回去复习了前面的ajax，开始学的时候ajax学了一半，因为那时候还没学node所以很多知识都是摸棱两可。很是烦恼!

复习ajax，开始先回顾了原生写法，然后在封装了ajax函数，这样做案例就会非常的快！♥

但是有一点因为学了node总是和ajax里面知识点搞混！

路径问题(重点!!)

发现ajax里面的路径和node路径总是不能访问！(很烦恼)

// 这是能接收的数据路径.
app.use(\'/node_modules/\', express.static(\'./node_modules/\'))
app.use(express.static(path.join(\'./public\')))
// 本来按照ajax里面因该这样写。
app.use( express.static(path.join(__dirname, \'node_modules/\')))
app.use(express.static(path.join(__dirname, \'public\')));
// 但是无论如何都不能访问，我哭了!
// 本来按理说，第二种要好一点 __dirname,动态绝对路径！因该是可以的。

拼写问题

总是写错(下面是封装的ajax函数)

// 下面地23行代码，开始写的时候浏览器报错，我还以为是封装错了。原来是传递的参数我传成了字符串类型！我giao
function ajax(option) {
    var defaults = {
        type: \'get\',
        url: \'\',
        data: {},
        header: {
            \'Content-Type\': \'application/x-www-form-urlencoded\'
        },
        success: function(){},
        error: function(){}
    }
    Object.assign(defaults, option)
    var xhr = new XMLHttpRequest()
    var parms = \'\'
    for (attr in defaults.data) {
        parms += attr + \'=\' + defaults.data[attr] + \'&\'
    }
    parms = parms.slice(0, -1)
    if (defaults.type === \'get\') {
        defaults.url += \'?\' + parms
    }
   **xhr.open(defaults.type, defaults.url)**
    if (defaults.type === \'post\') {
        // post有两种形式所以
        xhr.open(\'defaults.type\', \'defaults.url\')
        xhr.setResponseHeader(\'Content-Type\', defaults.header[\'Content-type\'])
        if (defaults.header[\'Content-Type\'] == \'application/json\') {
            xhr.send(JSON.stringify(defaults.data))
        }
        xhr.send(parms)
    } else {
        xhr.send()
    }
    xhr.onload = function() {
        // 从服务端响应会有几种不同的东西
        var contentType = xhr.getResponseHeader(\'Content-Type\')
        var responseText = xhr.responseText
        if (contentType.includes(\'application/json\')) {
            responseText = JSON.parse(responseText)
        }
        if (xhr.status == 200) {
            defaults.success(responseText, xhr)
        } else {
            defaults.error(responseText, xhr)
        }
    }
    xhr.onerror = function() {
        // 失败了就返回对象xhr
        defaults.error(xhr)
    }
}

案例问题(验证邮箱案例)
案例问题,我使用了node里面的新建了router路由，将代码分离，便于维护！

/* 这里是调用ajax函数。
值得注意的是
data: {
em: emali_value
}
在原生代码里面(就是封装函数里面代码)
这里使用了get方式
拼接方式因该是这样的: http://localhost:3000/jiazai?em=2268128377@qq.com (例子)
原生里面会输入xhr.send()发送
然后node服务器会接收参数来判断。req.query.em
> 这里以后用数据库来判断是否存在(现在这是简单传入参数判断)
*/
ajax({
     type: \'get\',
     url: \'http://localhost:3000/jiazai\',
     data: {
         em: emali_value
     },
     success: function(result) {
         p_text[0].innerHTML = result.message
         p_text[0].className = \'tuchu good\'
     },
     error: function(result) {
         p_text[0].innerHTML = result.message
         p_text[0].className = \'tuchu error\'
     }
})

   //node: code
   var express = require(\'express\')
   var router = express.Router()
   
   router.use(\'/jiazai\', function(req, res) {
       var email = req.query.em
       if (email == \'2268128377@qq.com\') {
           res.status(400).send({
               message: \'邮箱已经被注册过了\'
           })
       } else {
           res.send({
               message: \'恭喜你，注册成功\'
           })
       }
   })
   
 module.exports = router