1. 什么是Ajax

首先来看一下什么是Ajax,英语全称Asynchronous JavaScript And XML,翻译成中文就是异步的JavaScript和XML。也被称为异步无刷新技术

先来解释什么是同步?什么是异步?

所谓同步,就是发出HTTP请求以后,客户端只能等待HTTP响应回来才能够干其他的事儿,只要HTTP响应没有回来,那就什么都做不了

所谓异步,发出HTTP请求以后,客户端不用非要等到HTTP响应回来,就可以做其他的事儿。

Ajax并不是一门新的语言或者说是新的技术,而是之前已有的技术:JS,XML,DOM,CSS等多种技术的结合。

Ajax是一个与服务器端无关的技术

哪些地方使用了Ajax?

百度地图:

表单验证

智能提示

  1. Ajax工作原理

传统Web应用的工作:当用户每触发一个HTTP请求,即使只有少量的数据发生变化,其他部分的内容都没有变化,一旦提交,页面还是会重新刷新

处理—等待—处理—等待

Ajax技术实现的是按需获取数据

传统Web应用和Ajax工作原理示意图:

传统Web应用                               Ajax工作原理

  1. 编写Ajax步骤

①  创建Ajax对象

有两种不同的方式:IE的方式和主流浏览器的方式

Ajax中最核心的对象就是XMLHttpRequest对象,最早是由微软公司于1999年在IE5里面内嵌的一种技术。现在市面上几乎所有浏览器都内置了这个对象。

主流浏览器创建XMLHttpRequest对象的方式

IE浏览器创建XMLHttpRequest对象的方式

通过window.ActiveXObject可以判断用户使用的浏览器是IE还是主流浏览器,根据用户使用的浏览器创建不同类型的XMLHttpRequest对象

② 与服务器建立连接并且向服务器发送请求

什么时候建立服务器连接并向服务器发送请求,这里我们需要通过JS事件来进行判断

建立与服务器的连接,通过XMLHttpRequest对象的open()

该函数接收3个参数:1. 连接服务器的方式  2. 连接地址  3. 同步还是异步

GET示例:如下

这里是采用get的方式连接服务器,服务器的地址为test.php 向服务器传输的数据为username=xiejie  由于向服务区传输的数据通过get的方式是拼接在url后面的,所以send()方法里面写入一个null

POST示例如下:

③ 设置回调函数是为了处理从服务器取回来的数据

在open()方法和send()方法之间需要添加状态的监听

通过XMLHttpRequest对象的onreadystatechange属性就可以监听Ajax引擎的工作状态

Ajax的状态如下:

0-(未初始化):还没有调用send()方法

1-(载入):已经调用了send()方法

2-(载入完成):send()方法执行完成

3-(交互):正在解析响应内容

4-(完成):响应内容已经解析完成,可以在客户端使用了

通过XMLHttpRequest对象的readyState属性可以获取Ajax运行的状态值

通过XMLHttpRequest对象的status属性可以获取到返回的HTTP响应的状态码

通过XMLHttpRequest对象的responseText属性可以获取从服务器返回的值

服务器端:服务器接收到客户端提交过来的用户名,然后进行判断,最后返回文本数据

详细代码请参见【表单验证Demo】

Ajax基础介绍的更多相关文章

  1. AJAX基础_AJAX获取PHP数据

    前言 本篇AJAX基础教程,只讲干货,拒绝废话. 全文通过两个实例来讲解AJAX的基本用法,第1个实例是使用AJAX技术从服务器获取纯文本(HTML)数据, 第2个实例是获取从服务器PHP文件的数据. ...

  2. 史上最全的Ajax基础详解

    同步请求和异步请求 先解释一下同步和异步的概念: 同步是指:发送方发出数据后,等接收方发回响应以后才发下一个数据包的通讯方式. 异步是指:发送方发出数据后,不等接收方发回响应,接着发送下个数据包的通讯 ...

  3. 【Java EE 学习 31】【JavaScript基础增强】【Ajax基础】【Json基础】

    一.JavaScript基础增强 1.弹窗 (1)使用window对象的showModelDialog方法和showModelessDialog方法分别可以弹出模式窗口和非模式窗口,但是只能在IE中使 ...

  4. Ajax基础知识《一》

    对于网站开发人员,一定不会陌生的Ajax技术,本篇就让我们认识一下它,或许在日后的开发过程中我们就可以使用到.Ajax在那方面使用的比较多呢?答案:表单注册,传统的表单注册,有时需要填写大量的信息,当 ...

  5. Ajax基础2

    什么是服务器 网页浏览过程的分析 如何配置自己的服务器程序(AMP) 什么是Ajax 无刷新数据读取 异步,同步 Ajax基础(2) 使用Ajax 基础请求显示txt的文件 字符集编码 缓存,阻止缓存 ...

  6. ajax基础语法、ajax做登录、ajax做用户名验证是否可用、ajax做关键字查询动态显示、ajax做用表格显示数据并增加操作列

    AJAX: AJAX 是一种用于创建快速动态网页的技术. 通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新.这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新.   ...

  7. Web3D编程入门总结——WebGL与Three.js基础介绍

    /*在这里对这段时间学习的3D编程知识做个总结,以备再次出发.计划分成“webgl与three.js基础介绍”.“面向对象的基础3D场景框架编写”.“模型导入与简单3D游戏编写”三个部分,其他零散知识 ...

  8. C++ 迭代器 基础介绍

    C++ 迭代器 基础介绍 迭代器提供对一个容器中的对象的访问方法,并且定义了容器中对象的范围.迭代器就如同一个指针.事实上,C++的指针也是一种迭代器.但是,迭代器不仅仅是指针,因此你不能认为他们一定 ...

  9. Ajax基础--JavaScript实现

    ajax原理 1.ajax 即“Asynchronous JavaScript and XML”(异步 JavaScript 和 XML),也就是无刷新数据读取. 通俗地讲就是:AJAX 通过在后台与 ...

随机推荐

  1. Opencv— — Circle Filter

    // define head function #ifndef PS_ALGORITHM_H_INCLUDED #define PS_ALGORITHM_H_INCLUDED #include < ...

  2. python 复制文件流程

    例子代码: [root@master script]# vim copy_file.py #!/usr/bin/python # -*- coding:utf-8 -*- old_file_name ...

  3. BZOJ_2989_数列&&BZOJ_4170_极光_KDTree

    BZOJ_2989_数列&&BZOJ_4170_极光_KDTree Description "若是万一琪露诺(俗称rhl)进行攻击,什么都好,冷静地回答她的问题来吸引她.对方 ...

  4. BZOJ_4026_dC Loves Number Theory _主席树+欧拉函数

    BZOJ_4026_dC Loves Number Theory _主席树+欧拉函数 Description  dC 在秒了BZOJ 上所有的数论题后,感觉萌萌哒,想出了这么一道水题,来拯救日益枯 竭 ...

  5. compileSdkVersion, minSdkVersion 和 targetSdkVersion详解

    API level API level是一个整数,它指的是我们使用的框架(Framework)的版本,也就是我们使用的sdk中的各个平台下的android.jar. 但是这个API level又和An ...

  6. HDU1083(最大匹配)

    Courses Time Limit: 20000/10000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total S ...

  7. 十、外键约束FK(foreign key)

    1.定义 a.外键涉及到的术语:外键约束.外键字段.外键值. b.外键约束.外键字段.外键值三者之间的关系? 答:给某个字段添加外键约束之后,该字段称为外键字段,外键字段中的值是外键值. c.外键根据 ...

  8. 4-3逻辑非运算符及案例 & 4-4

    创建类 LoginDemo3 这里取反 !(n%3==0) package com.imooc.operator; import java.util.Scanner; public class Log ...

  9. JavaScript 对象字面量

    JavaScript 对象字面量   JavaScript 对象字面量 在编程语言中,字面量是一种表示值的记法.例如,"Hello, World!" 在许多语言中都表示一个字符串字 ...

  10. jQuery 如何获取ASP.NET服务器控件的值

    由于ASP.NET网页运行后,服务器控件会随机生成客户端id,jquery获取时候不太好操作,总结有以下3种方法: 服务器控件代码:<asp:TextBox ID="txtUserID ...