原生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文件代码如下