JQuery——Ajax之实例开发步骤

来源：互联网发布：淘宝托福答案揭秘编辑：程序博客网时间：2024/05/17 01:16

Ajax实例开发步骤：用Ajax完成一个简单的查询客服人员状态的例子

1、新建HTML或JSP页面；
2、在页面中写出创建XMLHttpRequest对象的方法；
3、写出事件响应方法，用创建的XMLHttpRequest对象发出异步Ajax请求；
4、创建Servlet响应请求；
5、在页面完成回调方法，处理服务器端响应，改变页面效果。

1、新建HTML或JSP页面
<body>
 <a>请输入客服人员姓名：</a>
 <input id="sName" onblur="getStatus()">
 
</body>
2、在页面中写出创建XMLHttpRequest对象的方法
varxhr;
function createXHR(){
 /* window.ActiveXObject
 判断浏览器是否支持ActiveX控件，如果浏览器支持ActiveX控件可以利用
 var xml=new ActiveXObject("Microsoft.XMLHTTP");
 创建XMLHttpRequest 对象（这是在IE7以前的版本中）；
 在较新的IE版本中可以利用 var xml=new ActiveXObject("Msxml2.XMLHTTP")的形式创建 XMLHttpRequest对象;
 而在IE7及非IE浏览器中可以利用var xml=new XMLHttpRequest()创建XMLHttpRequest对象。 */
if(window.ActiveXObject){
xhr = newActiveXObject("Microsoft.XMLHTTP");
}elseif(window.XMLHttpRequest){
xhr = newXMLHttpRequest();
}else{
alert("can'tcreatexhr object!");
}}
3、写出事件响应方法，用创建的XMLHttpRequest对象发出异步Ajax请求
function getStatus(){
varsName =document.getElementById("sName").value;
createXHR();

xhr.onreadystatechange=getStatusCallback;
xhr.open("get","/Ajax/servlet/CustomerServiceServlet?sName=" + sName);
xhr.send(null);
}
4、创建Servlet响应请求
public void doGet(HttpServletRequest request,HttpServletResponse response)
throwsServletException,IOException {
response.setContentType("text/html");
PrintWriter out =response.getWriter();
intiRandom = (int)(Math.random()*10);
if(iRandom % 2 == 1){
out.print("yes");
}elseif(iRandom % 2 == 0){
out.print("no");
}
out.flush();
out.close();
}
5、在页面完成回调方法，处理服务器端响应，改变页面效果

function getStatusCallback(){
 if(xhr.readyState == 4){
 if(xhr.status == 200){
 var ret =xhr.responseText;
 var span =document.getElementById("status");
 if(ret.indexOf("yes")> -1){
 span.innerHTML = "<fontcolor='red'>online";
 }else{
 span.innerHTML = "<fontcolor='green'>outline";
 }
 }
 }
}

阅读全文

0 0