JQuery——Ajax之实例开发步骤

最新推荐文章于 2022-09-23 13:02:43 发布

ddm01

最新推荐文章于 2022-09-23 13:02:43 发布

阅读量299

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/qq_34869143/article/details/78349933

版权

JQuery 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

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

1、新建HTML或JSP页面；

2、在页面中写出创建XMLHttpRequest对象的方法；

3、写出事件响应方法，用创建的XMLHttpRequest对象发出异步Ajax请求；

4、创建Servlet响应请求；

5、在页面完成回调方法，处理服务器端响应，改变页面效果。

1、新建HTML或JSP页面

<body>
 <a>请输入客服人员姓名：</a>
 <input id="sName" οnblur="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";

 }

 }

 }
}