上期博客介绍了表单和超链接提交，这两种方式都会要求页面跳转。在项目开发过程中难免遇到页面部跳转的情况下实现页面局部刷新的需求，例如页面上的验证码。页面局部刷新可以减少等待时间，给用户更好的体验。既然有需求，那就得想办法满足。下面就给大家带来网页局部刷新技术 --- ajax。
AJAX 是 Asynchronous JavaScript And XML（异步 JavaScript 及 XML）的首字母缩写，它并不是一种新的编程语言，而仅仅是一种新的技术，它可以创建更好、更快且交互性更强的 web 应用程序。AJAX 可以只把需要的数据发送到服务器，返回数据的展示需要使用JavaScript。AJAX 的核心是XMLHttpRequest对象，发送异步数据、接收响应以及执行回调都是通过它完成的。
首先，了解一下传统的JavaScript实现Ajax的例子。该例中，用户通过点击页面的按钮发送请求，从服务器端取回“Hello World!”，并在页面显示。实现代码如下：
// servlet代码片段 response.setContentType("text/html"); PrintWriter out = response.getWriter(); out.print("Hello World!"); // 页面标签 <body> <input type="button" onclick="ajaxMethod()" value="ajax提交"/> <span id="show">哈 哈 哈</span> </body>
// js代码实现ajax <script type="text/javascript"> var xmlHttpReq = null; // 说明一个空对象来装入XMLHttpRequest对象 // 创建XMLHttpRequest对象 if(window.ActiveXObject){ // IE5 IE6 是用 ActiveXObject 方式引入 XMLHttpRequest 对象 xmlHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); } else if (window.XMLHttpRequest){ // 除 IE5 IE6 外的浏览器， XMLHttpRequest 是 window 的子对象 xmlHttpReq = new XMLHttpRequest(); }
function ajaxMethod(){ // 使用open方法初始化XMLHttpRequest对象，指定提交的方式和使用的服务器URL， // true表示使用异步提交，默认值也是true xmlHttpReq.open("GET", "ajaxDemo", true); // 设置回调函数，当readyState值改变时会激发一个onreadystatechange事件 xmlHttpReq.onreadystatechange = RequestCallBack; // 发送请求 xmlHttpReq.send();
}
//定义回调函数 function RequestCallBack(){ // 相应数据读取完成 readyState 的值为4 if(xmlHttpReq.readyState == 4){ // 相应成功，则HTTP状态值为200 if(xmlHttpReq.status == 200){ //把 xmlHttpReq.responseText 的值赋予 id 为 show 的元素 document.getElementById("show").innerText = xmlHttpReq.responseText; } } } </script> |
XMLHttpRequest 对象有多个属性，下面介绍一下代码中用到的几个。readyState 属性值如下：0 --- 未初始化（已经创建了XMLHttpRequest对象，但是还没有初始化）；1 --- 准备发送状态（此时已经调用了XMLHttpRequest对象的open()方法，并且XMLHttpRequest对象已经准备好将一个请求发送到服务器端）；2 --- 已发送状态：此时，已经通过send()方法把一个请求发送到服务器端，但是还没有收到一个响应；3 --- 正在接受状态：已经接受到HTTP响应头部信息，但是消息体部分还没有完全接受到；4 --- 完成响应状态：此时已经完成了HttpResponse响应的接收。 responseText属性包含客户端接受到的HTTP响应的文本内容；当readyState的属性值为0、1或者2时，responseText包含一个空字符串；当readyState的属性值为3时，响应中包含客户端还没有完成的响应信息；单readyState属性值为4时，responseText才包含完整的响应信息。Status属性，描述了HTTP状态码文本，并且仅当readyState属性值为3或者4时，才能对此属性进行访问，否则会引发一个异常。
在项目开发中，使用js实现Ajax的情况较少，因为jQuery对Ajax操作进行了封装，jQuery的Ajax更方便。 $.ajax()方法属于jQuery最底层方法，第二层是load()、$.get()和$.post()方法，第三层是$.getScript()和$.getJSON()方法。下面对jQuery的$.Ajax()介绍。$.Ajax()的结构为：$.Ajax(option)。方法只有一个参数option，但是它包含了使用该方法所需要的请求设置以及回到函数等信息，并且信息以key/value形式存在，所有的参数都是可选的。常用参数解释如下：url（字符串，发送请求的地址）、type（字符串，请求方式，post或者get，默认为get；其他的请求方法也可以使用，如put、delete，但只有部分浏览器支持）、timeout（数字，请求超时时间，单位毫秒）、data（对象或者字符串，发送到服务器的数据）、datatype（字符串，预期服务器端返回的数据类型。如果不指定，jQuery将自动根据HTTP包MIME信息返回responseXML或responseText，并作为回调函数参数传递。可以使用的类型：xml、html、script、json、text等）、beforeSend（函数，发送请求前可以修改XMLHttpRequest对象的函数，如果函数返回值为false则取消本次Ajax请求。XMLHttpRequest对象是唯一的参数）、complete（函数，请求完成后调用的回调函数，请求成功或者失败都会调用。参数是XMLHttpRequest对象和一个描述成功请求的类型字符串）、success（函数，请求成功后的调用的回调函数，两个参数，(1) data：有服务器返回，并根据dataType参数进行处理后的数据。(2) textStatus，描述状态的字符串）、error（函数，请求失败时被调用的函数，三个参数，XMLHttpRequest对象、错误信息、补货的错误对象（可选））。下面展示一个实例，该例中后台返回json格式数据，前端页面对其展示。
页面标签： <body> <input type="button" onclick="ajaxMethod()" value="ajax提交"/> <div id="showText"> <p id="show">请求数据如下：</p> </div> </body>
Js代码： <script type="text/javascript"> function ajaxMethod(){ $.ajax({ type:"get", // 请求方式 url:"ajaxDemo", // 请求的资源 async: true, cache: false, dataType:"json", // 预期服务器返回数据的类型 // 请求成功回调函数 success:function(data){ //alert(JSON.stringify(data)); // json数组转字符串 var html = ""; $.each(data, function(index, item){ var row = "编号： " + index + "， 姓名：" + item.name + "， 年龄：" + item.age + "，地址：" + item.addr + "<br/>"; html += row; }); // jQuery 的id选择器和append方法 var con = $("#showText").append(html); }, // 请求失败回调函数 error:function(xmlHttpReq, textStatus, errorThrow){ alert("errorThrow:" + errorThrow); }, // 请求完成回调函数（不论请求是否成功都会执行） complete:function (xmlHttpReq, textStatus){ alert(xmlHttpReq.responseText); } }); } </script>
|
蜗牛学院，只为成就更好的你！
你！敢不敢！用你三个月的时间，换你不一样的未来！
赶快关注蜗牛学院官方微信，了解更多信息吧！
