Ajax+Servlet(JSP)基本使用方法

本文介绍如何利用Ajax技术实现网页与服务器之间的异步数据交互。从创建XMLHttpRequest对象开始,逐步讲解如何构建URL、发起GET请求及处理服务器响应等关键步骤。并通过一个具体的示例展示了完整的异步数据请求过程。
摘要由CSDN通过智能技术生成

 

要使用Ajax,首先得创建XMLHttpRequest对象

 

var request = false;
try{
	request = new XMLHttpRequest();//Mozilla,Safari,Opera,IE7等
}catch(e){//IE7以前的版本
	try{
		request = new ActiveXObject("Msxml2.XMLHTTP");//IE较新版本
	}catch(e1){
		try{
			request = new ActiveXObject("Microsoft.XMLHTTP");//IE较老版本
		}catch(e3){
			request = false;
		}
	}
} 

 

这样就创建好XMLHttpRequest对象,该对象有几个常用方法和属性需要知道:

 

open():建立到服务器的新请求

send():向服务器发送请求

readyState:提供当前HTML的就绪状态

status:服务器响应的状态代码

responseTest:服务器返回的请求响应文本

 

准备好XMLHttpRequest对象后就可以建立到服务的请求 了:

 

第一步:结合网页数据构造URL

 

var zipcode = document.getElementById('zipcode').value;
var url = "zipDataServlet?zipcode="+escape(zipcode);

 注:escape()方法用于转义不能用明文发送的任何字符。比如,空格将被转换成%20,从而能够在URL中传递这些字符。

 

第二步:建立申请:

 

request.open("GET",url,true);

 注:该方法有五个参数:

    request-type:发送请求的类型。典型的值是GET或POST,但也可以发送HEAD请求

    url:要连接的URL

    asynch:如果希望使用异步连接则为true,否则为false。该参数是可选的,默认为true

    username:如果需要身份验证,则可以在此指定用户名。该参数是可选的,没有默认值

    password:如果需要身份验证,则可以在此指定口令。该参数是可选的,没有默认值

 

一旦请求用open()配置好之后,就可以使用send() 方法发送求的内容,send()方法只有一个参数,就是要发送的内容。

但是我们前面通过URL本身已经发送了zipcode的值,所以这里不需要通过send()传送数据了,只要传递null作为该方法的参数即可:

 

request.send(null);

 

由于是异步请求,请求发出后JavaScript方法不会等待服务器处理完成,而是代码继续执行,就是说,将退出该方法把控制权返回给原先页面。

当服务器处理请求时,XMLHttpRequest对象的就绪状态发生变化,需要指定该如何响应这些变化。XMLHttpRequest对象的onreadystatechange属性允许指定一个回调函数反向调用web页面中的代码以响应这些变化。

 

function processZipData(){
    createRequest();
    var zipcode = document.getElementById('zipcode').value;
    var url = "zipDataServlet?zipcode="+escape(zipcode);
    request.open("GET",url,true);
    request.onreadystatechange = updatePage;
    request.send(null);
}

 注:1.该属性在XMLHttpRequest对象对象调用send()方法之前设置

       2.updatePage是函数名称,但不能写成updatePage()的形式

 

编写回调函数,响应XMLHttpRequest对象状态的变化:

 

此处的响应是一个弹出警告

 

function updatePage(){
    alert('request state is changed!');
}

 

运行上面的代码,根据浏览器的不同,我们会看到两次、三次甚至四次警告。原因是XMLHttpRequest对象的状态有五种就绪状态:

    0:请求还没有发出(在调用open()之前)

    1:请求已经建立但还没有发出(在调用send()之前)

    2:请求已经发出,正在处理之中(这里通常是从响应到得到内容头部)

    3:请求已经处理,响应中通常有部分数据可用,但是服务器还没有完成响应

    4:响应已完成,可以访问服务器响应并使用它

不同的浏览器对就绪状态的使用不尽一致,存在一定的跨浏览器问题。但是对于Ajax编程,需要直接处理的唯一状态4,它表示服务器响应已经完成,可以安全的使用响应数据了。基于此,回调函数做如下调整:

 

function updatePage(){
    if(request.readySate == 4){
        alert('server is done!');
    }
}

 

这样在服务器处理完请求后就会看到一条弹出警告了。

 

以上代码看起来似乎不错,但是还有一个问题——如果服务器响应请求并完成了处理,但是报告了一个错误怎么办?在Web世界中,HTTP状态(status)可以说明请求中可能发生的各种问题,比如:

    404错误码表示页面不存在

    403或401错误码表示所访问的数据受到保护或者禁止访问

五楼哪种情况,这些错误码都是从完成的响应 中得到的。话句话说,服务器执行了请求(即XMLHttpRequest对象的就绪状态是4)但是没有返回客户机预想的数据。因此除了就绪状态外,还需要检查XMLHttpRequest对象的状态。状态码200表示一切顺利。如果就绪状态是4而且状态码是200,就可以处理服务器返回的数据了,并且这些数据应该是要求的数据(而不是错误或者其他问题的信息)。

所以我们再次修改回调函数:

 

function updatePage(){
    if(request.readyState == 4){
        if(request.status ==200){
            alert('server is done!');
        }
    }
}
 

 

最后,处理服务器返回的数据 。返回的数据(文本格式)保存在XMLHttpRequest对象的responseText属性中(如果服务器选择使用XML响应,则也可以使用在responseXML属性获得)。

 

function updatePage(){
    if(request.readyState == 4){
        if(request.status ==200){
            var response = request.responseText.split(",");
            document.getElementById('city').value = response[0];
            document.getElementById('province').value = response[1];
        }
    }
}
 

 

注:得到responseText并使用JavaScript的split()函数从逗号分开,得到的数组放在response中,我们在取出响应的值即可。

 

我们使用JavaScript事件函数触发Ajax的调用:

 

<input id="zipcode" type="text" name="zipcode" οnblur="processZipData()"/>

 

当输入框onblur(失去焦点)事件触发时Ajax就开始运行了!

 

服务器端使用Servlet(当然也可以使用JSP)处理请求:

 

public void doGet(HttpServletRequest request, HttpServletResponse response) throws IOException, ServletException {
    Map<String,String> datas = new HashMap<String,String>();
    datas.put("1","Hefei,Anhui");
    datas.put("2","Tangshan,Hebei");
    datas.put("3","Shanghai,Shanghai");
               
    String zipcode = request.getParameter("zipcode");
    String data = datas.get(zipcode);
    if(null == data){
        data = "Error,Error";
    }
    response.getWriter().println(data);
}

 

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值