以前的网站,只要用户进行操作去访问新的数据都会刷新整个页面。
刷新页面对用户体验不好,增加服务器的压力,增加带宽成本
在请求服务器的时候,页面中有一部分数据没有请求完毕,下面的代码都会被阻塞
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>