SlideShare una empresa de Scribd logo
1 de 15
MXHR技术探究
 (Multipart Xml Http Request)




                                 http://github.com/xiaojue
                                http://twitter.com/xiao_jue
Multipart Content-Type


                 MIME (Multipurpose Internet Mail Extensions)


                 IETF (Internet Engineering Task Force)


                 RFC (Request for Comments)


                 text/html html
                 text/css css
                 image/x-icon ico
                 image/jpeg jpeg



Content-type: multipart/mixed; boundary="simple boundary"
multipart-body := preamble 1*encapsulation close-delimiter epilogue

encapsulation := delimiter CRLF body-part

delimiter := CRLF "--" boundary ; taken from Content-Type field.
                   ; when content-type is multipart
                 ; There must be no space
                 ; between "--" and boundary.

close-delimiter := delimiter "--" ; Again, no space before "--"

preamble := *text ; to be ignored upon receipt.

epilogue := *text ; to be ignored upon receipt.

body-part = <"message" as defined in RFC 822,
    with all header fields optional, and with the
    specified delimiter not occurring anywhere in
    the message body, either on a line by itself
    or as a substring anywhere. Note that the
                                                                  Backus-Naur Form (BNF) 是一种描述语
    semantics of a part differ from the semantics                 法的方法,比如 ACL 语法。它通常用
    of a message, as described in the text.>                      于开发 Internet 协议,因为 BNF 十分
                                                                  简洁而且非常准确。

http://www.w3.org/Protocols/rfc1341/7_2_Multipart.html
usage scenario
      MTA(Mail Transport Agent)
    From: Nathaniel Borenstein <nsb@bellcore.com>
       To: Ned Freed <ned@innosoft.com>
       Subject: Sample message
       MIME-Version: 1.0
       Content-type: multipart/mixed; boundary="simple boundary"

      This is the preamble. It is to be ignored, though it
      is a handy place for mail composers to include an
      explanatory note to non-MIME compliant readers.
      --simple boundary

      This is implicitly typed plain ASCII text.
      It does NOT end with a linebreak.
      --simple boundary
      Content-type: text/plain; charset=us-ascii

      This is explicitly typed plain ASCII text.
      It DOES end with a linebreak.

      --simple boundary--
      This is the epilogue. It is also to be ignored.
As3 Loader …

         Socket io…


Server                                         client
                      http...




          Ajax…

                                  Jsonp…
               Mxhr
combine
Nginx concat combo,PHP Minify

Local Package

Cssjs merge

mxhr
http://site.douban.com/widget/notes/6513752/note/197185582/



XMLHttpRequest

Perfect?
Digg                                 Request:
                                       var template;
                                       $.mxhr({
                                          url: '/fictonal/bsg/endpoint.mxhr',
                                          type: 'GET',
                                          'text/html': function(data) {
                                             template = data;
                                          },
                                          'application/json': function(data) {
                                             view = $.parseJSON(data);
                                             console.log(Mustache.to_html(template, view));
                                          }
                                       });

                                       Response:
                                       --|||
                                       Content-Type: text/html
                                       Hello {{world}}.
                                       --|||
                                       Content-Type: application/json
                                       {"world": "New Caprica"}
                                       --|||--


https://github.com/dfltr/jQuery-MXHR
•   'MSXML2.XMLHTTP.6.0',
    'MSXML3.XMLHTTP',
    'Microsoft.XMLHTTP', // Doesn't support readyState == 3 header requests.
    'MSXML2.XMLHTTP.3.0', // Doesn't support readyState == 3 header requests.

•   Ie6,7,8 dDoesn’t support data:url
IE6,7,8 support flashplayer




DATA:URL in ie6,(7,8)?


pass back ?
As decode?
Clinet PNG Analyzer?
MXHR IN ACTION
https://github.com/xiaojue/mxhrmanager
Q&A
Mxhr

Más contenido relacionado

Similar a Mxhr

HTTP::Parser::XS - writing a fast & secure XS module
HTTP::Parser::XS - writing a fast & secure XS moduleHTTP::Parser::XS - writing a fast & secure XS module
HTTP::Parser::XS - writing a fast & secure XS module
Kazuho Oku
 
Javascript session 01 - Introduction to Javascript
Javascript session 01 - Introduction to JavascriptJavascript session 01 - Introduction to Javascript
Javascript session 01 - Introduction to Javascript
Livingston Samuel
 
Consuming RESTful services in PHP
Consuming RESTful services in PHPConsuming RESTful services in PHP
Consuming RESTful services in PHP
Zoran Jeremic
 
Implementing WebServices with Camel and CXF in ServiceMix
Implementing WebServices with Camel and CXF in ServiceMixImplementing WebServices with Camel and CXF in ServiceMix
Implementing WebServices with Camel and CXF in ServiceMix
Adrian Trenaman
 
Introduction to Thrift
Introduction to ThriftIntroduction to Thrift
Introduction to Thrift
Dvir Volk
 
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
SPTechCon
 
Nodejs 프로그래밍 ch.3
Nodejs 프로그래밍 ch.3Nodejs 프로그래밍 ch.3
Nodejs 프로그래밍 ch.3
HyeonSeok Choi
 

Similar a Mxhr (20)

HTTP::Parser::XS - writing a fast & secure XS module
HTTP::Parser::XS - writing a fast & secure XS moduleHTTP::Parser::XS - writing a fast & secure XS module
HTTP::Parser::XS - writing a fast & secure XS module
 
Rapid java backend and api development for mobile devices
Rapid java backend and api development for mobile devicesRapid java backend and api development for mobile devices
Rapid java backend and api development for mobile devices
 
Javascript session 01 - Introduction to Javascript
Javascript session 01 - Introduction to JavascriptJavascript session 01 - Introduction to Javascript
Javascript session 01 - Introduction to Javascript
 
Aspdotnet
AspdotnetAspdotnet
Aspdotnet
 
Synapseindia dot net development web applications with ajax
Synapseindia dot net development  web applications with ajaxSynapseindia dot net development  web applications with ajax
Synapseindia dot net development web applications with ajax
 
Consuming RESTful Web services in PHP
Consuming RESTful Web services in PHPConsuming RESTful Web services in PHP
Consuming RESTful Web services in PHP
 
Consuming RESTful services in PHP
Consuming RESTful services in PHPConsuming RESTful services in PHP
Consuming RESTful services in PHP
 
Instant YANG - Tail-f Systems Technology Primer
Instant YANG - Tail-f Systems Technology PrimerInstant YANG - Tail-f Systems Technology Primer
Instant YANG - Tail-f Systems Technology Primer
 
Implementing WebServices with Camel and CXF in ServiceMix
Implementing WebServices with Camel and CXF in ServiceMixImplementing WebServices with Camel and CXF in ServiceMix
Implementing WebServices with Camel and CXF in ServiceMix
 
Ajax xml json
Ajax xml jsonAjax xml json
Ajax xml json
 
Xml writers
Xml writersXml writers
Xml writers
 
IBM dwLive, "Internet & HTTP - 잃어버린 패킷을 찾아서..."
IBM dwLive, "Internet & HTTP - 잃어버린 패킷을 찾아서..."IBM dwLive, "Internet & HTTP - 잃어버린 패킷을 찾아서..."
IBM dwLive, "Internet & HTTP - 잃어버린 패킷을 찾아서..."
 
Server Side JavaScript: Ajax.org O3.
Server Side JavaScript: Ajax.org O3.Server Side JavaScript: Ajax.org O3.
Server Side JavaScript: Ajax.org O3.
 
Server Side JavaScript: Ajax.org O3
Server Side JavaScript: Ajax.org O3Server Side JavaScript: Ajax.org O3
Server Side JavaScript: Ajax.org O3
 
Introduction to Thrift
Introduction to ThriftIntroduction to Thrift
Introduction to Thrift
 
jkljklj
jkljkljjkljklj
jkljklj
 
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
The Magic Revealed: Four Real-World Examples of Using the Client Object Model...
 
Web Server and how we can design app in C#
Web Server and how we can design app  in C#Web Server and how we can design app  in C#
Web Server and how we can design app in C#
 
Developing Realtime Data Pipelines With Apache Kafka
Developing Realtime Data Pipelines With Apache KafkaDeveloping Realtime Data Pipelines With Apache Kafka
Developing Realtime Data Pipelines With Apache Kafka
 
Nodejs 프로그래밍 ch.3
Nodejs 프로그래밍 ch.3Nodejs 프로그래밍 ch.3
Nodejs 프로그래밍 ch.3
 

Más de xiaojueqq12345 (6)

前端模块化开发
前端模块化开发前端模块化开发
前端模块化开发
 
Fds-给前端用的服务器
Fds-给前端用的服务器Fds-给前端用的服务器
Fds-给前端用的服务器
 
Voluminous_Weibo
Voluminous_WeiboVoluminous_Weibo
Voluminous_Weibo
 
Lithe
LitheLithe
Lithe
 
nodejs开发web站点
nodejs开发web站点nodejs开发web站点
nodejs开发web站点
 
Web program-peformance-optimization
Web program-peformance-optimizationWeb program-peformance-optimization
Web program-peformance-optimization
 

Último

Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
UXDXConf
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
panagenda
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
FIDO Alliance
 

Último (20)

Structuring Teams and Portfolios for Success
Structuring Teams and Portfolios for SuccessStructuring Teams and Portfolios for Success
Structuring Teams and Portfolios for Success
 
Portal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russePortal Kombat : extension du réseau de propagande russe
Portal Kombat : extension du réseau de propagande russe
 
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdfHow Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
How Red Hat Uses FDO in Device Lifecycle _ Costin and Vitaliy at Red Hat.pdf
 
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
(Explainable) Data-Centric AI: what are you explaininhg, and to whom?
 
Introduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptxIntroduction to FIDO Authentication and Passkeys.pptx
Introduction to FIDO Authentication and Passkeys.pptx
 
Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024Extensible Python: Robustness through Addition - PyCon 2024
Extensible Python: Robustness through Addition - PyCon 2024
 
2024 May Patch Tuesday
2024 May Patch Tuesday2024 May Patch Tuesday
2024 May Patch Tuesday
 
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The InsideCollecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
Collecting & Temporal Analysis of Behavioral Web Data - Tales From The Inside
 
How we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdfHow we scaled to 80K users by doing nothing!.pdf
How we scaled to 80K users by doing nothing!.pdf
 
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
Event-Driven Architecture Masterclass: Integrating Distributed Data Stores Ac...
 
Intro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptxIntro to Passkeys and the State of Passwordless.pptx
Intro to Passkeys and the State of Passwordless.pptx
 
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
Easier, Faster, and More Powerful – Alles Neu macht der Mai -Wir durchleuchte...
 
TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024TopCryptoSupers 12thReport OrionX May2024
TopCryptoSupers 12thReport OrionX May2024
 
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
Event-Driven Architecture Masterclass: Engineering a Robust, High-performance...
 
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider  Progress from Awareness to Implementation.pptxTales from a Passkey Provider  Progress from Awareness to Implementation.pptx
Tales from a Passkey Provider Progress from Awareness to Implementation.pptx
 
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
ASRock Industrial FDO Solutions in Action for Industrial Edge AI _ Kenny at A...
 
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdfLinux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
Linux Foundation Edge _ Overview of FDO Software Components _ Randy at Intel.pdf
 
ERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage IntacctERP Contender Series: Acumatica vs. Sage Intacct
ERP Contender Series: Acumatica vs. Sage Intacct
 
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdfSimplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
Simplified FDO Manufacturing Flow with TPMs _ Liam at Infineon.pdf
 
AI mind or machine power point presentation
AI mind or machine power point presentationAI mind or machine power point presentation
AI mind or machine power point presentation
 

Mxhr

  • 1. MXHR技术探究 (Multipart Xml Http Request) http://github.com/xiaojue http://twitter.com/xiao_jue
  • 2. Multipart Content-Type MIME (Multipurpose Internet Mail Extensions) IETF (Internet Engineering Task Force) RFC (Request for Comments) text/html html text/css css image/x-icon ico image/jpeg jpeg Content-type: multipart/mixed; boundary="simple boundary"
  • 3. multipart-body := preamble 1*encapsulation close-delimiter epilogue encapsulation := delimiter CRLF body-part delimiter := CRLF "--" boundary ; taken from Content-Type field. ; when content-type is multipart ; There must be no space ; between "--" and boundary. close-delimiter := delimiter "--" ; Again, no space before "--" preamble := *text ; to be ignored upon receipt. epilogue := *text ; to be ignored upon receipt. body-part = <"message" as defined in RFC 822, with all header fields optional, and with the specified delimiter not occurring anywhere in the message body, either on a line by itself or as a substring anywhere. Note that the Backus-Naur Form (BNF) 是一种描述语 semantics of a part differ from the semantics 法的方法,比如 ACL 语法。它通常用 of a message, as described in the text.> 于开发 Internet 协议,因为 BNF 十分 简洁而且非常准确。 http://www.w3.org/Protocols/rfc1341/7_2_Multipart.html
  • 4. usage scenario MTA(Mail Transport Agent) From: Nathaniel Borenstein <nsb@bellcore.com> To: Ned Freed <ned@innosoft.com> Subject: Sample message MIME-Version: 1.0 Content-type: multipart/mixed; boundary="simple boundary" This is the preamble. It is to be ignored, though it is a handy place for mail composers to include an explanatory note to non-MIME compliant readers. --simple boundary This is implicitly typed plain ASCII text. It does NOT end with a linebreak. --simple boundary Content-type: text/plain; charset=us-ascii This is explicitly typed plain ASCII text. It DOES end with a linebreak. --simple boundary-- This is the epilogue. It is also to be ignored.
  • 5. As3 Loader … Socket io… Server client http... Ajax… Jsonp… Mxhr
  • 6. combine Nginx concat combo,PHP Minify Local Package Cssjs merge mxhr
  • 8. Digg Request: var template; $.mxhr({ url: '/fictonal/bsg/endpoint.mxhr', type: 'GET', 'text/html': function(data) { template = data; }, 'application/json': function(data) { view = $.parseJSON(data); console.log(Mustache.to_html(template, view)); } }); Response: --||| Content-Type: text/html Hello {{world}}. --||| Content-Type: application/json {"world": "New Caprica"} --|||-- https://github.com/dfltr/jQuery-MXHR
  • 9.
  • 10. 'MSXML2.XMLHTTP.6.0', 'MSXML3.XMLHTTP', 'Microsoft.XMLHTTP', // Doesn't support readyState == 3 header requests. 'MSXML2.XMLHTTP.3.0', // Doesn't support readyState == 3 header requests. • Ie6,7,8 dDoesn’t support data:url
  • 11. IE6,7,8 support flashplayer DATA:URL in ie6,(7,8)? pass back ? As decode? Clinet PNG Analyzer?
  • 14. Q&A