AJAX异步请求函数的封装及示例
2007-10-17 12:27
603 查看
AJAX异步请求函数的封装及示例
++YONG原创,转载请注明
1. 封装函数:
封装的一个异步请求发送的函数和一个回调函数的模板:myAjax.js
注释写得很清楚了,不作过多解释,注意理解sendRequest方法。
2. 示例:
2.1. 创建一页面:index.jsp
主要解决调用以上封装的函数
如上页面中,当文本框失去焦点时,就会调用myRequest()函数,在这个函数中调用异常请求函数来发送数据到相应的Servlet中。
2.2. AJAXSevlet.java:
2.3. 运行结果:
鼠标离开文本框时:
2.4. 本例源代码:
3. AJAX中文问题:
利用AJAX来处理异常请求时,常出现中文乱码问题,我的解决方案是:把整个应用程序的编码都设置成UTF-8,就决对不会出现乱码问题了。同时在提交请求数据时为了避免URL传中文参数的问题,改用POST请求方式。
++YONG原创,转载请注明
1. 封装函数:
封装的一个异步请求发送的函数和一个回调函数的模板:myAjax.js
[align=left]//定义XMLHttpRequest对象实例[/align] [align=left]var http_request = false;[/align] [align=left]/*************************************************************************[/align] [align=left]* 方法说明:可复用的http请求发送函数[/align] [align=left]* 参数说明:[/align] [align=left]* method:请求方式(GET/POST)[/align] [align=left]* url:目标URL[/align] [align=left]* content:用POST方式发出请求时想传给服务器的数据,[/align] [align=left]* 数据以查询字串的方式列出,如:name=value&anothername=othervalue。[/align] [align=left]* 若用GET方式:请传null[/align] [align=left]* responseType:响应内容的格式(text/xml)[/align] [align=left]* callback:要回调的函数[/align] [align=left]*************************************************************************/[/align] [align=left]function sendRequest(method, url, content, responseType, callback) {[/align] [align=left] http_request = false;[/align] [align=left] //开始初始化XMLHttpRequest对象[/align] [align=left] if (window.XMLHttpRequest) { //Mozilla 浏览器[/align] [align=left] http_request = new XMLHttpRequest();[/align] [align=left] if (http_request.overrideMimeType) {//设置MiME类别[/align] [align=left] http_request.overrideMimeType("text/xml");[/align] [align=left] }[/align] [align=left] } else {[/align] [align=left] if (window.ActiveXObject) { // IE浏览器[/align] [align=left] try {[/align] [align=left] http_request = new ActiveXObject("Msxml2.XMLHTTP");[/align] [align=left] }[/align] [align=left] catch (e) {[/align] [align=left] try {[/align] [align=left] http_request = new ActiveXObject("Microsoft.XMLHTTP");[/align] [align=left] }[/align] [align=left] catch (e) {[/align] [align=left] }[/align] [align=left] }[/align] [align=left] }[/align] [align=left] }[/align] [align=left] if (!http_request) { // 异常,创建对象实例失败[/align] [align=left] //"不能创建XMLHttpRequest对象实例"[/align] [align=left] window.alert("/u4e0d/u80fd/u521b/u5efaXMLHttpRequest/u5bf9/u8c61/u5b9e/u4f8b.");[/align] [align=left] returnfalse;[/align] [align=left] }[/align] [align=left] if (responseType.toLowerCase() == "text") {[/align] [align=left] http_request.onreadystatechange = callback;[/align] [align=left] } else {[/align] [align=left] if (responseType.toLowerCase() == "xml") {[/align] [align=left] http_request.onreadystatechange = callback;[/align] [align=left] }else {[/align] [align=left] //"响应类别参数错误"[/align] [align=left]window.alert("/u54cd/u5e94/u7c7b/u522b/u53c2/u6570/u9519/u8bef/u3002");[/align] [align=left] return false;[/align] [align=left] }[/align] [align=left] }[/align] [align=left] [/align] [align=left] // 确定发送请求的方式和URL以及是否异步执行下段代码[/align] [align=left] if (method.toLowerCase() == "get") {[/align] [align=left] http_request.open(method, url, true);[/align] [align=left] } else {[/align] [align=left] if (method.toLowerCase() == "post") {[/align] [align=left] http_request.open(method, url, true);[/align] [align=left] http_request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");[/align] [align=left] } else {[/align] [align=left] //http请求类别参数错误[/align] [align=left]window.alert("http/u8bf7/u6c42/u7c7b/u522b/u53c2/u6570/u9519/u8bef/u3002");[/align] [align=left] return false;[/align] [align=left] }[/align] [align=left] }[/align] [align=left] [/align] [align=left] //开始发起浏览请求[/align] [align=left] http_request.send(content);[/align] [align=left]}[/align] [align=left]/*************************************************************************[/align] [align=left]*[/align] [align=left]* 方法说明:回调函数(处理返回信息的函数)模板[/align] [align=left]*[/align] [align=left]*************************************************************************/[/align] [align=left]function processResponse() {[/align] [align=left] // 请求已完成[/align] [align=left] if (http_request.readyState == 4) {[/align] [align=left] // 信息已经成功返回,开始处理信息[/align] [align=left] if (http_request.status == 200) { [/align] [align=left] //返回的是文本格式信息[/align] [align=left] alert(http_request.responseText);[/align] [align=left] //返回的XML格式文档就用alert(http_request.responseXML);[/align] [align=left] } else { //页面不正常[/align] [align=left] //"您所请求的页面有异常"[/align] [align=left]alert("/u60a8/u6240/u8bf7/u6c42/u7684/u9875/u9762/u6709/u5f02/u5e38/u3002");[/align] [align=left] }[/align] [align=left] }[/align] [align=left]}[/align] |
2. 示例:
2.1. 创建一页面:index.jsp
主要解决调用以上封装的函数
[align=left]<%@ page language="java" pageEncoding="utf-8"%>[/align] [align=left] [/align] [align=left]<html>[/align] [align=left] <head>[/align] [align=left] <title>first AJAX demo</title>[/align] [align=left] <script language="JavaScript" src="js/myAjax.js"></script>[/align] [align=left] </head>[/align] [align=left] [/align] [align=left] <body>[/align] [align=left] 请输入用户名:[/align] [align=left] <input type="text" name="userName" onblur="myRequest()" />[/align] [align=left] <label id="msg" style="color: red" />[/align] [align=left] </body>[/align] [align=left] <script type="text/javascript">[/align] [align=left] //请求函数[/align] [align=left] function myRequest(){[/align] [align=left] var name;[/align] [align=left] if (document.getElementById("userName") != undefined) {[/align] [align=left] name = document.getElementById("userName").value;[/align] [align=left] }[/align] [align=left] //URL未尾要加个随机数,以免请求不能再次提交[/align] [align=left] var url = "ajaxRequest.do?time=" + Math.random();[/align] [align=left] //要提交到服务器的数据[/align] [align=left] var content = "userName=" + name;[/align] [align=left] //调用异常请求提交的函数[/align] [align=left] sendRequest("POST",url,content,"TEXT",processResponse);[/align] [align=left] }[/align] [align=left] [/align] [align=left] //回调函数[/align] [align=left] function processResponse(){[/align] [align=left] // 请求已完成[/align] [align=left] if (http_request.readyState == 4) {[/align] [align=left] // 信息已经成功返回,开始处理信息[/align] [align=left] if (http_request.status == 200) { [/align] [align=left] [/align] [align=left] var msg = document.getElementById("msg");[/align] [align=left] if(msg != undefined){[/align] [align=left] //返回的是文本格式信息[/align] [align=left] msg.innerText = http_request.responseText;[/align] [align=left] }[/align] [align=left] } else { //页面不正常[/align] [align=left] //"您所请求的页面有异常"[/align] [align=left] alert("/u60a8/u6240/u8bf7/u6c42/u7684/u9875/u9762/u6709/u5f02/u5e38/u3002");[/align] [align=left] }[/align] [align=left] }[/align] [align=left] }[/align] [align=left] </script>[/align] </html> |
2.2. AJAXSevlet.java:
[align=left]package org.qiujy.web.controller;[/align] [align=left] [/align] [align=left]import java.io.IOException;[/align] [align=left] [/align] [align=left]import javax.servlet.ServletException;[/align] [align=left]import javax.servlet.http.HttpServlet;[/align] [align=left]import javax.servlet.http.HttpServletRequest;[/align] [align=left]import javax.servlet.http.HttpServletResponse;[/align] [align=left] [/align] [align=left] [/align] [align=left]/**[/align] [align=left] *处理异常请求[/align] [align=left] *@authorqiujy[/align] [align=left] *@version1.0[/align] [align=left] */[/align] [align=left]publicclass AJAXServlet extends HttpServlet {[/align] [align=left] [/align] [align=left] publicvoid doGet(HttpServletRequest request, HttpServletResponse response)[/align] [align=left] throws ServletException, IOException {[/align] [align=left] [/align] [align=left] this.doPost(request, response);[/align] [align=left] }[/align] [align=left] [/align] [align=left] publicvoid doPost(HttpServletRequest request, HttpServletResponse response)[/align] [align=left] throws ServletException, IOException {[/align] [align=left] System.out.println("AJAX请求已经到达Sevlet。。。。");[/align] [align=left] // 解决AJAX的中文问题[/align] [align=left] request.setCharacterEncoding("UTF-8");[/align] [align=left] response.setCharacterEncoding("UTF-8");[/align] [align=left] [/align] [align=left] String name = request.getParameter("userName");[/align] [align=left] [/align] [align=left] System.out.println("userName===" + name);[/align] [align=left] if(name.matches("//w{6,20}")){[/align] [align=left] response.getWriter().write("用户名:" + name + " 合法!");[/align] [align=left] }else{[/align] [align=left] response.getWriter().write("用户名:" + name + " 不合法!");[/align] [align=left] }[/align] [align=left] }[/align] [align=left] [/align] [align=left]}[/align] |
鼠标离开文本框时:
2.4. 本例源代码:
3. AJAX中文问题:
利用AJAX来处理异常请求时,常出现中文乱码问题,我的解决方案是:把整个应用程序的编码都设置成UTF-8,就决对不会出现乱码问题了。同时在提交请求数据时为了避免URL传中文参数的问题,改用POST请求方式。
相关文章推荐
- AJAX异步请求函数的封装及示例
- ASP.Net:异步请求分页示例:Handler.ashx + $.ajax() + Json + 分页处理
- 原生javascript实现的ajax异步封装功能示例
- ajax 异步封装-函数 javascript原生
- 纯js封装的ajax功能函数与用法示例
- ajax的工作原理以及异步请求的封装
- ajax请求为异步操作时,返回的数据不会被并列函数执行
- 使用bootstrap-paginator.js 分页来进行ajax 异步分页请求示例
- AJAX异步请求封装
- AJAX的来龙去脉(由来)-如何被封装出来的--ajax发送异步请求(四步操作)
- ajax的工作原理以及异步请求的封装介绍
- jquery请求servlet实现ajax异步请求的示例
- 封装Ajax请求,callback函数参数分析
- AJAX异步请求,底层使用hibernate查询后的数据json封装之前的处理
- ajax的工作原理以及异步请求的封装介绍
- 原生javascript封装类似jquery的ajax请求跨域函数
- js 框中字符数提示 ajax异步请求函数可能出错点
- ajax的工作原理以及异步请求的封装
- ajax的工作原理以及异步请求的封装介绍
- 【JavaScript】AJAX之异步同步请求、FormData类型、事件监听接口