原生JS的Ajax
[本程序可作为学习之用.使用:JSP进行调试.]
昨天看了看原生JS的Ajax,觉得还行,没有想象中难度那么大。其中最大的问题,依然是兼容性。比如在原生JS中,创建各种对象就需要考虑到N多浏览器的实现。而此时,Ajax同样如此,下面的代码貌似在Chrome里面无法运行,原因未知,而且对于中文的处理也并非完美.
所以,大家尽量使用各种JavaScript第三方库来处理Ajax吧,比如使用jQuery.
处理中文
1.发送路径的参数中包括中文,在服务器端接收参数值时产生乱码
将数据提交到服务器有两种方法:一种是使用GET方法;一种是使用POST方法.使用不同的方法提交数据,在服务器端接收参数时解决中文乱码的方法是不同的,具体如下:
1.1 当接收使用GET方法提交的数据时,要将编码转换为GBK或GB2312,例如:
String selProvince = request.getParameter(“parProvince”);
selProvince = new String (selProvince.getBytes(“ISO-8859-1”),”GBK”);
1.2由于应用POST方法提交数据时,默认的字符编码是UTF8,所以当接收使用POST方法提交的数据时,要将编码转换为UTF-8.例如,代码如下:
String username= request.getParameter(“user”);
username = new String(username.getBytes(“ISO-8859-1”),”UTF-8”);
2.返回到responseText或responseXML的值中包含中文时产生乱码
由于Ajax在接受responseText或responseXML的值时是按照UTF-8的编码格式进行解码的,所以如果服务器端传递的数据不是UTF-8格式,在接收responseText或responseXML的值时就可能产生乱码.解决的方法是保证从服务器端传递的数据采用UTF-8的编码格式.
源代码
HTML部分代码:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 | <!doctype html> <html> <head> <meta charset="utf-8"> <title>注册信息</title> </head> <body> <form action="RegisterTool.jsp" method="post" name="form1"> <table> <tr> <td>用户名:</td> <td><input type="text" name="user" onBlur="createRequest(form1.user.value)" /></td> </tr> <tr> <td>密码:</td> <td><input type="password" name="pwd" /></td> </tr> <tr> <td>确认密码:</td> <td><input type="password" name="pwd1" /></td> </tr> <tr> <td>Email:</td> <td><input type="email" name="email" /></td> </tr> <tr> <td colspan="2"><input type="submit" value="提交" disabled /></td> </tr> </table> </form> </body> <script type="text/javascript"> /* 整个过程是:创建XMLHttpRequest 对象 -> 指定发送地址及发送方法 -> 发送请求 -> 指定处理方法并处理返回结果。但是需要注意,我们正常的思路理解是这样的,可是onreadystatechange事件句柄指定处理方法需要在发送之前就指定好,否则无法处理状态变化事件。 HttpRequest主要方法: ·open():建立到服务器的新请求。 ·send():向服务器发送请求。 ·abort():退出当前请求。 ·readyState:提供当前 HTML 的就绪状态。 ·responseText:服务器返回的请求响应文本。 主要属性: 属性: readyState 说明:HTTP 请求的状态。 responseText 说明:目前为止为服务器接收到的响应体(不包括头部),或者如果还没有接收到数据的话,就是空字符串。 responseXML 说明:对请求的响应,解析为 XML 并作为 Document 对象返回。 status 说明:由服务器返回的 HTTP 状态代码。 statusText 说明:这个属性用名称而不是数字指定了请求的 HTTP 的状态代码。 onreadystatechange 是每次 readyState 属性改变的时候调用的事件句柄函数。 */ //创建对象. function createRequest(user) { http_request = false; try { http_request = new XMLHttpRequest(); } catch (trymicrosoft) { try { http_request = new ActiveXObject("Msxml2.XMLHTTP"); } catch (othermicrosoft) { try { http_request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { http_request = false; } } } if (!http_request){ alert("Error initializing XMLHttpRequest!"); }else{ http_request.open("GET","http://localhost::8080/register.jsp?user="+user,true); http_request.onreadystatechange=getResult; http_request.send(); } } //处理返回的结果. function getResult (){ /* 打开请求 有了要连接的 URL 后就可以配置请求了。可以用 XMLHttpRequest 对象的 open() 方法来完成。该方法有五个参数: ·request-type:发送请求的类型。典型的值是 GET 或 POST,但也可以发送 HEAD 请求。 ·url:要连接的 URL。 ·asynch:如果希望使用异步连接则为 true,否则为 false。该参数是可选的,默认为 true。 ·username:如果需要身份验证,则可以在此指定用户名。该可选参数没有默认值。 ·password:如果需要身份验证,则可以在此指定口令。该可选参数没有默认值。 通常使用其中的前三个参数。事实上,即使需要异步连接,也应该指定第三个参数为 “true”。这是默认值,但坚持明确指定请求是异步的还是同步的更容易理解。 */ if (http_request.readyState==4){ //加載完成. if (http_request.status==200){ //如果執行成功. alert(http_request.responseText) ; }else{ alert(http_request.responseText) ; } } } </script> </html> |
JSP代码[全部,可以不用添加别的代码了.]:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 | <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" import="java.util.*" %> <% int result = 0 ; request.setCharacterEncoding("UTF8"); String user = request.getParameter("user"); user = new String(user.getBytes("ISO-8859-1"),"GB2312"); String [] USERNAME = {"明日科技","mr","admin","sa"}; Arrays.sort(USERNAME); result= Arrays.binarySearch(USERNAME, user); if(result > -1){ out.println("用户名已经被注册!"); }else{ out.println("用户名没有被注册!"); } %> |