从零开始学习Ajax:Web开发技术实战

简介:

说到AJAX,您会想到什么?球迷的第一反应或许是荷兰的阿贾克斯足球队。而本文的AJAX,指的是一种网页开发技术。在WWW被笑称为Wait,Wait,Wait的时代,AJAX大放异彩,AJAX提供的一步交互技术,可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户。

     何谓AJAX?

      AJAX(Asynchronous JavaScript and XML)是一种创建交互式网页应用的网页开发技术。AJAX使用JavaScript编写的 XMLHttpRequest 对象与与服务器通信。使用XMLHttpRequest,浏览器向Web 服务器发送异步HTTP请求,页面无需重载即可与Web 服务器交换数据。

  AJAX技术的标准实现是XMLHttpRequest(简称XHR)对象。XHR可以调用类似jQuery等相关JS库例。下面给一个示例代码,来演示如何使用XHR。

  1. 创建XMLRequest对象

if  (window.XMLHttpRequest) {

xhr 
=   new  XMLHttpRequest();

else   if  (window.ActiveXObject) {

xhr 
=   new  ActiveXObject( " Microsoft.XMLHTTP " );

}

  2. 构造浏览器向服务器发送的异步HTTP请求URL

xhr.open(

" GET " ,

" my-dynamic-content.jsp?id= "

+ encodeURI(myId),

true

);

  3. 指定回调函数接收服务器端响应

xhr.onreadystatechange  =   function (){

processReqChange(req);

}

  4.浏览器向服务器端发送XRH请求

xhr.send( null );

  如果使用同步方式,待客户端请求发送后,要做的是等待服务器端的响应。有时是干等,因为服务器因服务忙,或者网络延迟原因响应很慢。而使用异步AJAX技术,我们就可以干点别的事情了,而不必干等,因为AJAX指定回调函数随时接收服务器的响应,然后通知我们。如果您想了解更多细节, 请参见XHR对象的更多属性信息:

  何谓HTTP

  XHR的基础是HTTP协议,因此,充分熟悉HTTP协议有助于更加有效利用AJAX技术。HTTP协议的主要特点如下:

  •   HTTP是一种无状态的请求-响应协议
  •   无论是请求,还是响应,都包含了Header,属于文本类型。
  •   只有POST请求才包含Body。
  •   所谓请求是指定义一个动词与方法。
  •   通过在Header文件设置Content-type指定请求、响应Mime类型。

  相比于其它HTTP方法,我们使用GET和POST的概率是99%。HTTP方法列表如下:

  REST是时下非常流行的Web Service技术,常见的一个应用是地图服务,常用的HTTP的方法如下:

  正确设定请求与响应的Mime类型,是网页正常显示的关键因素之一。Mime类型列表如下:










本文转自 wws5201985 51CTO博客,原文链接:http://blog.51cto.com/wws5201985/735596,如需转载请自行联系原作者
目录
相关文章
|
18天前
|
前端开发 JavaScript 关系型数据库
从前端到后端:构建现代化Web应用的技术探索
在当今互联网时代,Web应用的开发已成为了各行各业不可或缺的一部分。从前端到后端,这篇文章将带你深入探索如何构建现代化的Web应用。我们将介绍多种技术,包括前端开发、后端开发以及各种编程语言(如Java、Python、C、PHP、Go)和数据库,帮助你了解如何利用这些技术构建出高效、安全和可扩展的Web应用。
|
1月前
|
XML 前端开发 JavaScript
AJAX 前端开发利器:实现网页动态更新的核心技术
**AJAX** 允许网页在不刷新的情况下更新内容,实现异步与服务器交换数据。通过JavaScript的XMLHttpRequest对象,可发送和接收数据。当用户触发事件(如点击),函数向服务器发送GET请求,服务器响应后更新指定HTML部分。AJAX并非编程语言,而是利用浏览器内置对象、JavaScript和DOM技术。核心是XMLHttpRequest对象,它有多种方法(如`open()`和`send()`)和属性(如`onreadystatechange`、`readyState`和`status`)来处理请求和响应。
58 2
AJAX 前端开发利器:实现网页动态更新的核心技术
|
1月前
|
前端开发 数据库 UED
构建高性能Web应用的关键技术
本文将介绍构建高性能Web应用的关键技术,包括前端优化、后端优化、数据库优化等方面。通过深入讨论各项技术的原理和实践方法,帮助开发者们提升Web应用的响应速度和用户体验。
|
1天前
|
前端开发 JavaScript UED
Web前端开发:探索技术与艺术的交融
Web前端开发:探索技术与艺术的交融
8 1
|
3天前
|
设计模式 存储 前端开发
Java从入门到精通:2.2.1学习Java Web开发,了解Servlet和JSP技术,掌握MVC设计模式
Java从入门到精通:2.2.1学习Java Web开发,了解Servlet和JSP技术,掌握MVC设计模式
|
3天前
|
开发框架 前端开发 数据库
Python从入门到精通:3.3.2 深入学习Python库和框架:Web开发框架的探索与实践
Python从入门到精通:3.3.2 深入学习Python库和框架:Web开发框架的探索与实践
|
21天前
|
安全 前端开发 Java
Java Web开发知识点学习总结
Java Web开发涉及Java基础、Servlet、JSP、数据库操作(SQL+JDBC)、MVC设计模式、Spring框架、Hibernate ORM、Web服务(SOAP&RESTful)、安全认证(HTTP Basic/Digest/OAuth)及性能优化(缓存、异步、负载均衡)。
18 3
|
1月前
|
运维 JavaScript 前端开发
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!
发现了一款宝藏学习项目,包含了Web全栈的知识体系,JS、Vue、React知识就靠它了!