• ajax 前后端数据通信(交互)的一种技术。


      

    以前的网站,只要用户进行操作去访问新的数据都会刷新整个页面。

    刷新页面对用户体验不好,增加服务器的压力,增加带宽成本

    在请求服务器的时候,页面中有一部分数据没有请求完毕,下面的代码都会被阻塞


    ajax:
      Asynchronous Javascript And XML
      异步的js和XML

      以前更多的是使用XML的数据格式,但是前端技术发展到今天
      数据格式更多的是json

      '[]' '{}' 本质都是字符串 -> JSON.parse() eval() new Function()

    优点:
      1.无刷新更新数据(局部刷新)
        Ajax最大的优点就是能在不刷新整个页面的情况下维持与服务器通信

      2.异步与服务器通信
        使用异步的方式与服务器通信,不打断用户的操作

      3.前端与后端负载均衡
        将一些后端的工作移到前端,减少服务器与带宽的负担

      4.界面与应用分离
        Ajax使得界面与应用分离,也就是数据与呈现分离

    单页应用 单页SPA

     
    缺点:
      1.Ajax干掉了Back与History功能,即对浏览器机制的破坏
        在动态更新页面的情况下,用户无法回到前一页的页面状态,因为浏览器仅能记忆历史纪录中的静态页面

      2.安全问题
        AJAX技术给用户带来很好的用户体验的同时也对IT企业带来了新的安全威胁,
        Ajax技术就如同对企业数据建立了一个直接通道。
        这使得开发者在不经意间会暴露比以前更多的数据和服务器逻辑。

      3.对搜索引擎支持较弱
        SSR

     
     

      前后端数据通信(交互)的一种技术。
      (一种前端向后端请求数据的一种手段)前端向后端拿动态数据。


    难点:
      1.如何拿数据(掌握字段含义、服务器要什么客户端就传什么) **
      2.获取到数据之后,如何操作数据。****


    只要在服务器上,尽量不要取中文,尽量为英文和数字结合的文件夹

    http://localhost:80
    默认为192.168.0.1
     
    ajax 交互模型:
    <body>
        用户名:<input type="text"  id="txt"/>
        <input type="button" value="提交" id="btn">
    <script>
        /*
            ajax的模型叫电话模式
    
            1.先有一个电话     创建ajax对象 new XMLHttpRequest
            2.输入号码(拨号)   填写请求地址  xhr.open('请求的方式','url地址+具体的参数',是否异步(默认为true))
            3.发送             send()
            4.等待             xhr.onload
            5.成功接收         在xhr.onload中接收到数据 xhr.responseText
        */
    
        // console.log(XMLHttpRequest)
    
       btn.onclick = function(){
            let xhr = new XMLHttpRequest; //1.创建ajax对象
            xhr.open('get','/get?user='+txt.value,true); //是否异步  2.填写请求地址
            xhr.send();//3发送
            xhr.onload = function(){ //4.等待服务器响应
                // console.log(xhr.responseText); //5.接收的信息
                let data = JSON.parse(xhr.responseText);
                
                if(data.code == 0){
                    txt.className = 'error';
                }else if(data.code == 1){
                    txt.className = 'ok';
                }
                
    
                // console.log('====================================');
                // console.log(data);
                // console.log('====================================');
            }
       };
    
    
    </script>
    </body>
  • 相关阅读:
    前后台验证字符串长度
    接口和抽象类该什么时候用?
    程序员常去网站汇总
    SQLServer复合查询条件(AND,OR,NOT)对NULL值的处理方法
    c#-轮询算法
    常用的SQL语句
    HTTP请求工具类
    asp.net mvc jQuery 城市二级联动
    ibatis动态多条件查询及模糊查询(oracle,mysql,sql)
    iBatis 中 Like 的写法实现模糊查询
  • 原文地址:https://www.cnblogs.com/MrZhujl/p/10080576.html
Copyright © 2020-2023  润新知