原生Ajax和Jquery的Ajax使用示例

2017-11-21 20:13:04来源:CSDN作者:qq_35954591人点击

分享

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

最新文章

123

最新摄影

闪念基因

微信扫一扫

第七城市微信公众平台