从零开始学习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,如需转载请自行联系原作者
目录
相关文章
|
6月前
|
存储 前端开发 Java
【JAVA】Java 项目实战之 Java Web 在线商城项目开发实战指南
本文介绍基于Java Web的在线商城技术方案与实现,涵盖三层架构设计、MySQL数据库建模及核心功能开发。通过Spring MVC + MyBatis + Thymeleaf实现商品展示、购物车等模块,提供完整代码示例,助力掌握Java Web项目实战技能。(238字)
750 0
|
6月前
|
存储 JavaScript 安全
Web渗透-XSS漏洞深入及xss-labs靶场实战
XSS(跨站脚本攻击)是常见的Web安全漏洞,通过在网页中注入恶意脚本,窃取用户信息或执行非法操作。本文介绍其原理、分类(反射型、存储型、DOM型)、测试方法及xss-labs靶场实战案例,帮助理解与防御XSS攻击。
2009 1
Web渗透-XSS漏洞深入及xss-labs靶场实战
|
安全 关系型数据库 测试技术
学习Python Web开发的安全测试需要具备哪些知识?
学习Python Web开发的安全测试需要具备哪些知识?
363 61
|
6月前
|
安全 Linux PHP
Web渗透-命令执行漏洞-及常见靶场检测实战
命令执行漏洞(RCE)指应用程序调用系统命令时,用户可控制输入参数,导致恶意命令被拼接执行,从而危害系统安全。常见于PHP的system、exec等函数。攻击者可通过命令连接符在目标系统上执行任意命令,造成数据泄露或服务瘫痪。漏洞成因包括代码层过滤不严、第三方组件缺陷等。可通过参数过滤、最小权限运行等方式防御。本文还介绍了绕过方式、靶场测试及复现过程。
1454 0
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
271 3
|
安全 Java 数据安全/隐私保护
springSecurity学习之springSecurity过滤web请求
通过配置 Spring Security 的过滤器链,开发者可以灵活地管理 Web 请求的安全性。理解核心过滤器的作用以及如何配置和组合这些过滤器,可以帮助开发者实现复杂的安全需求。通过具体的示例代码,可以清晰地了解 Spring Security 的配置方法和实践。
639 23
|
机器学习/深度学习 开发框架 API
Python 高级编程与实战:深入理解 Web 开发与 API 设计
在前几篇文章中,我们探讨了 Python 的基础语法、面向对象编程、函数式编程、元编程、性能优化、调试技巧以及数据科学和机器学习。本文将深入探讨 Python 在 Web 开发和 API 设计中的应用,并通过实战项目帮助你掌握这些技术。
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
819 45
|
弹性计算 Java 数据库
Web应用上云经典架构实战
本课程详细介绍了Web应用上云的经典架构实战,涵盖前期准备、配置ALB、创建服务器组和监听、验证ECS公网能力、环境配置(JDK、Maven、Node、Git)、下载并运行若依框架、操作第二台ECS以及验证高可用性。通过具体步骤和命令,帮助学员快速掌握云上部署的全流程。
377 1