Ajax

最新推荐文章于 2025-07-27 12:12:13 发布

知行合一(-_-)

最新推荐文章于 2025-07-27 12:12:13 发布

阅读量124

点赞数

CC 4.0 BY-SA版权

分类专栏：高性能JavaScript 文章标签： ajax

本文链接：https://blog.youkuaiyun.com/wobushixiaobailian/article/details/100546756

高性能JavaScript 专栏收录该内容

10 篇文章

订阅专栏

本文探讨了Ajax的五种数据请求技术，包括XMLHttpRequest、动态脚本注入等，对比了数据发送方式如XHR与信标的优劣，详细分析了数据格式如XML、JSON、JSON-P及自定义格式的性能差异，最后提供了提升Ajax性能的实用指南。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

什么是ajax。是一种与服务器通信而无须重载页面的方法。

一、数据传输

1.1 数据请求

5中常用来请求服务器数据的技术。

XMLHttpRequest(XHR)
Dynamic script tag insertion 动态脚本注入
iframes
Comer
Multipart XHR

XMLHttpRequest
它允许异步发送和接受数据。它能够精确地控制发送请求和数据接受。可以在请求中添加任何头信息和参数，并读取服务器返回的所有头信息。
动态脚本注入
它能跨域请求数据。

var scriptElement = document.createElement('script'); 
scriptElement.src = 'http://any-domain.com/javascript/lib.js'; 
document.getElementsByTagName_r('head')[0].appendChild(scriptElement);

注意！
使用这项技术从那些你无法直接控制的服务器上请求数据是需要小心。

Multipart XHR
该项技术允许客户端只用一个http请求就可以从服务器向客户端传送多个资源。

1.2 数据发送

常用的数据发送有两种方式：XHR、信标

xhr
xhr中get的速度要比post快，因为get请求网服务器只发送了一个数据包，而post请求发送了两个数据包。
信标(beacons)
这项技术与动态脚本注入很像。

var url = '/status_tracker.php'; 
var params = [ 'step=2', 'time=1248027314' ]; 
(new Image()).src = url + '?' + params.join('&');

性标是向服务器回传数据最快且最有效的方式。如果你值关心发送数据到服务器，而不关心返回信息或只需要极少的返回信息，请使用图片信标。

二、数据格式

在考虑数据格式时，唯一需要考虑的指标是速度。具体下来就是下面三点。

文件大小（影响文件下载时间）
解析速度
服务器上构造的难易程度

xml
缺点是格式极其冗长，有效数据的比例小。在高性能的Ajax中，xml没有立足之地 ?。
json
json-p
由于json-p传递的数据就是原生的js,所以它的解析耗时为0。

parseJSON([
    { "id": 1, "username": "alice", "realname": "Alice Smith", "email": "alice@alicesmith.com" },
    { "id": 2, "username": "bob", "realname": "Bob Jones", "email": "bob@bobjones.com" },
    { "id": 3, "username": "carol", "realname": "Carol Williams", "email": "carol@carolwilliams.com" },
    { "id": 4, "username": "dave", "realname": "Dave Johnson", "email": "dave@davejohnson.com" }
]);