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. 如何取消一个目录的git初始化

    一不小心把我的整个home目录都初始化为git仓库了,通过执行删除.git命令,可以恢复 rm -rf .git

  2. codeforces 892 - A/B/C

    题目链接:https://cn.vjudge.net/problem/CodeForces-892A Jafar has n cans of cola. Each can is described b ...

  3. Alisha’s Party---hdu5437（模拟+优先队列）

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=5437 题意:公主有k个朋友来参加她的生日party,每个人都会带价值为v[i]的礼物过来,在所有人到齐 ...

  4. iOS中textbox文本框清除圆角

    在iOS.Mac safari中,所有的textbox, select, checkbox都会被强制美化为圆角.但在特殊情况下需要清除圆角时发现iOS中使用以下传统的css无效: border-rad ...

  5. sql优化 表连接join方式

        sql优化核心 是数据库中 解析器+优化器的工作,我觉得主要有以下几个大方面:1>扫表的方法(索引非索引.主键非主键.书签查.索引下推)2>关联表的方法(三种),关键是内存如何利用 ...

  6. cocos2d-x教程3：用php或DOS批处理命令来转换文件和解压缩zip

    在cocos2d-x使用中,须要不停的转换文件和压缩或解压文件.假设全人工来做,太麻烦了,且easy出错. 我如今把一些用的到批处理贴出来,供大家使用 自己主动把dat文件按数字排序重命名gz.DOS ...

  7. vue-preview使用

    1.安装 npm i vue-preview -S2.如果使用vue-cli生成的项目,需要修改webpack.base.conf.js文件中的loaders,添加一个loader{ test:/vu ...

  8. MongoDB3.x中添加用户和权限控制

    现在需要创建一个帐号,该账号需要有grant权限,即:账号管理的授权权限.注意一点,帐号是跟着库走的,所以在指定库里授权,必须也在指定库里验证(auth) ? 1 2 3 4 5 6 7 8 9 10 ...

  9. PAT 1027 Colors in Mars[简单][注意]

    1027 Colors in Mars (20)(20 分) People in Mars represent the colors in their computers in a similar w ...

  10. oracle修改内存使用和性能调节，SGA

    最近装了oracle,电脑实在太卡了,想要限制内存使用,结果碰到一系列问题: 要用SYS帐户登录,修改SGA使用,结果不知道SYS密码.用SYSTEM帐户权限不够. 试了几条语句后,有几个文件修改不了 ...