JavaScript FAQ(九)——Ajax

简介:  七、Ajax问题 1. Ajax:异步JavaScript和XML(Ajax: Asynchronous JavaScript and XML)Q:Ajax这个流行词到底是什么意思呀?A:Ajax这个短语最初有Jesse James Garrett提出,他是Adaptive Path的共同创始人。

 七、Ajax问题

 

1. Ajax:异步JavaScript和XML(Ajax: Asynchronous JavaScript and XML

Q:Ajax这个流行词到底是什么意思呀?

A:Ajax这个短语最初有Jesse James Garrett提出,他是Adaptive Path的共同创始人。缩略语Ajax(通常只有第一个字母A大写)代表异步JavaScript和XML(Asynchronous JavaScript and XML);从本质上说,它是一个营销短语,意思是可以开发一种新的Web应用程序的一套技术。

一个基于Ajax的Web应用程序,不同于传统的网站:

  • 功能不需要重新加载网页就可以管理客户端电脑上的应用程序;
  • 广泛使用的文档对象模型( DOM )和JavaScript来执行的交互性的应用;
  • 依赖XMLHttpRequest调用(或相似技术)与Web服务器交换信息;
  • 在后台异步执行客户端服务器之间的数据交换,而同时用户还可以在浏览器中继续和Web应用程序进行交互。

Paul Graham在他的文章Web 2.0中给出了基于Ajax的Web应用程序的以下特征:

从根本上说,“Ajax”意味着“JavaScript发挥作用。”这又意味着,基于web的应用程序现在可以做的更像桌面程序。当你读到这篇文章时,全新一代利用Ajax优点的软件正在编写中。这是自微机出现以来一波新的应用程序。

 

2. XMLHttpRequest

Q:我如何从服务器请求数据而又不用重载页面呢?

A:已加载到客户端浏览器中的JavaScript代码可以通过XMLHttpRequest对象从Web服务器请求其他数据。试一下:

在这个例子中,当你点击“Send Request”按钮时,浏览器就会向服务器请求额外的数据(文件requested_file.html),然后执行以下代码在消息框中显示返回的数据:

var oRequest = new XMLHttpRequest();
var sURL  = "http://"+self.location.hostname+"/faq/requested_file.htm";
oRequest.open("GET",sURL,false);
oRequest.setRequestHeader("User-Agent",navigator.userAgent);
oRequest.send(null)
if (oRequest.status==200) alert(oRequest.responseText);
else alert("Error executing XMLHttpRequest call!");

在大多数当今的浏览器中,XMLHttpRequest.open()的一般语法如下:

 

var oRequest = new XMLHttpRequest();
oRequest.open( method, URL, async )

参数method、URLasync的意思分别为:

 

method  指定HTTP请求使用的方法,可能是下列之一:“GET”、“POST”,“HEAD”。

URL  指定当XMLHttpRequest.send()执行时请求被发送的URL。

async  Boolean。如果是true,说明HTTP应该异步执行,也就是,不会强制代码,直到请求结果返回到浏览器。

注意,XMLHttpRequest.open()方法本身不会向Web服务器发送请求。实际上是XMLHttpRequest.send()方法发送的请求。

还需要注意,在旧版浏览器中,例如,MicroSoft Internet Explorer 6或者更早,你可能不能实用上面简单的方法初始化XMLHttpRequest:new XMLHttpRequest。根据不同的客户端配置,你最好使用下面两个语句之一来代替:

oRequest = new ActiveXObject("Msxml2.XMLHTTP");
oRequest = new ActiveXObject("Microsoft.XMLHTTP");
 
目录
相关文章
|
JavaScript 前端开发 容器
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
AJAX载入外部JS文件到页面并让其执行的方法(附源码)
246 0
|
数据采集 前端开发 JavaScript
虎扑APP数据采集:JavaScript与AJAX的结合使用
虎扑APP数据采集:JavaScript与AJAX的结合使用
|
移动开发 前端开发 JavaScript
js之ajax |12-6
js之ajax |12-6
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第3天】前端开发中的异步基石:AJAX与Fetch。AJAX,使用XMLHttpRequest,处理跨域、回调地狱和错误处理。Fetch,基于Promise,简化请求,但需注意默认无跨域头和HTTP错误处理。两者各有优劣,理解其问题与解决策略,能提升前端应用的性能和用户体验。
582 24
|
JavaScript 前端开发 安全
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
安全开发-JS应用&原生开发&JQuery库&Ajax技术&加密编码库&断点调试&逆向分析&元素属性操作
321 5
|
JavaScript 前端开发 网络协议
|
JavaScript 前端开发 安全
js之AJAX
js之AJAX
226 0
|
XML 前端开发 JavaScript
JavaScript进阶 - AJAX请求与Fetch API
【7月更文挑战第9天】JavaScript进阶:AJAX与Fetch API对比。AJAX用于异步数据交换,XMLHttpRequest API复杂,依赖回调。Fetch API是现代、基于Promise的解决方案,简化请求处理。示例:`fetch('url').then(r => r.json()).then(data => console.log(data)).catch(err => console.error(err))`。注意点包括检查HTTP状态、错误处理、CORS、Cookie和超时。Fetch提高了异步代码的可读性,但需留意潜在问题。
486 0
|
前端开发 JavaScript API
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
js【详解】ajax (含XMLHttpRequest、 同源策略、跨域、JSONP)
617 0
|
XML 移动开发 前端开发
JS设置Ajax为同步或异步
JS设置Ajax为同步或异步
702 0