论浏览器的局部刷新
标签(空格分隔): ajax jsonp
何谓局部刷新
局部刷新是相对全局刷新而言的。在ajax出现之前,浏览器跟服务器交互一般是通过form表单的形式,或post或get,不管采用哪种方式,将数据提交之后,原页面被替换为新页面。局部刷新是在页面发送一个请求,完成请求只更新页面中的局部内容,原页面依然存在。
通用的做法有两种:ajax和jsonp,接下来将详细介绍着两种方式。
AJAX
基本定义
AJAX即“Asynchronous JavaScript and XML”(异步的JavaScript与XML技术),指的是一套综合了多项技术的浏览器端网页开发技术。Ajax的概念由杰西·詹姆士·贾瑞特所提出。
传统的Web应用允许用户端填写表单(form),当送出表单时就向网页服务器发送一个请求。服务器接收并处理传来的表单,然后送回一个新的网页,但这个做法浪费了许多带宽,因为在前后两个页面中的大部分HTML码往往是相同的。由于每次应用的沟通都需要向服务器发送请求,应用的回应时间依赖于服务器的回应时间。这导致了用户界面的回应比本机应用慢得多。
与此不同,AJAX应用可以仅向服务器发送并取回必须的数据,并在客户端采用JavaScript处理来自服务器的回应。因为在服务器和浏览器之间交换的数据大量减少(大约只有原来的5%)[来源请求],服务器回应更快了。同时,很多的处理工作可以在发出请求的客户端机器上完成,因此Web服务器的负荷也减少了。——维基百科
XMLHttpRequest
ajax主要是通过XMLHttpRequest对象来控制,XMLHttpRequest定义如下:
XMLHttpRequest 是一个 JavaScript 对象,它最初由微软设计,随后被 Mozilla、Apple 和 Google采纳. 如今,该对象已经被 W3C组织标准化. 通过它,你可以很容易的取回一个URL上的资源数据. 尽管名字里有XML, 但 XMLHttpRequest 可以取回所有类型的数据资源,并不局限于XML。 而且除了HTTP ,它还支持file 和 ftp 协议.
创建一个 XMLHttpRequest 实例, 可以使用如下语句:
var req = new XMLHttpRequest();
方法概述
void abort();
DOMString getAllResponseHeaders();
DOMString? getResponseHeader(DOMString header);
void open(DOMString method, DOMString url, optional boolean async, optional DOMString? user, optional DOMString? password);
void overrideMimeType(DOMString mime);
void send();
void send(ArrayBuffer data);
void send(Blob data);
void send(Document data);
void send(DOMString? data);
void send(FormData data);
void setRequestHeader(DOMString header, DOMString value);
非标准方法
[noscript] void init(in nsIPrincipal principal, in nsIScriptContext scriptContext, in nsPIDOMWindow ownerWindow);
[noscript] void openRequest(in AUTF8String method, in AUTF8String url, in boolean async, in AString user, in AString password);
void sendAsBinary(in DOMString body);
方法
abort()
如果请求已经被发送,则立刻中止请求.
DOMString getAllResponseHeaders();
返回所有响应头信息(响应头名和值), 如果响应头还没接受,则返回null. 注意: For multipart requests, this returns the headers from the current part of the request, not from the original channel.
DOMString? getResponseHeader(DOMString header);
返回指定的响应头的值, 如果响应头还没被接受,或该响应头不存在,则返回null.
open()
初始化一个请求. 该方法用于JavaScript代码中;如果是本地代码, 使用 openRequest()方法代替.
_注意: Calling this method an already active re