8 6 js第九 十天 ajax 交互

nodejs 是一个可以让js作为服务端的平台    属于js的一种

mvc     model 模型（数据）  view   视图（模板）  controller 控制器

通过访问一个地址（controller） ，然后去跟后端调对应数据，然后把对应的数据（model）渲染到视图（view），最终展现给用户 ，这种思想叫做MVC思想（模式）

静态文件访问  ：

静态页面  html页面

动态页面  数据可变  和后端有交互的页面  叫做动态页面  访问控制器来输出的

终于讲到ajax了   

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。

XML 数据格式

异步 可以同时进行，节约成本事件  排队的例子

XMLHttpRequest  这个对象（构造函数）可以实现前端和后端的数据交互 

app.get('/news',function(req,res,next){
    res.json({
        code:1,
        data:[{
            id:1,
            title:'第一条新闻'
        },{
            id:2,
            title:'第二条新闻'
        },{
            id:3,
            title:'第三条新闻'
        },{
            id:4,
            title:'第四条新闻'
        }]
    },)
})
app.listen(8080,function(){
    console.log('服务已经开启 端口是8080')
})

<script>
        var xhr =new XMLHttpRequest();
        xhr.open('get','/news',false);
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4 && xhr.status==200)
            {
                var result = JSON.parse(xhr.responseText);
                var oList = document.getElementById('list');
                if(result.code== 1)
                {
                    var str = '';
                    oList.innerHTML = str;
                    for(var i=0;i<result.data.length;i++)
                    {   
                        str+='<li>'+result.data[i].title+'</li>';
                    }
                }
                else
                {
                    str+='请求数据错误';
                }   
                    oList.innerHTML = str;
            }
        }
        xhr.send(null)
    </script>

9.26填坑   关于readystate和status 为啥都要用   原因    https://www.cnblogs.com/teroy/p/3917439.html

 

 报错少favicon   解决方法   在head下加   <link rel="shortcut icon" href="#" />

静态资源  ：直接访问的文件 （页面 图片  css  js文件）

动态页面：通过控制器来访问的 随着后台数据变化而变化

路由（控制器）

JSON   XML它们都是一种数据格式

 二者对比  json文件要小   容易读取 维护方便 

json格式 1 {“name”:"zhangsan"}   (前要有双引号  后面是字符串也要加双引号)  {“age”:23}

 

JSON.stringify  转化为JSON的字符串

 

JSON.parse   parse是解析的意思  转换成JSON对象
字符串转化  对于JSON格式很严格  字符串的key值和value值必须得带有双引号才能转化  没有的话也是没法转换

转换不了就用   eval（）这个

同源策略：浏览器做的一个安全机制   解释：相同的源头的一种方案 

http://www.baidu.com:80

协议     域名     端口

源头：指的是这个域名之下 （域）

同源 （满足三点）： 协议+域名+端口  全部相同

http://www.baidu.com/dir  是同源

https://www.baidu.com  不是同源  

对 a标签    img标签   iframe标签  都没限制  

对 ajax有限制 

域：

    子域：http://news.baidu.com

    父域：http://www.baidu.com        [子域和父域之间也属于跨域]

主域名：http://www.baidu.com

二级域名：http://news.baidu.com

三级域名：http://abc.news.baidu.com

 

跨域：

     子域跨域：document.domain='baidu.com'

      外域跨域：

解决跨域的方案：

1 cors（后端【服务端 通过设置请求头 设置允许的域  设置允许的请求方式  等等 ）

例如：

res.header("Access-Control-Allow-Origin","*")

2.jsonp跨域 

利用script标签可以跨域  这一特性 在 其后面添加一个回调函数 自己设定一个回调函数接受结果 

主要是使用jq的ajax  自己封装的我没看  没时间了

 

 

cookie  曲奇饼   document自带的 默认值是空字符串

cookie  客户端存储用户的信息 【要有后台服务支持】

cookie可设置多个键值对  documen.cookie='name=rain'   设置多个写多次 不能连写    而且键值对中间是=

cookie可以设置过期时间  documen.cookie='name=rain expires'

设置域  documen.cookie='name=rain expires domian'

设置某路径下支持cookie     documen.cookie='name=rain path'

封装cookie插件也没看

 

session  服务端和客户端之间的连接  通过往cookie里面写入sessionid

session：1 往内存中存放一个sessionid

   2 往cookie里面写入一个sessionid

3 这两个sessionid是同一个，通过判断cookie里面的和内存中的是否是一样的 来判断是不是一个用户

cookie和session之间的区别

1 cookie是客户端的东西  session是服务端的

2 cookie可以被篡改 很不安全 session不能被篡改 所以考虑安全session靠谱

3.cookie存储有限制大小不能超过4kb  ，一个站点最多保存20个cookie   session多的话造成服务器卡顿 （放在缓存或者服务器中 文件中等）

4.cookie存活的周期，手动设置时间节点 expires   session会在一定时间内保存在服务端  一般是关闭页面session就失效了

面试题  两个页面之间通信传值 

1.通过获取参数

2 cookie

3 localStroage

4.sessionStroage

本地缓存  localstroage   文件大小没有限制 value 字符串类型   周期：如果不手动删除永远存在  

ie8以上兼容

setItem(key,value) 

getItem(key)

remove(key)

clear()

sessionStroage  结束一个会话就会消失