zoukankan      html  css  js  c++  java
  • 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>
  • 相关阅读:
    修改linux下某一个文件夹下所有文件内容
    jenkins对结果进行断言问题
    linux 循环处理文件夹下所有文件脚本
    LR java Vuser 相关依赖JAR包,配置文件处置方法
    Jmeter函数 唯一取值 笔记
    jmeter+java vuser+rmi+dubbo脚本
    eclipse快捷键
    猫狗队列
    用固定长度的数组实现stack queue
    两个单链表相交的问题
  • 原文地址:https://www.cnblogs.com/MrZhujl/p/10080576.html
Copyright © 2011-2022 走看看