xmlhttprequest

一、概念 Ajax异步请求刷新。 浏览器在用户不知道的情况下，偷偷地跟服务器交互，然后返回数据给浏览器显示。 异步过程：当HTTP请求发送后，通过Ajax技术使用的XMLHttpRequest对象来发送，此时不需等待服务器响应处理，返回数据等操作，用户可直接在浏览器界面进行下一步操作。 异步过程是Ajax的HTTP请求和用户输入数据等 操作是异步 的 。 二、例子 实现的例子效果 选择任意一个明星的名字，浏览器就会偷偷发送HTTP请求服务器请求该明星的资料，并且返回回来。实现了一个页面局部刷新。 代码： 1、首先要先初始化一个XMLHttpRequest对象 兼容不同的浏览器 function GetXmlHttpObject() //获取XmlHttpRequest对象 { var xmlHttp = null; try { //FF opera 8.0+ xmlHttp = new XMLHttpRequest(); } catch(e) { try { xmlHttp = new ActiveXObject("Msxml2.XMLHTTP"); } catch(e) { xmlHttp = new ActiveXObject("Microsoft.XMLHTTP"); //IE浏览器支持ActiveXObject } } return xmlHttp; } 2

首先在创建AJAX之前，需要注意如下几个点： （1）XMLHttpRequest 对象的工作流程 （2）兼容性处理 （3）事件的触发条件 （4）事件的触发顺序 下面开始创建AJAX if ( opt . url ) { // 第一步，XMLHttpRequest对象的声明，以及浏览器的兼容 var xhr = XMLHttpRequest ? new XMLHttpRequest ( ) : new window . ActiveXObject ( 'Microsoft.XMLHTTP' ) ; var data = opt . data , url = opt . url , type = opt . type . toUpperCase ( ) , dataArr = [ ] ; for ( var k in data ) { dataArr . push ( k + '=' + data [ k ] ) ; } if ( type === 'GET' ) { url = url + '?' + dataArr . join ( '&' ) ; // 第二步，确定XMLHttpRequest的发送方式 xhr . open ( type , url . replace ( /\?$/g , '' ) , true ) ; // 发送出去 xhr . send ( ) ; }

目录 1. XMLHttpRequest 2. 使用 XMLHttpRequest 时的基本处理流程 3. 通过XMLHttpRequest 进行同步通信 4. 超时处理 5. 响应 6. 跨源限制 7. 跨源通信 JSONP iframe 攻击（iframe hack） window.postMessage XMLHttpRequest Level 2 AJAX 是 Asynchronous JavaScript + XML 的简称 。AJAX 一词的实际含义为“不发生页面跳转、异 步载入内容并改写页面内容的技术”。在实际操作中，AJAX 不仅仅会使用XML 数据，很多时候也会对 JSON 或纯文本进行操作。AJAX 的关键在于它是以异步的方式执行的。异步处理的优点是不会让用户白白等待。对于同步处 理来说，在处理完来自服务器的响应之前，用户无法进行任何其他操作，只能等待。如果服务器的响应 发生了延迟，会让用户误以为页面失去了响应。在优先考虑用户体验时，与同步处理相比，采用异步处 理的方式更为合适，这一点是显而易见的。 1. XMLHttpRequest 通过使用XMLHttpRequest 对象令JavaScript 动态地向服务器发送请求。 XMLHttpRequest 的跨浏览器支持 if (!window.XMLHttpRequest) { // Internet

Ajax，在它最基本的层面，是一种与服务器通讯而不重载当前页面的方法，数据可从服务器获得或发送给服务器。有多种不同的方法构造这种通讯通道，每种方法都有自己的优势和限制。 有五种常用技术用于向服务器请求数据： （1）XMLHttpRequest (XHR) （2）动态脚本标签插入 （3）框架 （4）Comet （5）多部分的XHR 在现代高性能JavaScript中使用的三种技术是XHR，动态脚本标签插入和多部分的XHR。使用Comet和iframe（作为数据传输技术）往往是极限情况，不在这里讨论。 一、XMLHttpRequest 目前最常用的方法中，XMLHttpRequest（XHR）用来异步收发数据。所有现代浏览器都能够很好地支持它，而且能够精细地控制发送请求和数据接收。你可以向请求报文中添加任意的头信息和参数（包括GET和POST），并读取从服务器返回的头信息，以及响应文本自身。以下是使用示例： var url = '/data.php'; var params = [ 'id=934875', 'limit=20' ]; var req = new XMLHttpRequest(); req.onreadystatechange = function() { if (req.readyState=== 4) { var responseHeaders = req

onreadystatechange ：状态改变的事件触发器 readyState：对象状态（integer）：0=未初始化 ；1=读取中；2以读取；3=交互中；4=完成。 responseText：服务器进程返回数据的文本版本 responseXML：服务器进程返回数据的兼容DOM的XML文档对象 status：服务器返回状态码，如404=“文件未找到”、200=“成功” statusText：服务器返回的状态文本 服务器返回状态码总结： 100系列码 从100到199范围的HTTP状态码是信息报告码。基于各种原因考虑，大多数情况下我们 是很少看见这些代码的。首先，如果一个浏览器尝试访问一个 网站 ，而 网站 返回这些代码时，它们往往都不会显示在屏幕上。它们只是浏览器使引用的内部码。另 外，这些代码不常见的另外一个原因是起初HTTP标准不允许使用这一范围的状态码。就其本身而言，它们也一直没有被广泛地使用。 200系列码 从200到299范围的状态码是操作成功代码。同样的，在正常的Web上网中，你也很可能不曾在屏幕上看到这些代码。相反的，这些代码是在浏览器内 部使用的，用以确认操作成功确认和当前请求状态。虽然这些代码通常不显示，但是有一些故障排除工具能够读到它们，就像和其它大多数的HTTP状态码一样， 它们在错误诊断过程中是非常有用的。 300系列码