ajax进阶学习

ajax进阶学习 (node)

一、ajax概念：

异步的JavaScript和xml 在不重载整个页面的情况下局部刷新/更新数据的一个技术 ajax不是一个编程语音 而是一个更好更快以及交互性更强的一个web开发技术

二、简述ajax的执行过程（面试题）

1. 获取ajax对象 XHLHttpRequest

2. 通过ajax引擎确定请求路径和请求参数

3. 通知ajax发送请求—ajax会在不刷新的情况下发送请求

   服务器反应：

   1. 服务器得到请求参数
   2. 服务器处理请求参数（增删查改）、
   3. 服务器响应数据给客户端

4. 通过设置的ajax回调函数获取服务器相应的数据

5. 把得到的数据在页面的局部位置进行数据更新

三、原生 or jQuery 中ajax区别：

原生：步骤比较繁琐 处理复杂的数据比较麻烦 浏览器兼容性较差

jQuery：是对原生的ajax进行了一个比较底层的封装

四、使用ajax

下载jquery的安装包 npm install --save jquery

Restful api 就是接口的设计原则

就是一个设置规范

GET: 读取

POST: 发送数据

PUT: 更新（全部更新）

PATCH: 更新（局部更新）

DELETE: 删除

每个资源（在互联网中的数据）都会有一个唯一标示（这个资源的地址）

客户端可以通过这个资源地址找到想要的数据，从而对服务器进行获取

1. demo

   使用ajax请求后台基本的api接口—会解决一个问题 跨域

   创建一个基本api接口

$.ajax({
    url:"你请求的地址",
    type:"get/post",
    data:"你要发送的数据",
    dataType:"预期的数据返回类型 json text",
    async:"同步或者异步	一般为异步"
    success(ok /*请求的数据*/){
    	console.log(ok)
	}//这个是es6的简写
    //success:function(){
    //}//这两种方式都是一样的，
})

​ ajax进行请求

2. demo

   1. post方式

      1. 接收post数据比较麻烦不能直接接收，需要下载一个解析请求的模块，body-parser 下载该模块 npm install --save body-parser

      2. 在路由中，使用require来进行引用

         var bodyParser = require("body-parser");
         

      3. 需要调用body-parser模块下的urlencoded({extended:false})给我们返回一个解析器用来帮助我们来解析post里面的数据

         var uE = bodyParser.urlencoded({extended:false})
         

      4. 把这个解析模块传入到路由中（只要你在当前的路由中想接收前台的post数据，那么需要怕解析模块传入）

         router.post("/login",uE,(req,res)=>{
             res.send("123")
         });
         

      5. req.body.xxx ----以此来接收数据

         req.body.uname;
         req.body.upwd;
         

   2. 数据加密：

      1. 一般使用md5加密方式

         md5:常用的哈希算法，用于给任何一个数据设置一个签名，

         **hash.disest(“hex”)**通常使用一个16进制的字符串来进行表示的

         update()：设置字符编码

      2. cry加密模块（这个就是md5方式）

         1. 下载吗模块：npm install --save crypto

         2. 路由里面引用模块

            var crypto = require("crypto")
            

         3. 对用户的密码进行加密

            var newUpwd = crypto.createHash("md5").update(req.body.uname).digest("hex");
            

      3. 登录成功后跳转到首页

          function fun() {
                     var uname = $("#uname").val()
                     var  upwd = $("#uname").val()
                     $.ajax({
                         url: "http://localhost:3003/user/login",
                         type: "post",
                         data:{uname,upwd},
                         success(ok) {
                             if(ok.data==3){
                                 alert("登录成功");
                                 window.location.href = "index.html";
                             }else if(ok.data==4){
                                 alert(ok.msg);
                                 $("#uname").val("");
                                 $("#upwd").val("")
                             }
                         }
                     })
                 }
         

      4. 保存用户的登录状态

         token: 就是一段保存了用户信息的加密字符串

         json web token —JWT

         1. 用户登录之后服务器创建一个token（加密的字符串）发给前端，保存。

            //加密发给前端
            var userObj = {
                            loginok:true
                        }
            var miwen = "laozomingtianbushangban";
            var token = jwt.sign(userObj,miwen)
            res.send({msg:"登录成功",data:3,token})
            
            //登录成功之后把数据token保存在本地
            

         window.loaclStorage.setItem(“数据名”,存储的数据)

         
         
         
         2. 前端发送这个token给后端之后，后端进行验证，验证的结果返回给前端，前台在给用户做出的反应。
         
         ```javascript
         //前台
         //取出token
         

      var token = window.localStorage.getItem(“要取出的数据名”);
      //使用ajax把token交给后台
      $.ajax({
      url:“http://localhost:3003/user/home”,
      type:“post”,
      data:{token},
      success(ok){
      console.log(ok)
      }
      })

        //后台
        //首页判断用户是否登录的接口
        router.post("/home",uE,(req,res)=>{
            var token = req.body.token;
            var miwen = "laozomingtianbushangban"//之前设置的密文必须一样
            //对前台发送过来的token进行解密，解密方式：
            jwt.verify(token,miwen,(err,data)=>{
                //正常登录有数据
                //未登录有无数据
                if(data==undefined){
                    //用户非法登录
                    res.send({msg:"用户未登录",data:7})
                }
                if(data.loginok==true){
                    //用户已经登录
                    res.send({msg:"用户已经登录",data:6})
                }else{
                    //用户非法登录
                    res.send({msg:"用户未登录",data:7})
                }
            })
        })
        
        //退出
        
        ```
        
        **下载**：npm install --save jsonwebtoken
        
        **格式**：后端如何生成token
      

      ​ 数据={}

      ​ 密文=“”；

      ​ jwt.sgin(数据，密文（越乱越好）)

      保存：html5中有哪些新增东西（面试题）、本地存储和cookie的区别

      本地存储：html5中新增的一个技术，在ie6其实有一个类似的技术userData就是本地存储，有很大的兼容性问题，flash来进行代替

      ​ localStorage: 永久性存储

      ​ sessionStorage: 临时存储（刷新页面依然存在，但是当浏览器关闭之后，就会被清除）

      ​ cookie: 它存储的数据只有4kb ，cookie保存一些用户登录信息/用户访问数据

      区别：

      1. 数据的持久化:

         cookie: 可以设置过期时间，默认在浏览器关闭之后清除

         localStorage:永久存储

         sessionStorage:临时储存浏览器关闭丢失

      2. 数据存放的大小

         cookie 4kb 本地存储 5mb

      3. 与服务器端的通信

         cookie会 参与于后台的通信

         本地存储 仅在浏览器端，不参与于服务器的通信

​ 总结：

1. 注册

   前台页面接受到用户的输入把这个用户输入的内容通过ajax发送后台，后台把数据加密储存到数据库里面

   给前台返回值，成功或失败

   如果成功那么前台就提示用户注册成功跳转到登录页面，否则提示用户网络连接超时

2. 登录

   前台页面接受到用户的输入把这个用户输入的内容通过ajax发送后台，后台把数据到加密数据库查询

   如果查询出来的数据长度大于0那么就是登陆成功生成token返回给前台，如果查询出的内容小于等于0，那么就是登陆失败，那么就给前台错误返回值

   前台判断登录是正确还是失败吗，如果正确把token储存在本地储存中，并且帮助用户跳转到首页，反之提示用户用户账号密码失败

3. 首页

   页面在完毕的时候读取本地存储的数据，发送给后台，后台判断这个token是否有登录成功的信息，如果有返回给前台正确信息，反正返回给前台错误信息

   前台就根据后台的返回值来进行判断，如果登录不进行操作，反之提示用户您没有登录，强行把页面跳转到登录页面

五、跨域

1、概念：

—浏览器中的安全机制，防止外部盗取资源，这个安全机制叫做：同源策略—>（同端口 同域名 同协议）

后台地址与同台地址不同就违背了同源策略—跨域

2、解决跨域：

1. jsonp在页面中动态添加了一个script标签，向服务器进行数据的请求，jsonp这种方式不会受到同源策略的影响，会把数据放在一个回调函数中传递过来—前端解决跨域

2. CORS—》跨域资源共享—》后台解决跨域

   核心：

   res.header('Access-Control-Allow-Origin', '*');
   
   res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
   
   res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
   

   //CORS解决跨域
   app.use("/",(req,res,next)=>{
       //将三句话原模原样的放进来
       res.header('Access-Control-Allow-Origin', '*');
   
   	res.header('Access-Control-Allow-Headers', 'Content-Type,Content-Length, Authorization, Accept, X-Requested-With , yourHeaderFeild');
   
   	res.header('Access-Control-Allow-Methods', 'PUT, POST, GET, DELETE,OPTIONS');
       //千万别忘记
       next()//没有的话后面就不会进行
   })
   

3. 代理跨域

扩展：通常情况下，在本地开发过程中，跨域的解决方法是前端开发者来解决的，上线之后是由后端开发者来解决的（看情况来定）

六、图片上传

multer图片上传的模块—>必须依赖于express

下载：npm install --save multer

使用：

var express = require("express");
var router = express.Router()

//引用模块
var multer = require("multer");
//multer.diskStorage({//配置 上传图片的文件夹与文件名
    //destination://设置上传资源的路径	注意:如果没有写，它会默认保存在/tem/uploads文件夹。建议:在我们设置上传资源路径的时候这个文件夹提前手工创建
    //filename保存上传文件的文件名
//})
var storage = multer.diskStorage({
    //上传的图片的配置
    destination(req,file,cd){
        //设置文件夹的位置
        cd(null,"./imgup")
    },
    filename(req,file,cd){
        //设置文件名
        //1.得到后缀名
        var fext = file.originalname.split(".")[1];
        //2.生成一个重复的名字
        var fname = new Date().getTime()

        cd(null,`${fname}+${fext}`)
    }
})
//把上传的图片的配置传递给图片上传对象中
var upload = multer({
    storage
})
//把图片上传模块传递到路由中
//upload.single("你在传递数据的时候数据的key")
router.post("/upimg",upload.single("upimg"),(req,res)=>{
    res.send("ok")
})

module.exports = router;

七、ajax图片上传

function fun(){
            // 1. 找到表单元素并且获取到当前表单元素选择的内容
            var el = $("#file").get(0).files[0]
            console.log(el)
            //2.创建formdata对象（异步上传文件）
            var formData = new FormData();
            //formData.append("你要上传文件的键key",你要上传的文件)
            formData.append("upimg",el)
            $.ajax({
                url:"http://localhost:3004/file/upload",
                type:"post",
                //cache：是否进行缓存操作 boolean类型
                //默认是true
                //datatype属性如果是script和jsonp的话那么它的默认是false
                //如果设置false就是不缓存此页面
                cache:false,//可选不从从缓存中读取
                data:formData,
                //processData:ajax传递数据的时候都是通过data这个属性来进行数据的
                //但是如果传递的数据是一个对象的话就会被转换成字符串
                processData:false,//必须的处理数据 上传文件的时候不用把它转成字符串 false
                //contentType：发送信息的编码类型
                contentType:false,//发送数据的格式
                success(ok){
                    console.log(ok)
                }
            })
        }