原生JavaScript的Ajax

原生JS的Ajax

[本程序可作为学习之用.使用:JSP进行调试.]

昨天看了看原生JS的Ajax,觉得还行，没有想象中难度那么大。其中最大的问题，依然是兼容性。比如在原生JS中，创建各种对象就需要考虑到N多浏览器的实现。而此时，Ajax同样如此,下面的代码貌似在Chrome里面无法运行，原因未知,而且对于中文的处理也并非完美.

所以,大家尽量使用各种JavaScript第三方库来处理Ajax吧，比如使用jQuery.

ajax原理图
image-1918

处理中文

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的编码格式.

源代码

Fedora18安装tomcat

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("用户名没有被注册!");
    }
    %>

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

CAPTCHA

*

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据。