原生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部分代码:
/* 整个过程是:创建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) ; } } }
JSP代码[全部,可以不用添加别的代码了.]:
<%@ 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("用户名没有被注册!");
}
%>