AJAX实现原理

       作为一种基础的交互,AJAX是一个非常重要的知识点,也是面试必问,所以在此我进行简单的资料整合,方便自己对知识点的查找。

1. AJAX(asynchronous javascript and xml) 请求

    在浏览器端创建一个 XHR 对象,发送 HTTP 请求给网络服务器,服务器与数据库进行交互。
    将数据以 XML 或 JSON 发送到 XHR 回调函数,请求会受到同源策略的限制。
    XHR 异步底层实现原理是事件循环(Event Loop)。
    js 是单线程,但浏览器可以开很多的工作线程处理异步操作。
a-2-1.PNG

W3C官网XHR


2. JSON

    一种基于文本的数据交互格式

    JSON 的三种数据结构
        键值对
        {
            "name": "张三"
        }
        对象
        {
            "address": {
                "school": "西安邮电大学",
                "area": "长安区",
                "city": "西安市"
            }
        }
        数组
        {
            "student": [
                { "name": "汤师爷", "id": "0" },
                { "name": "张麻子", "id": "1" },
                { "name": "黄老爷", "id": "2" }
            ]
        }
    
    JSON 解析
        JSON.parse()

JSON 简明指南


3. XML(可扩展标记语言)

    历史 
        gml(通用标记语言)->sgml(标准通用标记语言)->html(超文本标记语言)->xml

    XML 数据和 XML 文档只用于组织,存储数据

    XML 常用版本(versions)
        MSXML2.DOMDocument.6.0
        MSXML2.DOMDocument.3.0
        MSXML2.DOMDocument

    XML 解析方式
        DOM 方法(Java 原生)
            首先在内存中创建一个Document对象,然后把XML文档读取进来赋值给这个dom对象。
            由于dom对象是基于树结构的,所以对dom对象进行遍历即可。对内存中的dom对象可
            以进行查询、修改、删除操作,还可以写回原XML文档保存修改。
        
        SAX 方法(Java 原生)
            通过parse(file,listener)函数用一个listener对xml文件进行查找,按顺序读取
            文档,遍历每个标签,当发现目标标签时,读取标签的属性、结点值等信息并返回。

        JDOM 方法
            JDOM方法是根据DOM方法的众多繁琐操作进行包装得到的。

        DOM4J 方法
            解析xml的函数上与JDOM差不多,只不过有几个相同功能的函数名字不同而已,过程
            都是一样的,但由于底层使用了Xpath等方法加快了索引,所以检索性能更快。 

XML的四种解析方法


4, Event Loop(事件循环)

    在 js 中存在同步与异步任务,而像 setTimeout,setInterval,Promise 等,而这些异
    步任务中又分为宏任务(macro-task)和微任务(micro-task)

    macro-task
        setTimeout,setInterval,setImmediate,I/O,UI rendering
    micro-task
        process.nextTick,Promise,Object.observe,MutationObserver

    事件循环时
        执行完主执行线程中的任务
        取出 micro-task 中任务执行直到清空
        取出 macro-task 中一个任务执行
        取出 micro-task 中任务执行直到清空
        循环 3 和 4
    
    异步执行的运行机制
        所有同步任务都会在主线程上执行,形成一个执行栈。
        主线程之外,还存在一个任务队列。只要异步任务有了运行结果,就在任务队列中放置一个事件。
        当执行栈中的所有同步任务执行完毕,系统就会读取任务队列,结束任务的等待状态,进入执行
        栈。
        主线程不断循环上述步骤。

JS事件循环

深入理解 JavaScript 事件循环(一)— event loop

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 199,711评论 5 468
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,932评论 2 376
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 146,770评论 0 330
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 53,799评论 1 271
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 62,697评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,069评论 1 276
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,535评论 3 390
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,200评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,353评论 1 294
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,290评论 2 317
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,331评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,020评论 3 315
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,610评论 3 303
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,694评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,927评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,330评论 2 346
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,904评论 2 341

推荐阅读更多精彩内容

  • 1.什么是AJAX? AJAX全称为“Asynchronous JavaScript and XML”(异步Jav...
    夜幕小草阅读 1,489评论 1 19
  •   2005 年,Jesse James Garrett 发表了一篇在线文章,题为“Ajax: A new App...
    霜天晓阅读 882评论 0 1
  • 平时我们在做项目时通常利用jQuery封装好的ajax函数:$.ajax(),$.get(),$.post(),用...
    zhangjianli阅读 689评论 1 2
  • 第一部分 HTML&CSS整理答案 1. 什么是HTML5? 答:HTML5是最新的HTML标准。 注意:讲述HT...
    kismetajun阅读 27,375评论 1 45
  • Ajax和XMLHttpRequest 我们通常将Ajax等同于XMLHttpRequest,但细究起来它们两个是...
    changxiaonan阅读 2,214评论 0 2