原生Ajax和Jquery的Ajax使用示例

AJAX.jpg

一、文章前言

AJAX = 异步 JavaScript 和 XML。
AJAX 是一种用于创建快速动态网页的技术。
通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。

二、原生Ajax访问Servlet

后台代码

@WebServlet("/myServlet")
public class MyServlet extends HttpServlet {
    @Override
    protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        this.doPost(req,resp);
    }

    @Override
    protected void doPost(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException {
        String name = req.getParameter("name");
        PrintWriter writer = resp.getWriter();
        if (name.equals("123456")) {
            writer.print("success");
        } else {
            writer.print("error");
        }
        writer.close();
    }
}

Ajax代码

function sendRequestByPost(){
      //定义异步请求对象
      var xmlReq;
      //检测浏览器是否直接支持ajax
      if(window.XMLHttpRequest){
        xmlReq=new XMLHttpRequest();
      }else{
        xmlReq=new ActiveObject('Microsoft.XMLHTTP');
      }

      //设置回调函数
      xmlReq.onreadystatechange=function(){
        if (xmlReq.readyState==4&&xmlReq.status==200) {
          //获取服务器的响应值
          var result=xmlReq.responseText;
          if(result=="success"){
            document.getElementById("account").style.borderColor = "green";
          }else {
            document.getElementById("account").style.borderColor = "red";
          }
        }
      };


      /*
      * 创建异步Get请求
      *  //创建异步get请求
      * var name = document.getElementById("account").value;
      * var url="Hello?name="+name;
      * xmlReq.open("GET",url,true);
      * //发送请求
      * xmlReq.send(null);
      *
      * */

      //创建异步Post请求
      var url="/myServlet";
      xmlReq.open("POST",url,true);
      xmlReq.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
      //发送请求
     var name = document.getElementById("account").value;
      var data = "name=" + name;
      xmlReq.send(data);
    }

QQ图片20171025202413.png QQ图片20171025202507.png QQ图片20171025202609.png

Jquery中的Ajax
需要引入jquery.js文件代码如下

<input type="text" name="name" id="account"><br>
  <button id="sub">提交</button>
  <script src="jquery.min.js"></script>
  <script>
    $("#sub").click(function () {
      var name = $("#account").val();
      alert(name);
      $.ajax({
        //提交数据的类型 POST GET
        type:"POST",
        //提交的网址
        url:"myServlet",
        //提交的数据
        data:{name:name},
        //返回数据的格式
        dataType: "text",//"xml", "html", "script", "json", "jsonp", "text".
        //在请求之前调用的函数
//     beforeSend:function(){alert("发送请求")},
        //成功返回之后调用的函数
        success:function(data){
          if (data=="success") {
            $("#account").css("borderColor","green");
          }else {
            $("#account").css("borderColor","red");
          }
        }   ,
        //调用执行后调用的函数
        //complete: function(){
        //alert("请求结束");
        //HideLoading();
        //},
        //调用出错执行的函数
        error: function(){
        //请求出错处理
          alert("请求出错");
        }
      });
    });
  </script>

QQ图片20171025202413.png QQ图片20171025202507.png QQ图片20171025202609.png