AJAX-异步开发

AJAX的概述

同步和异步的区别

  • 同步方式:正常情况下,浏览器与服务器之间是串行操作,类似于Java单线程的操作。

  • 异步方式:浏览器与服务器是并行操作,类似于Java中多线程操作。

即浏览器后台发送数据给服务器,不是通过表单去提交数据给服务器。

用户在前台还是可以继续工作,用户感觉不到浏览器已经将数据发送给了服务器,并且服务器也已经返回了数据。

ajax使用的技术

  1. JavaScript:用于后台发送数据给服务器,并且对服务器返回的结果进行处理
  2. XML:用于接收服务器返回的数据,但是已经被JSON格式代替。

原生AJAX访问流程

AJAX的执行流程

流程说明:

  1. 用户在浏览器端由JS创建一个对象XMLHttpRequest对象
  2. 这个对象是ajax的核心对象,由它发送请求给服务器
  3. 将请求的数据发送到服务器
  4. 在服务器处理数据,从数据库中查询用户是否存在,通过XML(JSON)把数据返回
  5. 在回调函数中得到服务器返回的数据,使用HTML和CSS更新页面的信息

XMLHttpRequest对象

案例:原生的AJAX判断用户名是否存在


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>用户注册title>
head>
<body>
    <form autocomplete="off">
        姓名:<input type="text" id="username">
        <span id="uSpan">span>
        <br>
        密码:<input type="password" id="password">
        <br>
        <input type="submit" value="注册">
    form>
body>
<script>
    //1.为姓名绑定失去焦点事件
    document.getElementById("username").onblur = function() {
        //2.创建XMLHttpRequest核心对象
        let xmlHttp = new XMLHttpRequest();

        //3.打开链接
        let username = document.getElementById("username").value;
        xmlHttp.open("GET","userServlet?username="+username,true);
        //xmlHttp.open("GET","userServlet?username="+username,false);

        //4.发送请求
        xmlHttp.send();

        //5.处理响应
        xmlHttp.onreadystatechange = function() {
            //判断请求和响应是否成功
            if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {
                //将响应的数据显示到span标签
                document.getElementById("uSpan").innerHTML = xmlHttp.responseText;
            }
        }
    }
script>
html>

jQuery中$.ajax()方法的使用

案例:使用AJAX实现后台用户登录的功能

服务器


##### 代码

```html



    
    用户登录
    


用户登录

用户名
密码

其它参数的演示


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户登录title>
    <script src="js/jquery-3.3.1.js">script>
head>
<body>
<h2>用户登录h2>
<form id="loginForm">
    <table>
        <tr>
            <td>用户名td>
            <td><input type="text" name="username" id="username"/>td>
        tr>
        <tr>
            <td>密码td>
            <td><input type="password" name="password" id="password"/>td>
        tr>
        <tr>
            
            <td colspan="2" align="center"><input type="button" value="登录" id="btnLogin"/>td>
        tr>
    table>
form>

<script type="text/javascript">
    /*
     $.ajax({键:值,键:值})
         url : 服务器访问地址
         async  :默认是异步,取值是true,设置为false表示同步
             异步:不会等服务器处理完,会一直向后执行
             同步:等服务器处理完毕,才执行后面的JS代码

         method: GET或POST方法,默认是get方法
         data : 发送给服务器的数据,2种格式:1. 键=值&键=值 2. {键:值, 键:值}
         dataType  : 服务器返回的数据类型
取值:xml, html, script, json, text success : 服务器正常响应的回调函数,参数就是服务器返回的数据 error : 服务器出现异常的回调函数,参数是XMLHttpRequest对象 */
//登录按钮的点击事件 $("#btnLogin").click(function () { //1.获取用户输入的用户名和密码 let username = $("#username").val(); let password = $("#password").val(); //2.使用$.ajax访问服务器 $.ajax({ url: "json/login.json", data: "a=1&b=2", //发送的数据,可以在浏览器上按f12,选network可以看到 //async: false, //默认是true,表示异步 //服务器正常响应的回调函数,参数就是返回的用户数据 success: function (users) { let exists = false; //遍历数组中每个用户 for (let user of users) { //比较用户名和密码是否相同 if (user.name == username && user.password == password) { exists = true; break; } } //输出登录成功或失败 if (exists) { alert("登录成功,欢迎您:" + username); } else { alert("登录失败,请重试"); } }, dataType: "json", //指定返回数据类型是json error: function (request) { //出现异常回调函数,参数是XMLHttpRequest对象 alert("服务器出现异常,状态码是:" + request.status); } }); //alert("浏览器端的代码继续执行"); //不会等服务器处理完,会一直向后执行 });
script> body> html>

jQuery3.0的$.get()和$.post方法

GET新增签名方式实现上面的登录

代码


<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>用户登录title>
    <script src="js/jquery-3.3.1.js">script>
head>
<body>
<h2>用户登录h2>
<form id="loginForm">
    <table>
        <tr>
            <td>用户名td>
            <td><input type="text" name="username" id="username"/>td>
        tr>
        <tr>
            <td>密码td>
            <td><input type="password" name="password" id="password"/>td>
        tr>
        <tr>
            
            <td colspan="2" align="center"><input type="button" value="登录" id="btnLogin"/>td>
        tr>
    table>
form>

<script type="text/javascript">
    /*
     $.get({键:值,键:值})  $.post
         url : 服务器访问地址
         async  :默认是异步,取值是true,设置为false表示同步
             异步:不会等服务器处理完,会一直向后执行
             同步:等服务器处理完毕,才执行后面的JS代码

         method: GET或POST方法,默认是get方法
         data : 发送给服务器的数据,2种格式:1. 键=值&键=值 2. {键:值, 键:值}
         dataType  : 服务器返回的数据类型
取值:xml, html, script, json, text success : 服务器正常响应的回调函数,参数就是服务器返回的数据 error : 服务器出现异常的回调函数,参数是XMLHttpRequest对象 */
//登录按钮的点击事件 jQuery("#btnLogin").click(function () { //1.获取用户输入的用户名和密码 let username = jQuery("#username").val(); let password = jQuery("#password").val(); //2.使用$.get访问服务器 jQuery.get({ url: "json/login.json", method: "post", data: "a=1&b=2", //发送的数据,可以在浏览器上按f12,选network可以看到 //async: false, //默认是true,表示异步 //服务器正常响应的回调函数,参数就是返回的用户数据 success: function (users) { let exists = false; //遍历数组中每个用户 for (let user of users) { //比较用户名和密码是否相同 if (user.name == username && user.password == password) { exists = true; break; } } //输出登录成功或失败 if (exists) { alert("登录成功,欢迎您:" + username); } else { alert("登录失败,请重试"); } }, dataType: "json", //指定返回数据类型是json error: function (request) { //出现异常回调函数,参数是XMLHttpRequest对象 alert("服务器出现异常,状态码是:" + request.status); } }); });
script> body> html>

你可能感兴趣的:(java)