使用JavaScript和jQuery简单实现Ajax技术
Posted 波光闪烁
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了使用JavaScript和jQuery简单实现Ajax技术相关的知识，希望对你有一定的参考价值。
Ajax的定义
Ajax被认为是(Asynchronous javascript and XML的缩写）。 允许浏览器与服务器通信而无须刷新当前页面的技术都被叫做Ajax。
Ajax的工作原理
Ajax的核心是JavaScript对象XmlHttpRequest。XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应，而不阻塞用户。
一、使用JavaScript实现Ajax技术
1.首先建立一个jsp页面,导入js页面并且新建一个测试按钮。
<script type="text/javascript" src="ajaxGet.js"></script> <!-- src导入相应的JavaScript实现Ajax代码 --> </head> <body> <input type="button" id="btn" value="ajax"/> <!-- 测试按钮 --> </body>
2.其中我们在js页面先需要获取XmlHttpRequest对象,并且需要处理兼容问题
获取XmlHttpRequest对象 function getXMLHttpRequest() { var xmlHttpReq=null; if (window.XMLHttpRequest) {//Mozilla 浏览器 xmlHttpReq = new XMLHttpRequest(); }else { if (window.ActiveXObject) {//IE 浏览器 try { xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { try {//IE 浏览器 xmlHttpReq = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { } } } } return xmlHttpReq;
3.接着在相同页面下开始写onload事件(get方法发送数据)
window.onload = function(){ var btnDom=document.getElementById("btn"); btnDom.onclick = function(){ //ajax步骤 //1 var xhr = getXMLHttpRequest(); //2.监听响应 如何判断能够正确请求和响应 xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ //响应结束 if(xhr.status == 200){ //正确响应 //接收响应数据 var data = xhr.responseText; alert(data); } } }; //3.打开连接 /* * method: get 或 post * url: 请求路径 * async: true(表示异步，默认) false */ xhr.open("get","../ajaxGetServlet?age=18&userName=jack",true); //4.发送数据 xhr.send(null); //使用get请求send发送的数据都为null,且不能省略这一步 }; };
或者使用(post请求//第3第4步骤有区别)
window.onload = function(){ var btnDom=document.getElementById("btn"); btnDom.onclick = function(){ //1 var xhr = getXMLHttpRequest(); //2. xhr.onreadystatechange = function(){ if(xhr.readyState == 4){ if(xhr.status == 200){ var data = xhr.responseText; alert(data); } } }; //3. xhr.open("post","../ajaxPostServlet",true); /* * 4.发送数据 * send() string或null * String类型一般为键值对 "username=zhangsan" * get请求 都是send(null) * post请求要send数据需要设置请求头 */ xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); xhr.send("user=admin&age=12"); }; };
其中步骤3的url需要我们创建一个servlet
public class AjaxGetServlet extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { String age = request.getParameter("age"); String userName = request.getParameter("userName"); System.out.println(age+"------"+userName); //响应数据 response.getWriter().print("hello"); //js中步骤2监听响应 } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
代码写完以后,我们只需要按一下(value="ajax")测试按钮就可以使用ajax技术实现异步请求与响应。
二、使用jQuery实现Ajax技术
案例:如何使用ajax技术实现用户注册时用户名是否被占用?
1.jsp注册页面
<script type="text/javascript" src="../js/jquery-1.8.3.js"></script><!-- 导入jQuery包 --> <body> <h3>jquery 实现 ajax</h3> <p>用户名：<input id="userName" name="userName"/><span id="msg"></span></p> <script type="text/javascript" src="jqdemo.js"></script><!-- jqdemo.js使用jquery实现ajax --> </body>
2.js页面(无需手动获取XmlHttpRequest对象)
$(function(){ $("#userName").blur(function(){ var name = $(this).val(); if(name.trim() == ""){ return; } //jquery 实现 ajax $.ajax({ url:"../jqueryUserName", //请求的路径 type:"post", // 请求方式 默认是get data: { //要发送的数据 "name":name }, dataType:"text", //响应数据的类型 success:function(result){ // 正确响应 if(result == "yes"){ $("#msg").html("用户名可以使用"); }else{ $("#msg").html("用户名被占用"); } }, error:function(){ alert("请求失败！"); } }); }); });
3.servlet页面(获取用户名比较是否被占用)
public class JqueryUserName extends HttpServlet { public void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("jquery ajax 验证用户名！"); PrintWriter out = response.getWriter(); String name = request.getParameter("name"); if("ajax".equals(name) || "admin".equals(name) || "jack".equals(name)){ //用户名已被使用 out.print("no"); }else{ out.print("yes"); } } public void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { doGet(request, response); } }
以上是关于使用JavaScript和jQuery简单实现Ajax技术的主要内容，如果未能解决你的问题，请参考以下文章