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>

ajax 前后端数据通信（交互）的一种技术。

猜你喜欢