Ajax的使用小示例

<%@pagelanguage="java"contentType="text/html;charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPEhtmlPUBLIC"-//W3C//DTDHTML4.01Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<Metahttp-equiv="Content-Type"content="text/html;charset=UTF-8">
<title>Inserttitlehere</title>
<scripttype="text/javascript">
varxmlHttp=false;
functiondoIt(){
sendRequest("GET","/system/ajax.action",true,callback);
}
functionsendRequest(method,url,async,callback){
if(window.XMLHttpRequest){
xmlHttp=newXMLHttpRequest();
}elseif(window.ActiveXObject){
xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
}
if(!xmlHttp){
alert("当前浏览器无法创建XMLHttpRequest对象");
}else{
//初始化XMLHttpRequest对象
xmlHttp.open(method,async);
//定义一个回调函数
xmlHttp.onreadystatechange=callback;
//发送
xmlHttp.send();
}
}
functioncallback(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
varstr=xmlHttp.responseText;
//alert(str);
varobj=eval("("+str+")");
alert(obj.name+":"+obj.age);
}
}
</script>
</head>
<body>
<buttonid="b"onclick="doIt()">获得JSON对象</button>
</body>
</html>

publicvoidajax(){
try{
Strings="{\"name\":\"张三\",\"age\":\"20\"}";

ServletActionContext.getResponse().setCharacterEncoding("UTF-8");
ServletActionContext.getResponse().getWriter().print(s);
}catch(IOExceptione){
e.printStackTrace();
}
}

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。 0: 请求未初始化 1: 服务器连接已建立 2: 请求已接收 3: 请求处理中 4: 请求已完成，且响应已就绪
status	200: "OK" 404: 未找到页面

属性

描述

onreadystatechange

存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState

存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成，且响应已就绪

status

200: "OK"

404: 未找到页面

<!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<htmlxmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<scriptsrc="js/Jquery1.7.js"type="text/javascript"></script>
<scripttype="text/javascript">
$(function(){
$('#Button1').click(function(){
varusername=$('#txtUserName').val();
varpwd=$('#txtPwd').val();
$.ajax({
type:"post",contentType:"application/json",url:"WebService1.asmx/Login",data:"{username:'"+username+"',pwd:'"+pwd+"'}",success:function(bukeyi){
if(bukeyi.d=='true'){
window.location='HTMLPage1.htm';
}
else{
$('#divinfo').text("用户名或密码错误");
}
}
})
})
})
</script>
</head>
<body>
用户名<inputid="txtUserName"type="text"/><br/>
密码<inputid="txtPwd"type="text"/><br/>
<inputid="Button1"type="button"value="登录"/><br/>
<divid="divinfo"></div>
</body>
</html>

----------------------------------------------------------

<scripttype="text/javascript">
varxmlHttp=false;
functionqiangda(ipaddress){
//alert(ipaddress);
sendRequest("GET","qiangda.action?ip="+ipaddress,callback){
if(window.XMLHttpRequest){
//基于Mozilla的浏览器，直接创建XMLHttpRequest对象
xmlHttp=newXMLHttpRequest();
}elseif(window.ActiveXObject){//IE浏览器
//xmlHttp=newActiveXObject("Microsoft.XMLHTTP");
//IE浏览器中XMLHTTP的实现版本并不相同
varmsxmls=["MSXML3","MSXML2","Microsoft"];
for(vari=0;i<msxmls.length;i++)
{
try
{
xmlHttp=newActiveXObject(msxmls[i]+".XMLHTTP");
}
catch(e)
{
alert("您的浏览器不支持XMLHTTP控件");
}
}
}
if(!xmlHttp){
alert("当前浏览器无法创建XMLHttpRequest对象");
}else{
//初始化XMLHttpRequest对象
xmlHttp.open(method,async);
//定义一个回调函数
xmlHttp.onreadystatechange=callback;
//发送
xmlHttp.send();
}
}
functioncallback(){
if(xmlHttp.readyState==4&&xmlHttp.status==200){
varstr=xmlHttp.responseText;
//alert(str);
varobj=eval("("+str+")");
//Dialog.alert(obj.name+":"+obj.age);
alert(obj.name+":"+obj.age);
}
}
</script>

原文链接：https://www.f2er.com/ajax/162447.html

猜你在找的Ajax相关文章