AJAX

什么是AJAX

目的是为了减少表单在过程中过多请求相同页面导致的带宽浪费问题，同时可以减少表单填写错误而必须填写整套表单而带来的用户体验下滑。

创建XMLHttpRequest

• 状态机 01234 可以增强用户体验

  0：刚开始

  1：开始

  2：刚接受头部

  3：下载响应体

  4：搞定完成

注册验证小例子

index.js路由配置中

router.get('/checkname', function (req, res, next) {
    var username = req.query.username;
    var str = 'zzq';
    if(str === username){
        res.send(username + '已经存在');
    }else{
        res.send('用户名可以使用');
    }
});

index.ejs页面设置

<input type="text" name="username" value="" id="username">
<span id="info"></span>

js代码

<script type="text/javascript">
    var req = new XMLHttpRequest();
    var input = document.getElementById('username');
    var info = document.getElementById('info');
    input.addEventListener("blur",function (e) {
        //get请求，数据随url传输
        req.open('get','/checkname?username='+input.value);
        req.send();
        req.onreadystatechange = function () {
            if(req.readyState === 4){
                info.innerHTML = req.responseText;
            }
        }
    });
</script>

注意：
var req = new XMLHttpRequest();
1.接受数据——req.responseText;
router.get('/checkname', function (req, res, next)
1.路由接收get参数——var username = req.query.username;
2.路由接收post参数——req.body.username;

从后端向前段传JSON数据

页面文件js内容(用JQuery写)

<script type="text/javascript">
    $(document).ready(function () {
        $('button').click(function (e) {
            $.ajax({
                url:'/getZZ',
                type:'get',
                data:{name:'zzq'},
                success:function (data) {
                    // 从后端取数据，并动态显示于页面
                    // 后端数据在data中
                    $('<h1></h1>').addClass('title').text(data.title).appendTo($('#container'));
                    $('<h2></h2>').addClass('des').text(data.src).appendTo($('#container'));
                    $('<p></p>').addClass('content').text(data.content).appendTo($('#container'));
                },
                error:function (err) {

                }
            });
        });
    });
</script>

路由index.js配置

router.get('/getzz', function (req, res, next) {
    var obj = {
        title:'今日头条:lalalalalla',
        src:'今日来源:hehehehehehe',
        content:'buzhiodao 不知道。。。。'
    }
    res.json(obj);
});

注意：post写法相同，但传递的方式不同，接收用req.body接收

跨域访问

什么是源

源是指资源，网络中能请求到的都是资源。请求资源需要使用统一资源定位符。(Uniform Resource Locator,简称URL)

什么是同源

两个页面拥有相同的协议、端口、主机域名，name这两个就是同源页面。

跨域请求中间件

文档网站

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});