Ajax指的Asyncronous JavaScript and XML

Ajax并不是什么新的编程语言, 它是现有一些东西的应用.从它的名称中就可以看出来

假如我们设想, 浏览器展示了一个页面,但需要更新其中小部分信息,这些信息依赖用户输入,又需要和服务器交互, 因为要和服务器交互, 但是其实还是在这个页面(url), 所以再重新加载整个HTML其实很浪费, 所以出现了Ajax

Ajax就是在JavaScript中, 后台做Http请求, 可以是异步的也可以是同步的, 然后动态更新显示页面. 当然这个过程我们感觉不太到,因为地址栏并不会有任何变化.

Ajax涉及的东西:

  • JavaScript
  • HTTP

其实就只有这两个

再具体一点:

  • XMLHttpRequest (是JavaScript Object), 后台发送HTTP请求
  • JavaScript DOM , 修改HTML来展示信息
  • HTTP请求和服务器交互

一个例子 

比如一个常用的Ajax用途是在注册的时候校验邮箱是否被注册,或用户名是否已存在,用户不用等到整个form都填写完提交才知道是否是已被注册.

<form action=" " method="post">

<input type="text"  id="email_register"  name="email"  onblur="check_email(this.value)" />

</form>

比如这样一个页面, 有一个<form>, 我们再输入邮箱后, 它就会去校验这个邮箱是否被注册了

给<input>绑定一个blur事件, 失去焦点的时候触发

check_email函数:

function check_email(email){

    ajax_request = new XMLHttpRequest();

    ajax_request.onreadystatechange=function(){

         if (ajax_request.readyState==4 && ajax_request.status==200){

              var result = eval(ajax_request.responseText);

                  if (result.status == 'False'){

                        alert("email registered");

                  }

         }

      }

    ajax_request.open("GET", '192.168.12.192:8088/accounts/apiValidRegAddress?type=email&address=' + email, true);

    ajax_request.send();

}

可以看到用javascript做一个Ajax请求的接口,流程

  • 初始化一个XMLHttpRequest对象 ajax_request.
  • 给ajax_request写一个readystatechange函数,  每次其readyState改变的时候会被调用
  • open()
  • send()

GET请求的send()不带参数, 对于POST请求,要发送的数据放在send()的参数中, 如果上面使用POST

ajax_request.send(type="email",  address=email);

注意到我们这行语句:

if (ajax_request.readyState==4 && ajax_request.status==200)

XMLHttpRequest的readyState可以取值0~4, 记录当前请求所处的阶段

  • 0: request not initialized
  • 1: server connection established
  • 2: request received
  • 3: processing request
  • 4: request finished and response is ready

当readyState为4, 也就是收到服务器回应时, 服务器当然是做了一个HTTP应答, status记录服务器HTTP应答状态码, 比如

  • 200  OK
  • 404  页面缺失

[学习] : XMLHttpRequest是JavaScript的一个类,它也是一个标准, 更多的学习, 参考XMLHttpRequest的API

上面例子页面的完整代码

<html>

<head>

<script>

        function checkEmail(email){

                var mailPattern = /^([a-zA-Z0-9_\.\-])+\@(([a-zA-Z0-9\-])+\.)+([a-zA-Z0-9]{2,4})+$/;

                if (!mailPattern.test(email)){

                        alert("invaid email : " + email);

                } else {

                        ajax_request = new XMLHttpRequest();

                        ajax_request.onreadystatechange=function(){

                                        if (ajax_request.readyState==4 && ajax_request.status==200){

                                                var result = eval("("+ajax_request.responseText+")");

                                                if (result.status == false){

                                                        alert("email registered");

                        　　　　　　　　　　　　　　}

                                        }

                                }

                        ajax_request.open("GET", '/accounts/apiValidRegAddress?type=email&address=' + email, true);

                        ajax_request.send();

                }

        }

</script>

</head>

<input type="text" onblur="checkEmail(this.value)"/>

</html>

在checkEmail()中做了一个邮箱地址是否合法的正则检查

我在自己的Django项目中,加入了这个页面这个页面来测试, 上面那个Ajax接口是我们已经实现了的,检查用户输入的手机或邮箱是否被注册了.

页面截图:

JQuery的Ajax

jquery有一系列和Ajax相关的函数,其中最主要的是  jquery.ajax()

语法

  • jquery.ajax([setting])

setting就是一系列的参数,比如

  • type    'GET' or 'POST'
  • url       请求的url
  • data    传递到服务器的数据, key/value的形式
  • sucess  请请求成功的回调函数, 参数是整个ajax调用返回的数据, 并且已经根据 dataType转成了相应的类型
  • dataType    预计的调用返回数据的类型, 如 'json'

比如上面的例子,用ajax来写就是

 jquery.ajax(type='GET',

             url = '/accounts/apiValidRegAddress',

             data={'type':'email', 'address': email},

             dataType='json',

             sucess = function(result){

             if (result.status == false){

                   alert('email registered');

             }

 })

--------------------------

参考:

w3cshools的教程

http://www.w3schools.com/ajax/

mozilla development network

http://mdn.beonex.com/en/AJAX.html

通过一个例子了解Ajax的更多相关文章

  1. Webpack入门——使用Webpack打包Angular项目的一个例子

    2016.1.22,对大多数人来说,这是一个非常平常的日子,但这却是我决定在博客园写博客的日子.虽然注册博客园的博客已有4年8个月,却一直没有动手写过一篇博客,原因是觉得自己水平不行,写不出好东西,所 ...

  2. spring笔记--使用springAPI以及自定义类 实现AOP的一个例子

    Spring的另一个重要思想是AOP,面向切面的编程,它提供了一种机制,可以在执行业务前后执行另外的代码,Servlet中的Filter就是一种AOP思想的体现,下面通过一个例子来感受一下. 假设我们 ...

  3. ReCap 360 photo照片建模技术的又一个例子

    这是我做的又一个利用Autodesk ReCap 360 照片建模技术做的一个例子.你可以下载模型自己把玩,或者下载原始照片自己试一试. 拍摄工具: 小米手机 照片数量:约120张 后期处理工具: p ...

  4. 从一个例子中体会React的基本面

    [起初的准备工作] npm init npm install --save react react-dom npm install --save-dev html-webpack-plugin web ...

  5. 用thinkphp写的一个例子：抓取网站的内容并且保存到本地

    我需要写这么一个例子,到电子课本网下载一本电子书. 电子课本网的电子书,是把书的每一页当成一个图片,然后一本书就是有很多张图片,我需要批量的进行下载图片操作. 下面是代码部分: public func ...

  6. Erlang 程序引发共享内存 bug 的一个例子

    虽然 Erlang 的广告说得非常好,functional.share-nothing.消息传递,blah blah 的,好像用 Erlang 写并发程序就高枕无忧了,但是由于 Erlang 信奉高度 ...

  7. 对Jena的简单理解和一个例子

    本文简单介绍Jena(Jena 2.4),使用Protégé 3.1(不是最新版本)创建一个简单的生物(Creature)本体,然后参照Jena文档中的一个例子对本体进行简单的处理,输出本体中的Cla ...

  8. 使用flume的一个例子

    新项目中需要使用到hadoop和vertica,使用flume把数据加载到hadoop中,我做了一个例子, 即监控一个sharefolder,如果里面有文件,则会文件load到hadoop. 开启Fl ...

  9. 第三十六课：如何书写一个完整的ajax模块

    本课主要教大家如何书写一个完整的ajax模块,讲解的代码主要跟ajax有关,而jQuery的ajax模块添加了Deferred异步编程的机制,因此对ajax的理解难度增大,还是忽略掉.但是我要讲解的代 ...

随机推荐

  1. jquery 1.9 1.8 判断 浏览器（IE11,IE8,IE7,IE6）版本

    1.9以后很我方法删除了,所有和之前版本判断浏览器版本有所差记录一下 1.9 ------------------------------------------------------------- ...

  2. POJ-1179 Polygon （动态规划）

    Polygon Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 5293 Accepted: 2238 Description P ...

  3. hdu5955 Guessing the Dice Roll【AC自动机】【高斯消元】【概率】

    含高斯消元模板 2016沈阳区域赛http://acm.hdu.edu.cn/showproblem.php?pid=5955 Guessing the Dice Roll Time Limit: 2 ...

  4. 开启 NFS 文件系统提升 Vagrant 共享目录的性能

    Vagrant 默认的 VirtualBox 共享目录方式读写性能表现并不好,好在 Vagrant 支持 NFS 文件系统方式的共享,我们可以启用 NFS 提升性能 开启方法 首先要把虚拟机的网络设置 ...

  5. centos7 kdump.service启动失败的解决方法

    最近接触学习使用CentOs7,命令上的确有很大变化. 加入到开机启动,可以使用下面命令来加到开机启动列表, systemctl enable xxx.service 通过下面命令可以查看有哪些是开机 ...

  6. requests库的get请求，带有cookies

    (一)如何带cookies请求 方法一:headers中带cookies #coding:utf-8 import requests import re # 构建url url = 'http://w ...

  7. 万恶之源 - Python数据类型二

    列表 列表的介绍  列表是python的基础数据类型之一 ,其他编程语言也有类似的数据类型. 比如JS中的数 组, java中的数组等等. 它是以[ ]括起来, 每个元素用' , '隔开而且可以存放各 ...

  8. PAT 1072 Gas Station[图论][难]

    1072 Gas Station (30)(30 分) A gas station has to be built at such a location that the minimum distan ...

  9. EM算法小结

    一.什么是EM算法? EM算法是机器学习中一个很重要的算法,即期望最大化算法,主要包括以下两个步骤: E步骤:estimate the expected values M步骤:re-estimate ...

  10. EXTJS4扩展实例：如何使用filter查询treepanel

    我们在使用普通的store时,extjs提供了filterBy,filter等多种方法来过滤数据达到查询效果,但在treepanel中的streeStore却没有实现这个查询,于是,就有了这篇文章. ...