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