通过一个例子了解Ajax
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的更多相关文章
- Webpack入门——使用Webpack打包Angular项目的一个例子
2016.1.22,对大多数人来说,这是一个非常平常的日子,但这却是我决定在博客园写博客的日子.虽然注册博客园的博客已有4年8个月,却一直没有动手写过一篇博客,原因是觉得自己水平不行,写不出好东西,所 ...
- spring笔记--使用springAPI以及自定义类 实现AOP的一个例子
Spring的另一个重要思想是AOP,面向切面的编程,它提供了一种机制,可以在执行业务前后执行另外的代码,Servlet中的Filter就是一种AOP思想的体现,下面通过一个例子来感受一下. 假设我们 ...
- ReCap 360 photo照片建模技术的又一个例子
这是我做的又一个利用Autodesk ReCap 360 照片建模技术做的一个例子.你可以下载模型自己把玩,或者下载原始照片自己试一试. 拍摄工具: 小米手机 照片数量:约120张 后期处理工具: p ...
- 从一个例子中体会React的基本面
[起初的准备工作] npm init npm install --save react react-dom npm install --save-dev html-webpack-plugin web ...
- 用thinkphp写的一个例子：抓取网站的内容并且保存到本地
我需要写这么一个例子,到电子课本网下载一本电子书. 电子课本网的电子书,是把书的每一页当成一个图片,然后一本书就是有很多张图片,我需要批量的进行下载图片操作. 下面是代码部分: public func ...
- Erlang 程序引发共享内存 bug 的一个例子
虽然 Erlang 的广告说得非常好,functional.share-nothing.消息传递,blah blah 的,好像用 Erlang 写并发程序就高枕无忧了,但是由于 Erlang 信奉高度 ...
- 对Jena的简单理解和一个例子
本文简单介绍Jena(Jena 2.4),使用Protégé 3.1(不是最新版本)创建一个简单的生物(Creature)本体,然后参照Jena文档中的一个例子对本体进行简单的处理,输出本体中的Cla ...
- 使用flume的一个例子
新项目中需要使用到hadoop和vertica,使用flume把数据加载到hadoop中,我做了一个例子, 即监控一个sharefolder,如果里面有文件,则会文件load到hadoop. 开启Fl ...
- 第三十六课：如何书写一个完整的ajax模块
本课主要教大家如何书写一个完整的ajax模块,讲解的代码主要跟ajax有关,而jQuery的ajax模块添加了Deferred异步编程的机制,因此对ajax的理解难度增大,还是忽略掉.但是我要讲解的代 ...
随机推荐
- ios-CoreLocation定位服务
一.简单说明 1.CLLocationManager CLLocationManager的常用操作和属性 开始用户定位- (void)startUpdatingLocation; 停止用户定位- (v ...
- RSA原理说明
长度,建议至少1024.模数n(常取默认65537)两边都要用. 指数e,和n一起就是公钥. 指数d,和n一起就是私钥. 质数p和q用于生成密钥对,然后就丢弃不公开. 一.密钥对的生成步骤 1.随机选 ...
- 【PHP】PHP初学者的学习线路
先来看下PHP初学者的学习线路: (1) 熟悉HTML/CSS/JS等网页基本元素,完成阶段可自行制作简单的网页,对元素属性相对熟悉. (2) 理解动态语言的概念和运做机制,熟悉基本的PHP语法. ( ...
- shidebing——QandA：解决一个需求20171214
list1 = [ {'eip': 60, 'day': '2014-7-5'}, {'etans': 96, 'day': '2014-7-5'}, {'etans': 30, 'day': '20 ...
- mysql 权限管理 针对某个库 某张表 授权 tables_priv表
精确到表级别 针对db1的t3表 授予select权限 mysql> grant select on db1.t3 to 'mike'@'localhost'; Query OK, rows a ...
- python len() 函数
Python len() Python len() 方法返回对象(字符.列表.元组等)长度或项目个数. len(obj) 方法语法 obj -- 对象(字符串.列表.元组.字典等) 字符串长度 > ...
- 10 ref 和 out 之间的差别
(1) 两者都是按地址传递的,使用后都将改变原来的数值 (2) ref传进去的參数必须在调用前初始化,out不必 (3) ref传进去的參数在函数内部能够直接使用,而out不可 (4) ref传进去的 ...
- InnoSQL/MySQL并行复制的实现与配置
InnoSQL/MySQL并行复制的实现与配置 http://www.innomysql.net/article/6276.html 并行复制之前的解决方案 InnoSQL在5.5.30-v4版本中支 ...
- 7.MQTT网页客户端连接MQTT服务器的问题WebSocket connection to 'ws://XXX:1883/' failed: Connection closed before receiving a handshake response
问题描述:MQTT.js提供了连接MQTT的一套javascipt的方法,可供前端连接到MQTT服务器,也可以作为脚本测试.以脚本形式,用nodejs运行,是没有问题的,能够正常连接并且发送报文.但是 ...
- PAT 1020 Tree Traversals[二叉树遍历]
1020 Tree Traversals (25)(25 分) Suppose that all the keys in a binary tree are distinct positive int ...