AJAX异步请求函数的封装及示例
来源:互联网 发布:m理论11维空间 知乎 编辑:程序博客网 时间:2024/05/16 12:45
AJAX异步请求函数的封装及示例
++YONG原创,转载请注明
1. 封装函数:
封装的一个异步请求发送的函数和一个回调函数的模板:myAjax.js
//定义XMLHttpRequest对象实例 var http_request = false; /************************************************************************* * 方法说明:可复用的http请求发送函数 * 参数说明: * method:请求方式(GET/POST) * url:目标URL * content:用POST方式发出请求时想传给服务器的数据, * 数据以查询字串的方式列出,如:name=value&anothername=othervalue。 * 若用GET方式:请传null * responseType:响应内容的格式(text/xml) * callback:要回调的函数 *************************************************************************/ function sendRequest(method, url, content, responseType, callback) { http_request = false; //开始初始化XMLHttpRequest对象 if (window.XMLHttpRequest) { //Mozilla 浏览器 http_request = new XMLHttpRequest(); if (http_request.overrideMimeType) {//设置MiME类别 http_request.overrideMimeType("text/xml"); } } else { if (window.ActiveXObject) { // IE浏览器 try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (e) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (e) { } } } } if (!http_request) { // 异常,创建对象实例失败 //"不能创建XMLHttpRequest对象实例" window.alert("/u4e0d/u80fd/u521b/u5efaXMLHttpRequest/u5bf9/u8c61/u5b9e/u4f8b."); returnfalse; } if (responseType.toLowerCase() == "text") { http_request.onreadystatechange = callback; } else { if (responseType.toLowerCase() == "xml") { http_request.onreadystatechange = callback; }else { //"响应类别参数错误" window.alert("/u54cd/u5e94/u7c7b/u522b/u53c2/u6570/u9519/u8bef/u3002"); return false; } } // 确定发送请求的方式和URL以及是否异步执行下段代码 if (method.toLowerCase() == "get") { http_request.open(method, url, true); } else { if (method.toLowerCase() == "post") { http_request.open(method, url, true); http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); } else { //http请求类别参数错误 window.alert("http/u8bf7/u6c42/u7c7b/u522b/u53c2/u6570/u9519/u8bef/u3002"); return false; } } //开始发起浏览请求 http_request.send(content); } /************************************************************************* * * 方法说明:回调函数(处理返回信息的函数)模板 * *************************************************************************/ function processResponse() { // 请求已完成 if (http_request.readyState == 4) { // 信息已经成功返回,开始处理信息 if (http_request.status == 200) { //返回的是文本格式信息 alert(http_request.responseText); //返回的XML格式文档就用alert(http_request.responseXML); } else { //页面不正常 //"您所请求的页面有异常" alert("/u60a8/u6240/u8bf7/u6c42/u7684/u9875/u9762/u6709/u5f02/u5e38/u3002"); } } } |
注释写得很清楚了,不作过多解释,注意理解sendRequest方法。
2. 示例:
2.1. 创建一页面:index.jsp
主要解决调用以上封装的函数
<%@ page language="java" pageEncoding="utf-8"%> <html> <head> <title>first AJAX demo</title> <script language="JavaScript" src="js/myAjax.js"></script> </head> <body> 请输入用户名: <input type="text" name="userName" onblur="myRequest()" /> <label id="msg" style="color: red" /> </body> <script type="text/javascript"> //请求函数 function myRequest(){ var name; if (document.getElementById("userName") != undefined) { name = document.getElementById("userName").value; } //URL未尾要加个随机数,以免请求不能再次提交 var url = "ajaxRequest.do?time=" + Math.random(); //要提交到服务器的数据 var content = "userName=" + name; //调用异常请求提交的函数 sendRequest("POST",url,content,"TEXT",processResponse); } //回调函数 function processResponse(){ // 请求已完成 if (http_request.readyState == 4) { // 信息已经成功返回,开始处理信息 if (http_request.status == 200) { var msg = document.getElementById("msg"); if(msg != undefined){ //返回的是文本格式信息 msg.innerText = http_request.responseText; } } else { //页面不正常 //"您所请求的页面有异常" alert("/u60a8/u6240/u8bf7/u6c42/u7684/u9875/u9762/u6709/u5f02/u5e38/u3002"); } } } </script> </html> |
如上页面中,当文本框失去焦点时,就会调用myRequest()函数,在这个函数中调用异常请求函数来发送数据到相应的Servlet中。
2.2. AJAXSevlet.java:
package org.qiujy.web.controller; import java.io.IOException; import javax.servlet.ServletException; import javax.servlet.http.HttpServlet; import javax.servlet.http.HttpServletRequest; import javax.servlet.http.HttpServletResponse; /** *处理异常请求 *@authorqiujy *@version1.0 */ publicclass AJAXServlet extends HttpServlet { publicvoid doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { this.doPost(request, response); } publicvoid doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException { System.out.println("AJAX请求已经到达Sevlet。。。。"); // 解决AJAX的中文问题 request.setCharacterEncoding("UTF-8"); response.setCharacterEncoding("UTF-8"); String name = request.getParameter("userName"); System.out.println("userName===" + name); if(name.matches("//w{6,20}")){ response.getWriter().write("用户名:" + name + " 合法!"); }else{ response.getWriter().write("用户名:" + name + " 不合法!"); } } } |
2.3. 运行结果:
鼠标离开文本框时:
2.4. 本例源代码:
3. AJAX中文问题:
利用AJAX来处理异常请求时,常出现中文乱码问题,我的解决方案是:把整个应用程序的编码都设置成UTF-8,就决对不会出现乱码问题了。同时在提交请求数据时为了避免URL传中文参数的问题,改用POST请求方式。
- AJAX异步请求函数的封装及示例
- AJAX异步请求函数的封装及示例
- AJAX异步请求函数的封装及示例
- AJAX异步请求封装
- ajax异步请求示例
- ajax的工作原理以及异步请求的封装
- ajax的工作原理以及异步请求的封装
- Ajax的异步请求
- jquery ajax 请求函数封装
- Jquery $.ajax异步请求webmethod方法示例
- Jquery ajax异步请求带来的问题及解决方案
- ajax 异步封装-函数 javascript原生
- javascript的ajax异步请求
- ajax异步请求的坑
- 封装兼容的Ajax请求
- AJAX异步请求,底层使用hibernate查询后的数据json封装之前的处理
- AJAX函数的封装
- 封装的ajax函数
- Information Visualization, Second Edition: Perception for Design
- Hibernate下数据批量处理解决方案
- 6.2 SIP 会话
- 从一文本内删除 另一文本内含有的内容
- Advanced .NET Programming
- AJAX异步请求函数的封装及示例
- FO3 辐射3审校心得——初翻太过分了,真该抓去喂乌龟(翻译)
- The Information Security Dictionary: Defining the Terms that Define Security for E-Business, Interne
- SSH实现上传下载
- Web Mining: : Applications and Techniques
- 数据库的数据类型
- Innocent Code: A Security Wake-Up Call for Web Programmers
- 复选框的全选全不选反选
- Mastering Oracle SQL, 2nd Edition [ILLUSTRATED]