AJAX

AJAX

AJAX简介

• AJAX(Asychronized JavaScript And Xml)异步js与xml是指一种创建交互式、快速动态网页应用的网页开发技术，无需重新加载整个网页的情况下，能够更新部分网页的技术。

• 通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

• 使用ajax的缺点：

  • 可能破坏浏览器前进与后退与加入收藏书签的功能，在动态更新页面的情况下用户无法回到前一个页面状态
  • 解决方案：HTML5之前的方法大多是在用户单击后退按钮访问历史记录时，通过创建或使用一个隐藏的IFRAME来重现页面上的变更。（例如，当用户在Google Maps中单击后退时，它在一个隐藏的IFRAME中进行搜索，然后将搜索结果反映到Ajax元素上，以便将应用程序状态恢复到当时的状态）。
  • 在进行异步开发的时候如果网络延迟过大，会导致异步加载的页面部分一直非正常显示，解决方案：使用一个可视化的组件来告诉用户系统正在进行后台操作并且正在读取数据和内容。

原生AJAX使用

• ajax访问流程

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-U9X0I0s4-1593508306376)(F:\MarkDownOnte\学习笔记\项目问题\assets\1593249348070.png)]

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

• 原生的ajax代码

<script>
  // 原生的ajax
  document.getElementById("ks").onclick=function () {
    // 输入框失去焦点触发事件
    // 创建ajax访问服务的request请求
      let ajax=  new XMLHttpRequest()
    // 打开服务器连接，参数GET或者POST ，服务器地址 ，异步（true）同步（false）
     let pro= document.getElementById("ajax").value;
      alert(pro)
    ajax.open("GET","AjaxServlet?user="+pro,true)
    // 发送请求给服务器
    ajax.send();
    // 设置回调函数,在准备状态发生变化的时候激活这个函数
    ajax.onreadystatechange=function () {
      // 准备状态为4，服务器状态码为200表示正常返回数据
      if(ajax.readyState==4&&ajax.status==200){
        // 获取从服务器返回的数据
        let text=  ajax.responseText;
        if(text==true){
          document.getElementById("sp").innerText="ok"
        }else {
          document.getElementById("sp").innerText="Nok"
        }
      }
    }
  }
</script>

3.0以前jq框架中$.get与$.psot方式的使用

• $.get()方式使用

  • get函数参数

    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-HXPeo88P-1593508306379)(F:\MarkDownOnte\学习笔记\项目问题\assets\1593249517766.png)]

  • 参数说明

    1. url: 表示请求服务器地址

    2. data: 发送给服务器的数据
       格式1：键1=值2&键2=值2
       格式2：{键:值,键:值}

    3. callback：回调函数，参数是服务器返回的数据

    4. type：从服务器返回的数据类型，默认是字符串类型
       取值：xml, html, script, json, text

       <script type="text/javascript">
           /*
           用户注册时输入一个用户名，失去焦点以后，通过ajax后台判断用户名是否存在。
           服务器先不访问数据库，直接判断用户名，如果用户名为newboy，则表示用户已经存在，否则用户名可以注册使用。
       
           $.get(url,data,callback,type)  $.post(url,data,callback,type)
           只有第1个是必须的选项
           1. url: 表示请求服务器地址
           2. data: 发送给服务器的数据
               格式1：键1=值2&键2=值2
               格式2：{键:值,键:值}
           3. callback：回调函数，参数是服务器返回的数据
           4. type：从服务器返回的数据类型，默认是字符串类型
               取值：xml, html, script, json, text
           */
           //用户名的改变事件
           $("#user").change(function () {
               //访问服务器获取数据，参数是服务器返回的数据，返回的类型是json格式
               $.get("json/users.json", function (users) {
                   //判断用户名是否存在
                   let user = $("#user").val();  //得到文本框的值
                   //1.设置标记
                   let exists = false;
                   //2.遍历数组，查找名字是否存在
                   for (let u of users) {
                       if (u == user) {
                           exists = true;  //找到
                           break;
                       }
                   }
                   //3.根据查找的结果显示信息
                   if (exists) {  //用户存在
                       $("#info").text("用户名已经存在");
                   }
                   else {
                       $("#info").text("恭喜可以注册");
                   }
               },"json");
           });
       </script>
       

通用方式$.ajax({字面量})的使用

• 通用方式使用语法

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-olNjWnyc-1593508306383)(F:\MarkDownOnte\学习笔记\JavaWeb\assets\1593256879113.png)]

• 参数

  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-l7dXRZro-1593508306386)(F:\MarkDownOnte\学习笔记\JavaWeb\assets\1593256916843.png)]

• 使用代码

  <script type="text/javascript">
      /*
       $.ajax({键:值,键:值})
           url ： 服务器访问地址
           async  ：默认是异步，取值是true，设置为false表示同步
               异步：不会等服务器处理完，会一直向后执行
               同步：等服务器处理完毕，才执行后面的JS代码
  
           method： GET或POST方法，默认是get方法
           data ： 发送给服务器的数据，2种格式：1. 键=值&键=值 2. {键:值, 键:值}
           dataType  ： 服务器返回的数据类型<br />取值：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>
  

equest对象
alert(“服务器出现异常，状态码是：” + request.status);
}
});

      //alert("浏览器端的代码继续执行");  //不会等服务器处理完，会一直向后执行
  });

~~~