zoukankan html css js c++ java

AJAX基础

一、什么是AJAX

　　Asynchronous Javascript And Xml

　　异步的 JS 和 Xml (JSON)

异步访问:

　　当客户端向服务器端发送请求时，服务器在处理的过程中，客户端无需等待，可以做其他操作

AJAX的优点:

1.异步的访问方式

2.局部的刷新方式

使用场合:

1.搜索建议

2.表单验证

3.前后端完全分离

SPA -> Single Page Application

二、AJAX核心对象-异步对象(XMLHttpRequest)

1.什么XMLHttpRequest

简称为 "xhr"

　　称为 "异步对象",代替浏览器向服务器发送异步的请求并接受响应

2.创建异步对象

　　xhr的创建是由js来提供的

　　主流的异步对象是XMLHttpRequest类型的，并且主流浏览器都支持(IE7+,Chrome,Firefox,Safari,Opera)

支持XMLHttpRequest:

　　通过 new XMLHttpRequest()

不支持XMLHttpRequet:

　　通过new ActiveXObject("Microsoft.XMLHTTP")

创建一个判断浏览器是否支持性的JS文件：

//file:common.js
function createXhr(){
    var xhr = null;
    //根据不同的浏览器创建不同的异步对象
    if(window.XMLHttpRequest){
      xhr = new XMLHttpRequest();
    }else{
      xhr = new ActiveXObject("Microsoft.XMLHTTP");
    }
    return xhr;
}

创建xhr

#urls.py
url(r'^createxhr$', views.create_view),
#----------------------
#views.py
def create_view(request):
  return render(request, 'createxhr.html')

urls配置文件和视图配置文件

//creatxhr.html
<!DOCTYPE html>
<html lang="en">
<head>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <button onclick="createXhr()">创建XHR</button>
</body>
</html>

creatxhr.html

三、XHR的成员

1.方法 - open()

作用:创建请求

语法:xhr.open(method,url,async);

method:请求方式,取值 'get' 或 'post'

url:请求地址,取值字符串

async:是否采用异步的方式发送请求

true:异步的

false:同步的

示例:使用get方式向02-server的地址发送异步请求

xhr.open('get',路由地址',true);

示例

2.属性 - readyState

作用:表示请求状态，通过不同的请求状态值来表示xhr与服务器的交互情况

由0-4共5个值来表示5个不同的状态

0:请求尚未初始化
1:已经与服务器建立连接
2:服务器端已经接收请求信息
3:服务器端处理中...
4:响应完成

3.属性 - status

作用:表示服务器端的响应状态码

200 : 服务器端正确处理请求并给出响应
404 : Not Found
500 : Internal Server Error

示例:
if(xhr.readyState==4 && xhr.status==200){
//可以接收服务器端的响应信息
}

示例

4.属性 - responseText

作用:表示服务器端响应回来的数据

if(xhr.readyState==4 && xhr.status==200){
//可以接收服务器端的响应信息
console.log(xhr.responseText);
}

示例

5.事件 - onreadystatechange

作用:每当xhr的readyState值发生改变时要触发的操作 - 回调函数

xhr.onreadystatechange = function(){
    if(xhr.readyState==4 && xhr.status==200){
    //可以接收服务器端的响应信息
    console.log(xhr.responseText);
    }
}

示例

6.方法 - send()

作用:通知xhr向服务器端开始发送请求

语法:xhr.send(body);

body:请求主体

get请求:

　　body的值为null

　　xhr.send(null);

post请求:

　　body的置为具体的请求数据

　　xhr.send("请求数据");

四、AJAX的操作步骤

（一）GET请求

　　1.创建 xhr

　　2.创建请求 - open()

　　3.设置回调函数 - onreadystatechange

　　　　1.判断状态

　　　　2.接收响应

　　　　3.业务处理

　　　　4.发送请求 - send(null)

(1)演示使用ajax发送get请求的步骤

#演示使用ajax发送get请求的步骤
url(r'^ajax-get$', views.ajax_get_view),
url(r'^server-ajax-get$', views.server_ajax_get),

路由配置文件

def ajax_get_view(request):
  return render(request, 'ajax-get.html')

def server_ajax_get(request):
  return HttpResponse('这是server的响应内容')

视图配置

//file:ajax-get.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/common.js"></script>
    <script>   
        function btnShow(){
            //1.创建xhr
            var xhr = createXhr();
            //2.创建请求
            xhr.open("get","/demo/server-ajax-get",true);
            //3.设置回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status==200){
                    //接收服务器端响应的数据
                    var res = xhr.responseText;
                    document.getElementById("show").innerHTML = res;
                }
            }
            //4.发送请求
            xhr.send(null);
        }
    </script>
</head>
<body>
    <button onclick="btnShow()">显示</button>
    <a href="/demo/server-ajax">显示</a>
    <div id="show"></div>
</body>

ajax-get.html

(2)演示使用ajax发送get请求并附带参数

# 演示使用ajax发送get请求并附带参数
url(r'^ajax-get-params$', views.ajax_get_params),
url(r'^server-ajax-get-params$', views.server_ajax_get_params),

路由配置文件

def ajax_get_params(request):
  return render(request, 'ajax-get-params.html')

def server_ajax_get_params(request):
  # 1.接收前端传递过来的两个参数
  name = request.GET['name']
  age = request.GET['age']
  # 2.相应数据给前端
  s = '姓名:%s,年龄:%s' % (name, age)
  return HttpResponse(s)

视图配置

//file:ajax-get-params.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/common.js"></script>
  <script>
        function btnShow(){
            //1.创建xhr
            var xhr = createXhr();
            //2.创建请求(带参数)
            var url = "/demo/server-ajax-get-params?name=maplefox&age=30";
            xhr.open("get",url,true);
            //3.设置回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4&&xhr.status==200){
                    document.getElementById("show").innerHTML = xhr.responseText;
                }
            }
            //4.发送请求
            xhr.send(null);
        }
  </script>
</head>
<body>
    <button onclick="btnShow()">显示</button>
    <div id="show"></div>
</body>
</html>

ajax-get-params.html

（二）POST请求

　　1.创建xhr

　　2.创建请求

　　　　1.请求方式改为post

　　　　2.有请求参数的话不能拼在地址的后面

　　3.设置回调函数

　　4.设置请求消息头 - Content-Type

　　　　xhr.setRequestHeader(

　　　　　　"Content-Type",

　　　　　　"application/x-www-form-urlencoded"

　　　　)

　　5.发送请求

　　　　请求数据放在send()的参数位置处

　　　　示例:xhr.send("name=wang&age=30&gender=男");

演示使用ajax发送post请求的步骤

#使用AJAX发送post请求
url(r'^ajax-post/$', views.ajax_post_view),
#简单版 不同步数据库
url(r'^server-ajax-post/$', views.server_ajax_post_view),

路由配置文件

def ajax_post_view(request):
  return render(request, 'ajax-post.html', locals())

def server_ajax_post_view(request):
  uname = request.POST['uname']
  upwd = request.POST['upwd']
  msg = "账号:" + uname + "密码" + upwd
  return HttpResponse(msg)

视图配置

//file:ajax-post.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/common.js"></script>
  <script src="/static/jquery-1.11.3.js"></script>
  <script>
    $(function(){
      //为 #btnPost 绑定 click 事件
      $("#btnPost").click(function(){
        //1.创建xhr
        var xhr = createXhr();
        //2.创建请求
        xhr.open("post","/demo/server-ajax-post/",true);
        //3.设置回调函数
        xhr.onreadystatechange = function(){
          if(xhr.readyState==4 && xhr.status == 200){
            alert(xhr.responseText);
          }
        }
        //4.设置请求消息头
        xhr.setRequestHeader(
          "Content-Type",
          "application/x-www-form-urlencoded"
        );
        //5.发送请求
        var uname = $("#uname").val();
        var upwd = $("#upwd").val();
        // 获取csrfmiddlewaretoken的值
        var csrf = $("[name='csrfmiddlewaretoken']").val();
        var params = "uname="+uname+"&upwd="+upwd+"&csrfmiddlewaretoken="+csrf;
        xhr.send(params);
      });
    });
  </script>
</head>
<body>
  {% csrf_token %}
  <p>
    用户名称 <input type="text" id="uname">
  </p>
  <p>
    用户密码 <input type="password" id="upwd">
  </p>
  <p>
    <input type="button" id="btnPost" value="提交">
  </p>
</body>
</html>

ajax-post.html

（三）使用AJAX完成注册操作

(1)get请求检查用户是否存在

# 使用 AJAX 完成注册操作
url(r'^register/$', views.register_view),
# 检查用户是否存在
url(r'^checkuname/$', views.checkuname_view),

路由配置文件

# ====使用ajax完成注册操作====
from .models import Users
def register_view(request):
  return render(request, 'register.html')

# ====检查用户是否存在====
def checkuname_view(request):
  # 1.接收前端传递过来的参数 uname
  uname = request.GET['uname']
  # 2.判断uname在User数据库中是否存在
  user = Users.objects.filter(uname=uname)
  # 3.根据查询到的结果给出响应
  if user:
    return HttpResponse('1')
  return HttpResponse('0')

视图配置

//file:register.html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="/static/common.js"></script>
    <script src="/static/jquery-1.11.3.js"></script>
    <script>
    $(function(){
      //为 #uname 绑定 blur 事件
       $("#uname").blur(function(){
          //1.创建xhr
          var xhr = createXhr();
          //2.创建请求 - /demo/checkuname
          var uname = $("#uname").val();
          var url = "/demo/checkuname?uname="+uname;
          xhr.open("get",url,true);
          //3.设置回调函数
          xhr.onreadystatechange = function(){
            if(xhr.readyState==4 && xhr.status==200){
              //$("#uname-tip").html(xhr.responseText);
              if(xhr.responseText == "1"){
                $("#uname-tip").html("用户名称已经存在");
              }else{
                $("#uname-tip").html("通过");
              }
            }
          }
          //4.发送请求
          xhr.send(null);
       });
    });
    </script>
</head>
<body>
<div>
    <p>
      用户名称:<input type="text" id="uname">
      <span id="uname-tip"></span>
    </p>
    <p>
      用户密码:<input type="password" id="upwd">
    </p>
    <p>
      电子邮箱:<input type="email" id="uemail">
    </p>
    <p>
      用户昵称: <input type="text" id="nickname">
    </p>
    <p>
      <input type="button" value="注册">
    </p>
  </div>
</body>
</html>

(2)get请求完成注册操作(添加用户)

# 使用 AJAX 完成注册操作
url(r'^get-register/$', views.get_register_view),
# 检查用户是否存在
url(r'^checkuname/$', views.checkuname_view),
# 通过get请求注册操作增加新用户(同步数据库)
url(r'^server-get-register-user/$', views.server_get_register_user_view),

路由配置文件

from .models import Users
# ====通过get请求 注册增加新用户===
def get_register_view(request):
  return render(request, 'register.html')

# ====检查用户是否存在====
def checkuname_view(request):
  # 1.接收前端传递过来的参数 uname
  uname = request.GET['uname']
  # 2.判断uname在User数据库中是否存在
  user = Users.objects.filter(uname=uname)
  # 3.根据查询到的结果给出响应
  if user:
    return HttpResponse('1')
  return HttpResponse('0')

# ====通过get请求方式注册增加新用户====
def server_get_register_user_view(request):
  # 1.接收前端传递的数据
  uname = request.GET['uname']
  upwd = request.GET['upwd']
  uemail = request.GET['uemail']
  nickname = request.GET['nickname']
  # 2.通过数据实现增加操作(通过异常处理,处理增加失败的问题)
  try:
    Users.objects.create(uname=uname,
                         upwd=upwd,
                         uemail=uemail,
                         nickname=nickname)
    return HttpResponse('1')
  except Exception as e:
    print(e)
    return HttpResponse('0')

视图配置

//file:get-register.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/common.js"></script>
  <script src="/static/jquery-1.11.3.js"></script>
  <script>

    /**
     * 检查用户名称是否存在的函数
     * 需要一个返回值ret
     *   返回true,则表示用户名称已存在
     *   返回false,则表示用户名称不存在
     */
    function checkuname(){
          var ret = false;
          //1.创建xhr
          var xhr = createXhr();
          //2.创建请求 - /demo/checkuname
          var uname = $("#uname").val();
          var url = "/demo/checkuname?uname="+uname;
          xhr.open("get",url,true);
          //3.设置回调函数
          xhr.onreadystatechange = function(){
            if(xhr.readyState==4 && xhr.status==200){
              //$("#uname-tip").html(xhr.responseText);
              if(xhr.responseText == "1"){
                $("#uname-tip").html("用户名称已经存在");
                ret = true;
              }else{
                $("#uname-tip").html("通过");
              }
            }
          }
          //4.发送请求
          xhr.send(null);
          return ret;
    }

    $(function(){
        //为 #uname 绑定 blur 事件
        $("#uname").blur(function(){
            checkuname();
        });


       //为#btnReg绑定click事件实现注册
        $("#btnReg").click(function(){
            //1.创建xhr
            var xhr = createXhr();
            //2.创建请求
            var uname = $("#uname").val();
            var upwd = $("#upwd").val();
            var uemail = $("#uemail").val();
            var nickname = $("#nickname").val();
            var url = "/demo/server-get-register-user?uname="+uname+"&upwd="+upwd+"&uemail="+uemail+"&nickname="+nickname;
            console.log(url);
            xhr.open("get",url,true);
            //3.设置回调函数
            xhr.onreadystatechange = function(){
                if(xhr.readyState==4 && xhr.status==200){   
                    if(xhr.responseText == "1"){
                        alert("注册成功");
                    }else{
                        alert("注册失败");
                    }
                }
            }
            //4.发送请求
            xhr.send(null);
        });
    });
  </script>
</head>
<body>
  <div>
    <p>
      用户名称:<input type="text" id="uname">
      <span id="uname-tip"></span>
    </p>
    <p>
      用户密码:<input type="password" id="upwd">
    </p>
    <p>
      电子邮箱:<input type="email" id="uemail">
    </p>
    <p>
      用户昵称: <input type="text" id="nickname">
    </p>
    <p>
      <input type="button" value="注册" id="btnReg">
    </p>
  </div>
</body>
</html>

get-register.html

(3)post请求完成注册操作(添加用户)

# 使用 AJAX 完成注册操作
url(r'^post-register/$', views.post_register_view),
# 检查用户是否存在
url(r'^checkuname/$', views.checkuname_view),
# 通过post请求注册操作增加新用户(同步数据库)
url(r'^server-post-register-user', views.server_post_register_user_view),

路由配置文件

from .models import Users
# ====通过post请求 注册增加新用户===
def post_register_view(request):
  return render(request, 'post-register.html')

# ====检查用户是否存在====
def checkuname_view(request):
  # 1.接收前端传递过来的参数 uname
  uname = request.GET['uname']
  # 2.判断uname在User数据库中是否存在
  user = Users.objects.filter(uname=uname)
  # 3.根据查询到的结果给出响应
  if user:
    return HttpResponse('1')
  return HttpResponse('0')

# ====通过post请求方式注册增加新用户====
def server_post_register_user_view(request):
  # 1.接收前端传递的数据
  uname = request.GET['uname']
  upwd = request.GET['upwd']
  uemail = request.GET['uemail']
  nickname = request.GET['nickname']
  # 2.通过数据实现增加操作(通过异常处理,处理增加失败的问题)
  try:
    Users.objects.create(uname=uname,
                         upwd=upwd,
                         uemail=uemail,
                         nickname=nickname)
    return HttpResponse('1')
  except Exception as e:
    print(e)
    return HttpResponse('0')

视图配置

//file:post-register.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/common.js"></script>
  <script src="/static/jquery-1.11.3.js"></script>
  <script>

    /**
     * 检查用户名称是否存在的函数
     * 需要一个返回值
     *   返回true,则表示用户名称已存在
     *   返回false,则表示用户名称不存在
     */
    function checkuname(){
          var ret = false;
          //1.创建xhr
          var xhr = createXhr();
          //2.创建请求 - /demo/checkuname
          var uname = $("#uname").val();
          var url = "/demo/checkuname?uname="+uname;
          xhr.open("get",url,false);
          //3.设置回调函数
          xhr.onreadystatechange = function(){
            if(xhr.readyState==4 && xhr.status==200){
              //$("#uname-tip").html(xhr.responseText);
              if(xhr.responseText == "1"){
                $("#uname-tip").html("用户名称已经存在");
                ret = true;
              }else{
                $("#uname-tip").html("通过");
              }
            }
          }
          //4.发送请求
          xhr.send(null);
          return ret;
    }

    $(function(){
        //为 #uname 绑定 blur 事件
        $("#uname").blur(function(){
            checkuname();
        });


       //为#btnRegPost绑定click事件
       $("#btnRegPost").click(function(){
        //调用checkuname()并接收返回值,
        //如果返回true则给出用户名存在的提示,
        //如果返回false,则正常发送数据到服务器端执行注册的操作
        if(checkuname()){
          alert("用户名称已存在,请更新");
        }else{
          //1.创建xhr
          var xhr = createXhr();
          //2.创建请求
          xhr.open("post","/demo/server-post-register-user/",true);
          //3.设置回调函数
          xhr.onreadystatechange = function(){
            if(xhr.readyState==4 && xhr.status==200){
              if(xhr.responseText == "1"){
                alert("注册成功");
              }else{
                alert("注册失败");
              }
            }
          }
          //4.设置请求消息头
          xhr.setRequestHeader(
            "Content-Type",
            "application/x-www-form-urlencoded"
          );
          //5.发送请求 - 参数
          var uname = $("#uname").val();
          var upwd = $("#upwd").val();
          var uemail = $("#uemail").val();
          var nickname = $("#nickname").val();
          var csrf = $("[name='csrfmiddlewaretoken']").val();
          var params = "uname="+uname+"&upwd="+upwd+"&uemail="+uemail+"&nickname="+nickname+"&csrfmiddlewaretoken="+csrf;
          xhr.send(params);
        }
       });

    });
  </script>
</head>
<body>
  {% csrf_token %}
  <div>
    <p>
      用户名称:<input type="text" id="uname">
      <span id="uname-tip"></span>
    </p>
    <p>
      用户密码:<input type="password" id="upwd">
    </p>
    <p>
      电子邮箱:<input type="email" id="uemail">
    </p>
    <p>
      用户昵称: <input type="text" id="nickname">
    </p>
    <p>
      <input type="button" value="注册" id="btnRegPost">
    </p>
  </div>
</body>
</html>

post-register.html

(4)使用get请求显示用户列表(使用ajax读取数据)

# 使用get请求显示用户列表(使用ajax读取数据)
url(r'^show-users/$', views.show_users),
url(r'^server-show-users/$', views.server_show_users),

路由配置文件

# ====显示用户列表(使用ajax读取数)====
def show_users(request):
  return render(request, 'show-users.html')

def server_show_users(request):
  users = Users.objects.all()
  msg = ''
  for user in users:
    msg += "%s_%s_%s_%s_%s|" % (user.id, user.uname,
                                user.upwd, user.uemail,
                                user.nickname)
  msg = msg[0:-1]
  return HttpResponse(msg)

视图配置

//file:show-user.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <script src="/static/common.js"></script>
  <script src="/static/jquery-1.11.3.js"></script>
  <script>
    $(function(){
      $("#btnShow").click(function(){
        var xhr = createXhr();
        xhr.open("get","/demo/server-show-users",true);
        xhr.onreadystatechange = function(){
          if(xhr.readyState==4 && xhr.status==200){
            var msg = xhr.responseText;
            var html = "";
            var users = msg.split("|");
            for(var i=0;i<users.length;i++){
              html += "<tr>";
              //将每个人的信息通过 _ 再一次拆分
              var infos = users[i].split('_');
              html += "<th>"+infos[0]+"</th>";
              html += "<th>"+infos[1]+"</th>";
              html += "<th>"+infos[2]+"</th>";
              html += "<th>"+infos[3]+"</th>";
              html += "<th>"+infos[4]+"</th>";
              html += "</tr>";
            }
            $("#content").html(html);
          }
        }
        xhr.send(null);
      });
    });
  </script>
</head>
<body>
  <button id="btnShow">显示</button>
  <table width="500" border="1">
    <thead>
      <tr>
        <th>ID</th>
        <th>用户名</th>
        <th>密码</th>
        <th>邮箱</th>
        <th>昵称</th>
      </tr>
    </thead>
    <tbody id="content"></tbody>
  </table>
</body>
</html>

show-user.html

查看全文

相关阅读:
vxlan 内核实现
 perf 系统调用
 quic NAT
机器学习在ABR算法中的应用纵览
 清华最新AIOps案例：强化学习，降低网络传输延时
 内核gso
怎么提高网络应用性能？让DPDK GRO和GSO来帮你！
网卡VXLAN的offload技术介绍
 Matplotlib中的plt和ax画图的区别
 Task 3: 异常处理(2天)

原文地址：https://www.cnblogs.com/maplethefox/p/11300761.html