JavaEE(企业级开发)之Ajax

AJax笔记

前言：

​ 前端和后端进行交互，前端向后端发送请求后端向前端响应数据有两种响应方式，一种同步响应，一种是异步响应

1.同步交互方式：

​ 例如：超链接，表单请求，服务器端程序向客户端做出响应，响应的内容会覆盖原来的页面内容。会打断客户端的正常操作不友好。

2.ajax（异步交互 不同步）：

​ 当客户端与服务器交互时，服务器端向客户端响应内容不影响客户端的正常操作。在整个过程中页面不刷新，只需要更新网页局部内容，不打断客户的正常操作。

1.Ajax简介

• Ajax全称为：“Asynchronous JavaScript and XML”(异步JavaScript和XML)，使用Ajax,我们可以无刷新状态更新页面，并且实现异步交互，提升了用户体验
• Ajax其实质是利用浏览器提供的一个特殊对象（XMLHttpRequest）异步的向浏览器发送请求
• 服务器返回部分数据，浏览器让你去利用这些数据对页面做部分的更新，整个过程，页面无刷新，不打断用户的操作
• 当客户与服务器交互时，服务器向客户端响应内容不影响客户端的正常操作
• 实现方式： 浏览器 js
• 如果是ajax提交的数据那么服务器相应的数据返回后会交给ajax 它通过它的属性responseText获得

2.XMLHTTPRequest对象

（1）创建XMLHttpRequest对象

• XMLHttpRequest对象：发送请求到服务器并获得返回结果
• 所有现代浏览器 都内建了 XMLHttpRequest 对象，通过一行简单的 JavaScript 代码，我们就可以创建 XMLHttpRequest 对象。
• new XMLHttpRequest();

      //使用xmlHttpRequest对象，发起异步请求
       var httpObj = new XMLHttpRequest();

（2）XMLHttpRequest的常用方法和属性

JavaScript对象XMLHttpRequest是整个Ajax技术的核心，它提供了异步 发送请求的能力

常用方法：

      httpObj.open("post", "back/demo2", true);
      //这个方法是建立与服务器的连接 第一个参数是：请求方式post或get  第二个参数是：指定请求的服务器地址
      // 第三个参数是：是否使用异步请求，其值为true或false

      httpObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      //  设置提交数据的格式的请求头

      httpObj.send("account=" + account + "&password=" + password);
      //这是向浏览器响应的数据

      //如果是ajax提交的数据那么服务器响应的数据返回后会交给XMLHttpRequest对象

常用属性：

接收服务器端响应回来的数据当发送请求之后会触发onreadystatechange事件，在此事件的回调函数中，获取响应的内容 readystate:XMLHttpRequses的状态信息

如这段代码：

httpObj.onreadystatechange=function (){
         //当对象就绪状态为4，http响应状态码为200时获取内容
         if (httpObj.readyState==4&&httpObj.status==200){
          if (httpObj.responseText==0){
            alert("登录成功");
            //登录成功跳转页面
            location.assign("success.html")
          }else if (httpObj.responseText==1){
             alert("账号或密码错误");
           }else{
            alert("服务器忙");
          }

         }
       }

注：在这段代码中httpObj代表的是XMLHTTPRequest对象

（3）get和post发送方式

代码示例：

post方式：

  httpObj.open("post", "back/demo2", true);
      //这个方法是建立与服务器的连接 第一个参数是：请求方式post或get  第二个参数是：指定请求的服务器地址
      // 第三个参数是：是否使用异步请求，其值为true或false

      httpObj.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
      //  设置提交数据的格式的请求头
     //发送具体数据以键值对的形式
      httpObj.send("account=" + account + "&password=" + password);

3.json

问题：怎么样从服务器端向客户端响应更多的数据？

解决：前面进响应字符串，前端可以收到，那么在Java中偶需要对字符串进行转换

​ 早期解决方案会将数据写入到XML文件中将XML文件返回，这种语言比较麻烦，现在诞生了一种轻量级的解决方案，对象表现形式是一种轻量级的数据表示格式，本质是字符串。

java对象转json

在异步交换数据时，java对象不能直接被传递给js,所以需要先把java对 象转换为JSON格式字符串，把字符串响应给客户端，再由客户端将 JSON字符串转换为js对象即可（ $.parseJSON(jsonstr) ）。

步骤：

先连接数据库把数据取出来转换为java对象再从后端将Java对象转换为json格式字符串，把字符串响应给客户端，再有json字符串转换为js对象即可。

后端：

User user = log.checked(req.getParameter("account"), req.getParameter("password"));
            //从数据库中将数据取出来封装到java对象中
            out = resp.getWriter();
            Gson gson = new Gson();      //谷歌的gson jar包
            String s = gson.toJson(user);    //将java对象转为json对象

前端：

   httpObj.onreadystatechange = function () {   httpObj为XMLHTTPRequest对象

        //当对象就绪状态为4，http响应状态码为200时获取内容
        if (httpObj.readyState == 4 && httpObj.status == 200) {

          var obj = $.parseJSON(httpObj.responseText);        将服务器响应回来的json对象（字符                                                               串）转换为js对象
          if (obj.id != null) {
            alert("登录成功")
          }

4.用jquery封装简单实现两种请求

get请求：

post请求：

代码：

  <！-- 用jquery封装post请求-->

$.post("back/demo2",$("#formId").serialize(),function (res){
      //当对象就绪状态为4，http响应状态码为200时获取内容
      var obj=$.parseJSON(res);
      if (obj.account!=null){
        alert("登录成功");
      }
      window.sessionStorage.setItem("user",res);
      //将数据保存到浏览器中，浏览器关闭后数据就会消失
      location.replace("success.html");
      //跳转到success.html页面
    })
      
      
  <！-- 用jquery封装get请求-->     
      $.get("back/student", function (res) {
      if (res == 201) {
        alert("请重新登录");
      }else {
        alert("保存成功,您已经登录，在重新登录一回吧");
      }
      location.assign("login.html");
    })
      

注：利用jqurey提交两种请求方式中穿的参数是根据穿的内容来判断而不是根据位置来判断，所以不一定是一定要传入四个或三个参数