经过一个例子了解Ajax

时间 2019-12-07

标签经过一个例子了解 ajax 栏目 Ajax 繁體版

原文原文链接

Ajax指的Asyncronous JavaScript and XMLjavascript

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

假如咱们设想, 浏览器展现了一个页面,但须要更新其中小部分信息,这些信息依赖用户输入,又须要和服务器交互, 由于要和服务器交互, 可是其实仍是在这个页面(url), 因此再从新加载整个HTML其实很浪费, 因此出现了Ajax java

Ajax就是在JavaScript中, 后台作Http请求, 能够是异步的也能够是同步的, 而后动态更新显示页面. 固然这个过程咱们感受不太到,由于地址栏并不会有任何变化.jquery

Ajax涉及的东西:ajax

JavaScript
HTTP

其实就只有这两个编程

再具体一点:json

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

一个例子 api

好比一个经常使用的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来写就是

1 jquery.ajax(type='GET', 
2             url = '/accounts/apiValidRegAddress', 
3             data={'type':'email', 'address': email},
4             dataType='json',
5             sucess = function(result){
6             if (result.status == false){
7                   alert('email registered');
8             }
9 })

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

参考:

w3cshools的教程

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

mozilla development network

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