jQuery中的Ajax

关于

jQuery对Ajax操作进行了封装,在jQuery中$.ajax()方法属于最底层的方法,第二层是$.load(),$.get(),和$.post()方法,第三层是$.getScript()和$.getJSON()方法。首先介绍第二层的方法,因为其使用频率很高.

load()方法

  1.载入HTML文档
  

 load()方法是jQuery中最为简单和常用的Ajax方法,能载入远程HTML代码并插入DOM中。它的结构为:

1
2
 
 load(url [,data] [,callback])

load()方法参数解释如下

load()方法参数解释
参数名称类型说明
urlString请求HTML页面的URL地址
data(可选)Object发送至服务器的key/value数据
callback(可选)Function请求完成时的回调函数

2.筛选载入的HTML文档

  load()方法的URL参数的语法结构为:”url selector”.注意,URL和选择器之间有一个空格.
例如,只需要加载test.html页面中class为para的内容,可以使用下面的代码来完成:

  

1
    $("resText").load("test.html  .para");

3.传递方式

  load()方法的传递方式根据参数data来自动指定,如果没有传递参数,则采用GET方式传递;反之,则会自动转换为POST方式。

//无参数传递,则是GET方式.

$(“#resText”).load(“test.php”,function(){
//…
});

//有参数传递,则是POST方式

$(“#resText”).load(“test.php”,{name:”rain”,age:”22″},function(){
//…
});

4.回调参数
 

 对于必须在加载完成后才能将继续的操作,load()方法提供了回调函数(callback),该函数有3个参数,分别代表请求返回的内容,请求状态和XMLHttpRequest对象,jQuery代码如下:

1
2
3
4
5
$("#resText").load("test.html",function(responseText,textStatus,XMLHttpRequest){
    //responseText: 请求返回的内容
    //textStatus:请求状态:success,error,notmodified,timeout
    //XMLHttpRequest:XMLHttpRequest对象
});

注意:在load()方法中,无论Ajax请求是否成功,只要当请求完成(complete)后,回调函数(callback)就被触发.对应下面将介绍的$.ajax()方法中的complete回调函数

$.get()方法和$.post()方法

load()方法通常用来从WEB服务器上获取静态的数据文件,然而这并不能体现Ajax的全部价值.在项目中,如果需要传递一些参数给服务器中的页面,那么可以使用$.get()或者$.post()方法(或者是后面要讲解的$.ajax()方法).

注意:$.get()和$.post()方法是jQuery中的全局函数,而在此之前讲的jQuery方法都是对jQuery对象进行操作的. 1.$.get()方法

$.get()方法使用GET方式来进行异步请求。
它的结构为:

1
  $.get(url [,data] [, callback] [,type])

示例

1
$("#feeds").load("feeds.html");//加载feeds.html的内容

$.get()方法参数解释如下:

$.get()方法参数解释
参数名称类型说明
urlString请求的HTML页的URL地址
data(可选)Object发送至服务器的key/value数据会作为QueryString附加到请求的URL中
callback(可选)Function载入成功时回调函数(只有当Response的返回状态是success才调用该方法)自动将请求结果和状态传递给该方法
type(可选)String服务器端返回内容的格式,包括xml,html,script,json,text和_default

示例

1
2
3
$.get("test.php", function(data){
  alert("Data Loaded: " + data);
});

jQuery LOGO
image-1931

2.$.post()方法

它与$.get()方法的结构和使用方式相同,不过它们之间仍然有以下区别:

  • GET请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给WEB服务器。当然, 在Ajax请求中,这种区别对用户是不可见的。
  • GET方式对传输的数据有大小限制(通常不能大于2KB),而使用POST方式传递的数据量要比GET方式大得多(理论上不受限制)。
  • GET方式请求的数据会被浏览器缓存起来,因此其他人就可以从浏览器的历史记录中读取到这些数据,例如账号和密码等。在某种情况下,GET方式会带来严重的安全性问题,而POST方式相对来说就可以避免这些问题。
  • GET方式和POST方式传递的数据在服务器端的获取也不相同,在PHP中,GET方式的数据可以用$_GET[]获取,而POST方式可以用$_POST[]获取。两种方式都可以用$_REQUEST[]来获取.

由于POST和GET方式提交的所有数据都可以通过$_REQUEST[]来获取,因此只需要改变jQuery函数就可以将程序在GET请求和POST请求之间切换。代码如下:

1
2
3
4
5
6
7
8
9
10
  $(function(){
    $("#send").click(function(){
        $.post("post1.php",{
            username : $("#username").val(),
            content : $("#content").val()
        },function (data,textStatus){
            $("#resText").appent(data); //将返回的数据添加到页面上
        });
    });
  })

另外,当load()方法带有参数传递时,会使用POST方式发送请求。因此也可以使用load()方法来完成同样的功能.代码如下:

1
2
3
4
5
6
7
8
  $(function(){
    $("#send").click(function(){
        $("#resText").load("post1.php",{
            username : $("#username").val(),
            content : $("#content").val()
        })
    })
  })

上面使用load(),$.get()和$.post()方法完成了一些常规的Ajax程序,如果还需要编写一些复杂的Ajax程序,那么就要用到jQuery中的$.ajax方法.$.ajax()方法不仅能实现与load(),$.get()和$.post()方法同样的功能,而且还可以设定beforeSend(提交前回调函数),error(请求失败后处理),success(请求成功后处理)以及complete(请求完成后处理)回调函数,通过这些回调函数,可以给用户更多的Ajax提示信息.另外,还有一些参数,可以设置的超时时间或者页面的“最后更改”状态等等。

$.getScript()方法和$.getJson()方法

1.$.getScript()

有时候,在页面初次加载时就取得所需的全部JavaScript文件是完全没有必要的。虽然可以在需要哪个JavaScript文件时,动态地创建<scrip>标签,jQuery代码如下:

1
2
3
  $(document.createElement(“script”)).attr(“src”,”test.js”).appendTo(“head”);
  //或者
  $(“&lt;script type=’text/javascript’ src=’test.js’ /&gt;”).appendTo(“head”);

  但这种方式并不理想。为此,jQuery提供了$.getScript()方法来直接加载.js文件,与加载一个HTML片段一样简单方便,并且不需要对JavaScript文件进行处理,JavaScript文件会自动执行.jQuery代码如下:

1
2
3
4
5
  $(function(){
  $(‘#send’).click(function(){
  $.getScript(‘test.js’);
  });
  })

与其他Ajax方法一样,$.getScript()方法也有回调函数,它会在JavaScript文件成功载入后运行。例如想载入jQuery官方颜色动画插件(jquery.color.js).成功后给元素绑定颜色变化动画,就可以用到$.getScript()方法的回调函数.代码如下:

1
2
3
4
5
6
7
8
9
  $(function(){
        $.getScript
        ('http://dev.jquery.com/view/trunk/plugins/color/jquery.color.js',function(){
            $("#go").click(function() {
                  $(".block").animate({backgroundColor:'pink'},1000)
                            .animate({backgroundColor:'blue'},1000);
        })
        })
    })

当jquery.color.js动画插件加载完毕后,单击id为”go”的按钮时,class为block的元素就有了颜色变化.

2.$.getJSON()

$.getJSON()方法用于加载JSON文件,与$.getScript()方法的用法相同.jQuery代码如下:

1
2
3
4
5
  $(function(){
        $("#send").click(function() {
              $.getJSON('test.json');
          });  
    })

当单击”加载”按钮后,网页上卡不到任何效果,虽然函数加载了JSON文件,但是并没有告诉JavaScript对返回的数据如何处理。为此,jQuery提供了回调函数,在回调函数里处理返回的数据。代码如下:

1
2
3
4
5
6
7
  $(function(){
        $("#send").click(function() {
              $.getJSON('test.json',function(data){
                //data:返回的数据
            });
          });  
    })

可以在函数中通过data变量来遍历相应的数据。$.each()函数不同于jQuery对象的each()方法,它是一个全局函数,不操作jQuery对象,而是以一个数组或者对象作为第一个参数,以一个回调函数作为第二个参数。回调函数拥有两个参数,第一个为对象的成员或数组的索引,第二个为对应的变量或内容.代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  $(function(){
        $("#send").click(function() {
              $.getJSON('test.json',function(data){
                $('#resText').empty();
                var html = '' ;
                $.each(data,function(commentIndex,comment){
                    html += '<div class="comment"><h6>'
                    + comment['username']+':</h6><p class="para">'
                    + comment['content'] + '</p></div>' ;
                });
                $('#resText').html(html);
            });
          });  
    })

  在上面的代码中,当返回数据成功后,首先清空id为”resText”的元素的内容,以便重新构造新的HTML,然后通过$.each()循环函数依次遍历每个项,并将遍历出来的内容构建成HTML代码拼接起来,最后将构建好的HTML添加到id为”resText”的元素中.
不仅如此,还能通过使用JSONP姓氏的回调函数来加载其他网站的JSON数据,例如从图片网站(Flickr)搜索汽车类别的4张最新图片.代码如下:

1
2
3
4
5
6
7
8
9
10
11
12
  $(function(){
        $("#send").click(function() {
              $.getJSON('http://api.flickr.com/services/feeds/photos_public.gne?tags=car&tagmode=any&format=json&jsoncallback=?',function(data){
                $.each(data.items,function(i,item){
                    $("&lt;img class='para'/&gt;").attr("src",item.media.m).appendTo("#resText");
                    if (i==3){
                        return false;  
                    }
                });
            });
          });  
    })

在$.each()函数中,如果需要退出each循环,只要返回false即可.

注意:

  • jQuery将自动把URL里的回调函数,例如”url?callback=?”中的后一个”?”替换为正确的函数名,以便执行互调函数.
  •   JSONP(JSON with Padding)是一个非官方的协议,它允许在服务器端集成Scripttags返回至客户端,通过JavaScript Callback的姓氏实现跨域访问。由于JSON只是一种含有简单括号结构的纯文本,因此许多通道都可以交换JSON消息,而由于同源策略的限制,开发人员不能在与外部服务器进行通信的时候使用XMLHttpRequest.而JSONP是一种可以绕过同源策略的方法,即通过使用JSON与<scrip>>标记相结合的方法,从服务器端直接返回可执行的JavaScript函数调用或者JavaScript对象。目前JSONP已经成为各大公司的Web应用程序跨域首选,例如Youtube GData,Goole Social Graph,Digg,豆瓣等.

$.ajax()方法

$.ajax()方法是jQuery最底层的Ajax实现.它的结构为:

1
$.ajax(options)

该方法只有1个参数,但在这个对象里包含了$.ajax()方法所需要的请求设置以及回调函数等信息,参数以key/value的形式存在,所有参数都是可选的,常用参数如下:

$.ajax()方法常用参数解释
参数名称类型说明
urlString(默认为当前页地址)发送请求的地址
typeString请求方式(POST或GET)默认为GET。注意其他HTTP请求方法,例如PUT和DELETE也可以使用,但仅部分浏览器支持
timeoutNumber设置请求超时时间(毫秒).此设置将覆盖$.ajaxSetup()方法的全局设置
dataObject或String发送到服务器的数据。如果已经不是字符串,将自动转换为字符串格式。GET请求中将附加在URL后。防止这种自动转换,可以查看processData选项。对象必须为key/value格式,例如:{foo1 : “bar1”, foo2: “bar2”}转换为&foo1=bar1&foo2=bar2.如果是数组,jQuery将自动为不同值对应同一个名称.例如:{foo:[“bar1″,”bar2”]}转换为&foo=bar1&foo=bar2
dataTypeString预期服务器返回的数据类型。如果不指定,jQuery将自动根据HTTP包MIME信息返回responseXML或responseText,并作为回调函数参数传递.
可用的类型如下:
xml:返回XML文档,可用jQuery处理.
html:返回纯文本HTML信息,包含的script标签会在插入DOM时执行.
script:返回纯文本JavaScript代码.不会自动缓存结果.除非设置了cache参数.注意在远程请求时(不在同一个域下),所有POST请求都将转为GET请求.
json:返回JSON数据.
jsonp:JSONP格式。使用SONP形式调用函数时,例如:myurl?callback=?,jQuery将自动替换后一个”?”为正确的函数名,以执行回调函数.
text:返回纯文本字符串
beforeSendFunction 发送请求前可以修改XMLHttpRequest对象的函数,例如添加自定义HTTP头。在beforeSend中如果返回false可以取消本次Ajax请求.XMLHttpRequest对象是唯一的参数.

1
2
3
function(XMLHttpRequest){
    this;//调用本次Ajax请求时传递的options参数
}
completeFunction请求完成后调用的回调函数(请求成功或失败时均调用).参数:XMLHttpRequest对象和一个描述成功请求类型的字符串.

1
2
3
function(XMLHttpRequest,textStatus){
    this;//调用本次Ajax请求时传递的options参数
}
successFunction请求成功后调用的回调函数,有两个参数.

  1. 由服务器返回,并根据dataType参数进行处理后的数据.
  2. 描述状态的字符串
1
2
3
4
function(data,textStatus){
    //data可能是xmlDoc,jsonObj,html,text等等
    this;//调用本次Ajax请求时传递的options参数
}
errorFunction请求失败时被调用的函数.该函数有3个参数,即XMLHttpRequest对象,错误信息,捕获的错误对象(可选).Ajax事件函数如下.

1
2
3
4
function(XMLHttpRequest,textStatus,errorThrown){
    //通常情况下textStatus和errorThown只有其中一个包含信息
    this;//调用本次Ajax请求时传递的options参数
}
globalBoolean默认为true.表示是否触发全局Ajax事件.设置为false将不会触发全局Ajax事件,AjaxStart或AjaxStop可用于控制各种Ajax事件.

如果需要使用$.ajax()方法来进行ajax开发,那么上面这些常用的参数都必须了解。此外,$.ajax方法还有其他参数.前面用到的$.load(),$.get(),$.post(),$.getScript()和$.getJSON()这些方法,都是基于$.ajax()方法构建的,$.ajax()方法是jQuery最底层的Ajax实现,因此可以用它来代替前面的所有方法.
例如,可以使用下面的jQuery代码代替$.getScript()方法:

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
  $(function(){
        $("#send").click(function() {
              $.ajax({
                type:"GET",
                url:"test.js",
                dataType:"script"
            });
          });  
    })
  //再例如,可以使用以下jQuery代码来代替$.getJSON()方法:
  $(function(){
        $("#send").click(function() {
              $.ajax({
                type:"GET",
                url:"test.json",
                dataType:"json",
                success: function(data){
                    $("#resText").empty();
                    var html = "";
                    $.each(data,function(commentIndex,comment){
                        html += '<div class="comment"><h6>'
                                + comment['username']+':</h6><p class="para">'
                                + comment['content'] + '</p></div>';
                       
                    });
                    $('#resText').html(html);
                }
            });
          });  
    })
  

序列化元素

1.serialize()方法

做项目的过程中,表单是必不可少的,经常用来提供数据,例如注册,登陆等。常规的方法是使表单提交到另一个页面,整个浏览器都会被刷新,而使用Ajax技术则能够异步的提交表单,并将服务器返回的数据显示在当前页面中.
前面在讲解$.get()和$.post()方法的时候,表单的HTML代码如下;

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
  &lt;form id="form1" action="#"&gt;
    评论:
      姓名:&lt;input type="text" name="username" id="username" /&gt;
      内容:&lt;textarea name="content" id="content" rows="2" cols="20"&gt;&lt;/textarea&gt;
      &lt;input type="button" id="send" value="提交"/&gt;
  &lt;/form&gt;
  为了获取姓名和内容,必须将字段的值逐个添加到data参数中。代码如下:
  $(function(){
        $("#send").click(function() {
              $.get("get1.php",{
                username : $("#username").val(),
                content :   $("#content").val()
            },function(data , textStatus){
                $("#resText").html(data);
            });
          });  
    })

  这种方式在只有少量字段的表单中,勉强还可以使用,但如果表单元素越来越复杂,使用这种方式在增大工作量的同时也使表单缺乏弹性。jQuery为这一常用的操作提供了一个简化的方法————serialize()。与jQuery中其他方法一样,serialize()方法也是作用于一个jQuery对象,它能够将DOM元素内容序列化为字符串,用于Ajax请求。通过使用serialize()方法可以把刚才的jQuery代码改为如下:

1
2
3
4
5
6
7
  $(function(){
        $("#send").click(function() {
              $.get("get1.php",$("#form1").serialize(),function(data , textStatus){
                $("#resText").html(data);
            });
          });  
    })

当单击”提交”按钮后,也能达到同样的效果.
即使在表单中再增加字段,脚本仍然能够使用,并且不需要做其他多余工作。
需要注意的是,$.get()方法中data参数不仅可以使用映射方式,如以下jQuery代码:

1
2
3
4
5
6
7
  {
                username : $("#username").val(),
                content : $("#content").val()  
            }
 //也可以使用字符串方式,如以下jQuery代码:
  "username="+encodeURIComponent($('#username').val())+
                "&content="+encodeURIComponent($('#content').val())

用字符串方式时,需要注意对字符编码(中文问题),如果不希望编码带来麻烦,可以使用serialize()方法,它会自动编码.

因为serialize()方法作用于jQuery对象,所以不光只有表单能使用它,其他选择器选取的元素也都能使用它,如以下jQuery代码:

1
  $(“:checkbox,:radio”).serialize();

把复选框和单选框的值序列化为字符串形式,只会将选中的值序列化.

2.serializeArray()方法

在jQuery中还有一个与serialize()类似的方法serializeArray(),该方法不是返回字符串,而是将DOM元素序列化后,返回JSON格式的数据。jQuery代码如下:

1
2
var fields = $(“:checkbox,:radio”).serializeArray();
console.log(fields);    //用Firebug输出

既然是一个对象,那么就可以使用$.each()函数对数据进行迭代输出。代码如下:

1
2
3
4
5
6
7
  $(function(){
        var fields = $(":checkbox,:radio").serializeArray();
        console.log(fields);    //用Firebug输出
        $.each(fields,function(i,field){
            $("#results").append(field.value+",");
        });
    })

3.$.param()方法

它是serialize()方法的核心,用来对一个数组或对象按照key/value进行序列化.
比如将一个普通的对象序列化:

1
2
3
  var obj = {a:1,b:2,c:3};
  var k = $.param(obj);
alert(k);//输出a=1&b=2&c=3

jQuery中的Ajax全局事件

当Ajax请求开始时,会出发ajaxStart()方法的回调;当Ajax请求结束时,会触发ajaxStop()方法的回调函数。这些方法都是全局的方法,因此无论创建它们的代码位于何处,只要有Ajax请求发生时,就会触发它们.

jQuery的Ajax全局时间中还有几个方法,也可以在使用Ajax方法的过程中为其带来方便。

另外几个方法
方法名称说明
ajaxComplete(callback)Ajax请求完成时执行的函数
ajaxError(callback)Ajax请求发生错误时执行的函数,捕捉到的错误可以作为最后一个参数传递
ajaxSend(callback)Ajax请求发送前执行的函数
ajaxSuccess(callback)Ajax请求成功时执行的函数
注意 如果想使某个Ajax请求不受全局方法的影响,那么可以在使用$.ajax(options)方法时,将参数中的global设置为false,jQuery代码如下:

1
2
3
4
$.ajax({
    url: "test.html",
    global: false  //不触发Ajax全局事件
})

jQuery速查表

单击查看大图或者右键下载图片:

jQuery速查表
image-1932

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