HTTP和AJAX(三、AJAX[局部刷新]简介)

网页客户端端获取服务器端数据的大致过程
>1.首先根据客户端输入的域名，到DNS服务器上进行反解析（通过域名找到对应服务器的外网IP）
>2.通过找到的外网IP，找到对应的服务器
>3.通过在地址栏中输入的端口号（没输入是因为不同协议有自己默认端口号）找到服务器上发布的
   对应的项目
>4.服务器获取到请求资源文件的地址‘例如：/stu/index.html’,把资源文件中的**原代码**找到
>5.服务器端会把找到的原代码返回给客户端（通过HTTP等传输协议返回的）
>6.客户端接收到原代码后，会交给浏览器的内核（渲染引擎）进行渲染，最后由浏览器绘制出对应的页面
>
***XML：可扩展的标记语言
>作用是用来存储数据的（通过自己扩展的标记名称清晰的展示出数据结构）
>
>ajax之所以成为异步的JS和XML，主要原因是：当初最开始用ajax实现客户端和服务器端数据通信的时候，
     传输的数据格式一般都是xml格式的数据，我们把它称之为异步的js和xml.(现在一般都是基于JSON格式
     来进行数据传输的)
'''''xml
<?xml version="1.0" encoding="UTF-8"?>
<root>
   <student>
      <score>
       <name>张三</name>
      <age>24</age>
      <english>90</english>
      <math>100</math>
      <chinese>98</chinese>
      </score>
   </student>
   
   
   <student>
   <score>
       <name>李四</name>
   <age>24</age>
   <english>90</english>
   <math>100</math>
   <chinese>98</chinese>
   </score>
   </student>
   </root>

***什么是AJAX（async javascript and xml）,异步的JS和XML
*异步的JS  
>这里的异步不是说AJAX只能基于异步进行请求（虽然建议都是使用异步编程），这里的异步特指的是“局部刷新”
>
**局部刷新与全局刷新
>在非完全前后端分离项目中，前端开发只需要完成页面的制作，并且把一些基础的人机交互效果使用js完成即可，页面中需要动态
  呈现内容的部分，都是交给后台开发工程师做数据绑定和基于服务器进行渲染的（服务器端渲染）
******服务器端*****
   后台开发工程师
   >后台编写的代码是运行在服务器上的
   1.从服务器端获取数据（自己在本地获取数据）
   2.把前端开发给的页面拿过来，结合自己获取的数据，把最后要呈现的页面拼凑出来
******客户端******
>第一次加载成功后，banner的数据需要修改，但是新闻数据不动
>1.重新向服务器发送请求，服务器端重新把整个页面所有的数据进行绑定和渲染，把最后渲染的结果
  返回给客户端
>2.客户端需要重新的呈现整个页面（页面整体刷新一次）
>客户端获取的是页面中的原代码（原代码中是包含服务器端拼接好的数据的）

******全局刷新：当前页面中哪怕只有一个部分的数据需要改变，都需要服务器端把整个页面数据重新的渲染
               ，最后客户端浏览器整体刷新页面看到最新的结果。
  
>[优势]
>1.动态展示的数据在页面的源代码中可以看见，有利于SEO优化推广（有利于搜索引擎的收录和抓取）
>2.从服务器端获取的 结果就已经是最后要呈现的结果了，不需要，客户端做额外的事情了，所以页面加载速度快（前提是服务器端
   处理的速度够快，能够处理过来），所以类似于京东、淘宝这些网站，首屏数据一般都是经由服务器端渲染的。
     后台可以实现相应的局部刷新
>[弊端]
>1.如果页面中存在需要实时更新的数据，每一次想要展示最新的数据，页面都要重新的刷新一次，这样肯定不行
>2.都交给服务器端做数据渲染，服务器端的压力太大，如果服务器处理不过来，页面呈现的速度更慢（所以京东
   淘宝这类的网站，除了首屏是服务器端渲染的，其它屏一般都是客户端做数据渲染绑定）
>3.这种模式不利于开发（开发效率低）
>目前市场上大部分项目都是前后端完全分离的项目（也有非完全前后端分离的）
>
**********前后端完全分离的项目，页面中需要动态绑定的数据是交给客户端完成渲染的
>1.向服务器端发送AJAX请求
>2.把从服务器端获取的数据解析处理，拼接成为我们需要展示的HTML字符串
>3.把拼接好的字符串替换页面中某一部分的内容（局部刷新），页面整体不需要重新加载，局部渲染即可
>
>[优势]
>1.我们可以根据需求，任意修改页面中某一部分的内容（例如实时刷新），整体页面不刷新，性能好，体验好（
    所有表单验证、需要实时刷新的等需求都要基于AJAX实现）
>2.有利于开发，提高开发的效率
     1）前后端的完全分离，后台不需要考虑前端如何实现，前端也不需要考虑后台用什么技术，真正意义上实现
        了技术的划分
     2）可以同时进行开发：项目开发开始，首先制定前后端数据交互的接口文档（文档中包含了，调取哪个接口
        或者哪些数据等协议规范），后台把接口先写好（目前很多公司也需要前端自己拿NODE来模拟这些接口）

>[弊端]
>1.不利于SEO优化：第一次从服务器端获取的内容各种不包含需要动态绑定的数据，所以页面的原代码中没有这些
    内容，不利于SEO收录，后期通过JS添加到页面中的内容，并不会写在页面中的源代码中（是源代码不是页面结构）
>2.交给客户端渲染，首先需要把页面呈现，然后再通过JS的异步AJAX请求获取数据，然后数据绑定，浏览器在把动
   态增加的部分重新渲染，无形中浪费了一些时间，没有服务器端渲染页面呈现速度快