Ajax入门学习教程（一）

1　什么是AJAX

AJAX（Asynchronous JavaScript And XML）翻译成中文就是“异步Javascript和XML”。即使用Javascript语言与服务器进行异步交互，传输的数据为XML（当然，传输的数据不只是XML）。

AJAX还有一个最大的特点就是，当服务器响应时，不用刷新整个浏览器页面，而是可以局部刷新。这一特点给用户的感受是在不知不觉中完成请求和响应过程。

  • 与服务器异步交互；
  • 浏览器页面局部刷新；

2.　同步交互与异步交互

  • 同步交互：客户端发出一个请求后，需要等待服务器响应结束后，才能发出第二个请求；
  • 异步交互：客户端发出一个请求后，无需等待服务器响应结束，就可以发出第二个请求。

3.　AJAX常见应用情景

当我们在百度中输入一个“传”字后，会马上出现一个下拉列表！列表中显示的是包含“传”字的10个关键字。

其实这里就使用了AJAX技术！当文件框发生了输入变化时，浏览器会使用AJAX技术向服务器发送一个请求，查询包含“传”字的前10个关键字，然后服务器会把查询到的结果响应给浏览器，最后浏览器把这10个关键字显示在下拉列表中。

  • 整个过程中页面没有刷新，只是刷新页面中的局部位置而已！
  • 当请求发出后，浏览器还可以进行其他操作，无需等待服务器的响应！

当输入用户名后，把光标移动到其他表单项上时，浏览器会使用AJAX技术向服务器发出请求，服务器会查询名为zhangSan的用户是否存在，最终服务器返回true表示名为zhangSan的用户已经存在了，浏览器在得到结果后显示“用户名已被注册！”。

  • 整个过程中页面没有刷新，只是局部刷新了；
  • 在请求发出后，浏览器不用等待服务器响应结果就可以进行其他操作；

4　AJAX的优缺点

优点：

  • AJAX使用Javascript技术向服务器发送异步请求；
  • AJAX无须刷新整个页面；
  • 因为服务器响应内容不再是整个页面，而是页面中的局部，所以AJAX性能高；

缺点：

  • AJAX并不适合所有场景，很多时候还是要使用同步交互；
  • AJAX虽然提高了用户体验，但无形中向服务器发送的请求次数增多了，导致服务器压力增大；
  • 因为AJAX是在浏览器中使用Javascript技术完成的，所以还需要处理浏览器兼容性问题；

Ajax的基本工作原理及流程：

在一般的 Web 应用程序中，用户填写表单字段并单击 Submit 按钮。然后整个表单发送到服务器，服务器将它转发给处理表单的脚本（通常是 PHP 或 Java，也可能是 CGI 进程或者类似的东西），脚本执行完成后再发送回全新的页面。该页面可能是带有已经填充某些数据的新表单的 HTML，也可能是确认页面，或者是具有根据原来表单中输入数据选择的某些选项的页面。当然，在服务器上的脚本或程序处理和返回新表单时用户必须等待。屏幕变成一片空白，等到服务器返回数据后再重新绘制。这就是交互性差的原因，用户得不到立即反馈，因此感觉不同于桌面应用程序。

Ajax 基本上就是把 JavaScript 技术和 XMLHttpRequest 对象放在 Web 表单和服务器之间。当用户填写表单时，数据发送给一些 JavaScript 代码而不是 直接发送给服务器。相反，JavaScript 代码捕获表单数据并向服务器发送请求。同时用户屏幕上的表单也不会闪烁、消失或延迟。换句话说，JavaScript 代码在幕后发送请求，用户甚至不知道请求的发出。更好的是，请求是异步发送的，就是说 JavaScript 代码（和用户）不用等待服务器的响应。因此用户可以继续输入数据、滚动屏幕和使用应用程序。

然后，服务器将数据返回 JavaScript 代码（仍然在 Web 表单中），后者决定如何处理这些数据。它可以迅速更新表单数据，让人感觉应用程序是立即完成的，表单没有提交或刷新而用户得到了新数据。JavaScript 代码甚至可以对收到的数据执行某种计算，再发送另一个请求，完全不需要用户干预！这就是 XMLHttpRequest 的强大之处。它可以根据需要自行与服务器进行交互，用户甚至可以完全不知道幕后发生的一切。结果就是类似于桌面应用程序的动态、快速响应、高交互性的体验，但是背后又拥有互联网的全部强大力量。

以上所述是小编给大家介绍的Ajax入门学习教程（一），希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • ajaxrequest.js ajaxrequest 0.7最新版 使用AJAXRequest进行AJAX应用程序开发入门小技巧

    使用AJAXRequest进行AJAX应用程序开发(1) - 初识AJAXRequest 前言 在发布了AJAXRequest类的几个版本之后,渐渐地有许多朋友用上了它,也有许多朋友问我有没有更详细的说明和示例.不过因为时间的问题以及我能想到的示例有限,一直没有多写几个示例.考虑了一下,决定写一个关于AJAXRequest的教程,希望对使用AJAXRequest类的朋友们有所帮助. 准备 在使用AJAXRequest进行AJAX开发之前,你需要做以下准备: 准备知识:JavaScript基本语法

  • jquery $.ajax入门应用二

    前台 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页&l

  • 简单的前端js+ajax 购物车框架(入门篇)

    今天在公司实在没有事做,突然就想到写下商城的购物车的前端框架,当然我这里只有购物车的增删改查,也许写的并不是那么完善,但最重要的是一个入门,也希望js达人给些建议,好让我更上一个台阶. HOHO~~~开始咯: Js: 复制代码 代码如下: //为了省事,就没写自己的js ajax了 用了jquery的,当然你也可以添加到jquery的扩展方法内,哈哈,我太懒了,所以就写这里了. var _$ = { AJAX: function (urlparm, d, beforecall, successc

  • AJAX 简介及入门实例

    对于一个像我一样刚刚接触Web开发且无多少实际项目经验的新手而言,AJAX技术显得复杂而又深奥.经过两天的baidu.google,我对AJAX的基本原理有了一个大致的认识,在此总结一下. 1. 什么是AJAX? AJAX全称是异步的JavaScript和XML,是Asynchronous JavaScript and XML的缩写.AJAX技术用于创建交互式网页应用的网站开发,至于何为异步,后文会有解释. 1.1 桌面应用程序和Web应用程序 在详细讨论AJAX技术之前,需要先知道AJAX技术

  • jquery $.ajax入门应用一

    前台  复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" > <head> <title>无标题页&

  • Ajax开始准备入门篇

    我将在Web圈推出ajax原创系列教程,如果你还不知道什么是ajax,请阅读:ajax是什么? 在此之前我们需要做一下简单的ajax准备工作,但你必须要具备基本的html,javascript,dom编写能力．否则这个ajax教程你读起来会很吃力．我的目的是通过这份教程．可以让你在你的网页中使用ajax技术实现,读取,添加,修改,删除数据的操作．也许你是只老鸟对我写的这些不屑一顾,但我还是希望你能看 下该教程中演示的一些例子,没准会有地方吸引你! 下面我们要做的有2点．第1我们必须创建一个可用的

  • Ajax PHP简单入门教程代码

    首先我们来了解怎么在javascrīpt中创建这个对象: var xmlHttp = new XMLHttpRequest(); 这行简单的代码在 Mozilla.Firefox.Safari.Opera 以及基本上所有以任何形式或方式支持 Ajax 的非 Microsoft 浏览器中,创建了 XMLHttpRequest 对象.但是对于市场占有率达到70%的IE来说,这种方法是不行的,而不同的IE版本还有不同的创建方法,所以我们需要在IE下面使用下面两种创建对象的办法: 复制代码 代码如下:

  • Ajax入门学习教程（一）

    Ajax入门学习教程（一）

    1 什么是AJAX AJAX(Asynchronous JavaScript And XML)翻译成中文就是"异步Javascript和XML".即使用Javascript语言与服务器进行异步交互,传输的数据为XML(当然,传输的数据不只是XML). AJAX还有一个最大的特点就是,当服务器响应时,不用刷新整个浏览器页面,而是可以局部刷新.这一特点给用户的感受是在不知不觉中完成请求和响应过程. 与服务器异步交互: 浏览器页面局部刷新: 2. 同步交互与异步交互 同步交互:客户端发出一个

  • mybatis框架入门学习教程

    mybatis框架入门学习教程

    MyBatis是一个支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及对结果集的检索封装.MyBatis可以使用简单的XML或注解用于配置和原始映射,将接口和Java的POJO(Plain Old Java Objects,普通的Java对象)映射成数据库中的记录. 1.创建工程,导入jar包 创建一个java工程或者web工程都可以,然后导入mybatis的jar包和依赖包还有数据库的jar包,本人使用Oracle10g数据库

  • Python装饰器入门学习教程(九步学习)

    装饰器(decorator)是一种高级Python语法.装饰器可以对一个函数.方法或者类进行加工.在Python中,我们有多种方法对函数和类进行加工,比如在Python闭包中,我们见到函数对象作为某一个函数的返回结果.相对于其它方式,装饰器语法简单,代码可读性高.因此,装饰器在Python项目中有广泛的应用. 这是在Python学习小组上介绍的内容,现学现卖.多练习是好的学习方式. 第一步:最简单的函数,准备附加额外功能 # -*- coding:gbk -*- '''示例1: 最简单的函数,表

  • MyBatis入门学习教程（一）-MyBatis快速入门

    MyBatis入门学习教程（一）-MyBatis快速入门

    MyBatis 本是apache的一个开源项目iBatis, 2010年这个项目由apache software foundation 迁移到了google code,并且改名为MyBatis .2013年11月迁移到Github. iBATIS一词来源于"internet"和"abatis"的组合,是一个基于Java的持久层框架.iBATIS提供的持久层框架包括SQL Maps和Data Access Objects(DAO) 首先给大家介绍MyBatis的含义

  • mybatis快速入门学习教程新手注意问题小结

    mybatis快速入门学习教程新手注意问题小结

    什么是mybatis MyBatis是支持普通SQL查询,存储过程和高级映射的优秀持久层框架.MyBatis消除了几乎所有的JDBC代码和参数的手工设置以及结果集的检索.MyBatis使用简单的XML或注解用于配置和原始映射,将接口和Java的POJOs(Plan Old Java Objects,普通的Java对象)映射成数据库中的记录. orm工具的基本思想 无论是用过的hibernate,mybatis,你都可以法相他们有一个共同点: 1. 从配置文件(通常是XML配置文件中)得到 ses

  • MyBatis入门学习教程-MyBatis快速入门

    MyBatis入门学习教程-MyBatis快速入门

    目录 Mybatis 一.快速开始 1.创建 Maven 项目 2.导入 Maven 依赖 3.配置 Maven 插件 4.新建数据库,导入表格 5.编写 Mybatis 配置文件 6.编写实体类 7.编写 mapper 接口 8.编写 mapper 实现 9.Mybatis 配置文件中,添加 mapper 映射 10.编写 Mybatis 工具类 11.测试 二.日志添加 1.添加 Maven 依赖 2.添加 log4j 配置 3.Mybatis 中配置 LOG 4.执行测试 三.Mybati

  • Vue + OpenLayers 快速入门学习教程

    Vue + OpenLayers 快速入门学习教程

    Openlayers 是一个模块化.高性能并且功能丰富的WebGIS客户端的JavaScript包,用于显示地图及空间数据,并与之进行交互,具有灵活的扩展机制. 简单来说,使用 Openlayers(后面简称ol) 可以很灵活自由的做出各种地图和空间数据的展示.而且这个框架是完全免费和开源的. 前言 本文记录 Vue 使用 OpenLayers 入门,使用 OpenLayers 创建地图组件,分别使用 OpenLayers 提供的地图和本地图片做为地图. Overview OpenLayers

  • Kotlin入门学习教程之可见性修饰符

    目录 前言 1.包场景下的可见性修饰符 2.类内部声明的成员 总结 前言 在Kotlin中四种可见性修饰符:private.protected.internal.public,如果没有显示指定修饰符的话,默认可见性是public. 四种修饰符的说明 public修饰符表示 公有 .此修饰符的范围最大.当不声明任何修饰符时,系统会默认使用此修饰符. internal修饰符表示 模块 .对于模块的范围在下面会说明. protected修饰符表示 私有`+`子类.值得注意的是,此修饰符不能用于顶层声明

  • 详解Spring batch 入门学习教程(附源码)

    详解Spring batch 入门学习教程(附源码)

    Spring batch 是一个开源的批处理框架.执行一系列的任务. 在 spring batch 中 一个job 是由许多 step 组成的.而每一个 step  又是由 READ-PROCESS-WRITE task或者 单个 task 组成. 1. "READ-PROCESS-WRITE" 处理,根据字面意思理解就可以: READ 就是从资源文件里面读取数据,比如从xml文件,csv文件,数据库中读取数据. PROCESS 就是处理读取的数据 WRITE 就是将处理过的数据写入到

  • JavaScript的Vue.js库入门学习教程

    JavaScript的Vue.js库入门学习教程

    Vue是一个小巧轻便的javascript库.它有一个简单易懂的API,能够让开发者在开发web应用的时候更加简易便捷.实际上,一直让Vue引以为豪的是它的便捷性.执行力.灵活性. 这篇教程的目的就是通过一些例子,让你能够概览一些基本的概念和特性.在接下来的其他教程里,你会学到Vue更多的有用的特性,从而用Vue搭建一个可扩展的项目. MVVM 数据绑定 MVVM的本质是通过数据绑定链接View和Model,让数据的变化自动映射为视图的更新.Vue.js在数据绑定的API设计上借鉴了Angula

随机推荐