典型的AJAX流程见附件图
或
细分为以下几个步骤:
– 发生一个客户端事件
– 创建一个XMLHttpRequest对象
– 使用XMLHttpRequest对象发送请求
– 服务器接收请求并进行处理
– 服务器返回结果
– XMLHttpRequest对象调用callback()函数处理结果
– 更新HTML DOM
一个简单的例子
客户端HTML文件代码:
<html>
<body>
<script type="text/javascript">
function ajaxFunction(){
var xmlHttp;
try{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e){
// Internet Explorer
try{
xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e){
try{
xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("您的浏览器不支持AJAX!");
return false;
}
}
}
//以上是创建一个XMLHttpRequest对象
//下面这个function是回调函数
xmlHttp.onreadystatechange=function(){
//readyState为4表示服务器处理完成
if(xmlHttp.readyState==4){
//通过DOM修改页面的显示
//返回的数据存在responseText中
document.myForm.time.value=xmlHttp.responseText;
}
}
//建立请求
xmlHttp.open("GET","time.asp",true);
//发送请求
xmlHttp.send(null);
}
</script>
<form name="myForm"> //触发ajax
用户: <input type="text" name="username" onkeyup="ajaxFunction();" />
时间: <input type="text" name="time" />
</form>
</body>
</html>
服务器端
<%
response.expires=-1
response.write(time)
%>
$.ajax(options)的用法
这个是jQuery 的底层 Ajax 实现。简单易用的高层实现见 $.get, $.post 等。 $.ajax() 返回其创建的 XMLHttpRequest 对象。大多数情况下你无需直接操作该对象,但特殊情况下可用于手动终止请求。
注意: 如果你指定了 dataType 选项,请确保服务器返回正确的 MIME 信息,(如 xml 返回 "text/xml")。错误的 MIME 类型可能导致不可预知的错误。见 Specifying the Data Type for AJAX Requests 。当设置 datatype 类型为 'script' 的时候,所有的远程(不在同一个域中)POST请求都回转换为GET方式。
$.ajax() 只有一个参数:参数 key/value 对象,包含各配置及回调函数信息。详细参数选项见下。 jQuery 1.2 中,您可以跨域加载 JSON 数据,使用时需将数据类型设置为 JSONP。
示例代码:
$.ajax({
type: "GET",
url: rootURI + "/login",
data:{'username' : username,
'password' : password},
complete: checkLoginStatus
});
后台处理代码
public void login() {
if (result.isSuccess()) {
...
} else {
putJSON("user_not_exist_or_incorrect_password");
}
}
putJSON(String data){
ServletActionContext.getResponse().setCharacterEncoding("utf-8");
ServletActionContext.getResponse().setContentType("application/json;charset=UTF-8");
PrintWriter out = ActionUtil.getResponse().getWriter();
out.print(data);
}
前台回调函数
function checkLoginStatus(data){
if (data.status != 200) {
alert('登陆出错,请稍后再试');
return;
}
if (data.responseText == "incorrect_code") {
alert('验证码错误');
} else if (data.responseText == "user_not_exist_or_incorrect_password") {
alert('无此用户名或密码错误');
} else {
location.href = rootURI + '/admin/index.jsp';
}
}
- 大小: 25.7 KB
分享到:
相关推荐
AJAX与jquery试题,检查对ajax和jquery基本知识的掌握
vs2013 利用Ajax+Jquery实现异步进度条效果
工作之余写的一些Ajax应用,有6个Demo,数据库为mysql,使用之前看readme.txt。javascript与jquery混用。无刷新购物车、输入提示、表格局部刷新、xml实时数据更新、划词解释。
Ajax jquery的使用 Ajax jquery的使用 Ajax jquery的使用 Ajax jquery的使用 Ajax jquery的使用
Ajax(jQuery实现例子) Ajax(jQuery实现例子) Ajax(jQuery实现例子) Ajax(jQuery实现例子) Ajax(jQuery实现例子) Ajax(jQuery实现例子) Ajax(jQuery实现例子)
ajax实现分页jquery代码,可调整css
初学ajax的可以看看,Jquery实现AJAX 应用
有ajax,jquery实现tab效果
ajax+jquery+ashx实现上传文件 简单易用,直接调用
使用 Ajax + JQuery 实现无刷新效果,提高用户的视觉效果。
Ajax里jQuery的ajax与ssh三框架的集成与总和
ajax+jquery实现文件上传(详细注释)
Jquery实现ajax三级联动
jQuery+Ajax实现排序效果
ajax WCF jquery ajax WCF jquery ajax WCF jquery ajax WCF jquery
Jquery_ajax实现搜索
在输入页面利用JQuery获取用户输入,然后通过AJAX异步发送到处理页面,处理页面接收到值后进行模糊匹配查询,然后将结果返回,输入页收到返回的数据后在处理,并生成相应的页面显示在页面上。若是jquery ...
本文档主要讲述Ajax与jquery相结合实现的无数新验证用户时常用的post()方法之二,服务器端以json方式返回数据时的处理办法
Ajax\使用jQuery简化Ajax+开发.zipAjax\使用jQuery简化Ajax+开发.zipAjax\使用jQuery简化Ajax+开发.zipAjax\使用jQuery简化Ajax+开发.zipAjax\使用jQuery简化Ajax+开发.zip
jQuery-ajax-json实现自动轮播图.rar