AJAX

async javascript and xml
异步的JS和XML

异步

在AJAX中的异步不是我们理解的同步异步编程，而是泛指“局部刷新”，但是我们在以后的AJAX请求中尽可能使用异步获取数据（因为异步数据获取不会阻塞下面代码的执行）

XML

XML是一种文件格式（我们可以把HTML理解为XML的一种）：可扩展的标记语言，它的作用是用自己扩展的一些语义标签来存储一些数据和内容，这样存储的好处是清晰的展示出数据的结构

XML的代码如下,XML的标签都是自己扩展的,从而存储一些数据和内容,而且它的结构和JSON很像

<?xml version="1.0" encoding="utf-8"?>
<root>
    <student>
        <name>张三</name>
        <age>25</age>
        <score>
            <english>98</english>
            <chinese>100</chinese>
            <math>100</math>
        </score>
    </student>
    <student>
        <name>李四</name>
        <age>24</age>
        <score>
            <english>8</english>
            <chinese>90</chinese>
            <math>80</math>
        </score>
    </student>
</root>

JSON

JSON比XML数据操作更简单.JSON的代码如下

[
   {
    "name": "张三",
    "age": 25,
    "score": {
      "english": 98,
      "chinese": 100,
      "math": 100
    }
   },
   {
    "name": "李四",
    "age": 24,
    "score": {
      "english": 9,
      "chinese": 90,
      "math": 80
    }
 }
]

AJAX历史

很久以前，AJAX刚刚兴起的时候，客户端从服务器端获取数据，服务器为了清晰的表达数据结构，都是返回XML格式的内容，当下，我们获取的数据一般都是JSON格式的内容，JSON相对于XML来说，也能清晰表达数据结构，而且访问里面数据的时候操作起来比XML更简便（但是现在某些项目中，服务器返回给客户端的数据不单纯是数据，而是数据和需要展示的结构拼接好的结果(类似于我们自己做的字符串拼接)，换句话说，是服务器端把数据和结构拼接好返回给我们，此时返回的数据格式一般都是XML格式的字符串）

全局刷新

概念

全局刷新.jpg

全局刷新的好处

有利于SEO优化(服务器渲染好的内容到客户端呈现,在页面源码中可以看到绑定的内容,有利于引擎的收录),但是客户端做字符串拼接,呈现出来的内容在页面源代码中式没有的,不利于SEO
只要服务器端并发(抗压能力)给力,页面加载速度会比客户端渲染更快
很多大网站(例如 : 京东,淘宝)首屏内容都是基于服务器渲染的,客户端获取XML数据后直接呈现,增加页面第一次打开速度,而剩下屏中的内容都是基于AJAX获取数据,在客户端进行数据拼接渲染的

全局刷新的坏处

不使用AJAX : 首先向服务器发送一个请求(通过浏览器地址栏问号传参发送给服务器),服务器获取请求后,验证是否存在,不管存不存在,都要给用户一个提示(原始展示的页面内容需要发生改动)服务器端把提示的内容重新进行连接,然后返回给客户端,客户端重新渲染最新的内容(只能页面整体刷新)

局部刷新

概念

局部刷新.jpg

个人总结

我对于这些概念并不怎么明白,但是我觉得AJAX就是一个局部的刷新.

个人猜测 :
在web1.0时代客户端进行什么操作服务端是无法得知的,比如说登录,只有当submit按钮提交之后才会给服务器端提交一个带参数的url,然后服务器端进行处理之后,返回给客户端新的XML结构文档字符串,客户端再解析渲染,这样就进行了下一步了.这样说就是全局刷新了.
在web2.0时代客户端在输入框进行输入的时候就开始发送http请求了(懒加载就可以实现操作完再发送).这样服务器返回一个JSON数据,因为不需要XML结构了(就好像只需要告诉客户端你的数据对不对,并不告诉你要干什么).这样客户端再基于JS和返回的结果对自己的XML进行修改.就可以得到即使的响应.

个人疑问 :
为什么在web1.0时代,客户端发送的带参数的url之后,服务器端基于有参数的存在只返回对于的数据即可.为什么要全部返回XML呢.即使那个时候没有JSON,但是XML也不至于全部发送吧.那就是客户端自己的页面无法修改.那么是当时的JS技术不足吗?也不对,当时谷歌第一批实现了异步处理.说明当时的局部刷新是足以实现的

可能局部刷新和全局刷新的区别还体现在一个地方.那就是CSS样式的@import和link的区别
link是执行到这的时候去调用对应的CSS,但是代码还是照样往下执行.但是@import的执行是必须等对应的CSS获取完之后才去执行下面的代码,这样的话@import就会引起页面的卡顿,而link却不会

Ajax 基础知识

AJAX概念