Asynchronous javaScipt and Xml
什么是Ajax:异步访问服务器,不刷新页面!不是一项新技术,整合了几项技术组成.主要目的是为了提高用户体验度
执行流程: 在用户界面触发事件调用javaScipt,通过引擎(XMLHttpRequest)对象异步发送请求到服务器,服务器返回XML,JSON,或HTML等格式的数据,然后利用返回一的数据使用DOM和CSS技术局部刷新用户界面。
作用:通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。
readyState 状态:0.未初始化1.开始发送请求2.请求发送完成3.开始读取响应4.读取响应结束
Status 状态:200-正确返回,404-找不到访问对象,403-没有访问权限,500-数据错误
onreadystatechange:设置回调函数
1.进行Ajax原生操作
1.创建XMLHttpRequest对象
2.设置回调函数
3.初始化XMLHttpRequest组件
4.发送请求
5.参考(validate_Email.jsp,practice_server.jsp)文件
使用JQuery实现Ajax方法(必须导入jquery-1.8.3.js)文件才能使用!
2.$.ajax()方法:{}方法中基本参数有6个分别是:每个参数以:“参数名:参数值”的方法书写
$.ajax({
url:要提交的路径
type:发送的请求方法(Get/Post)
data:要发送的到服务器的数据
dateType:指定要传输的数据格式 (xml,html,script,json,text,jsonp)
success:function(result){ :请求成功之后要执行的代码(result,ts)
..省略
},
error:function(){ :请求失败之后要执行的代码(xhr,em,e)
alert("系统升级完善中,求稍后再尝试..");
}
});
注意: success:function(result,status){ 参数1:有服务器中返回的数据。参数2:请求类型的字符串
error:function(xhr,msg,etype){ 参数1:XMLHttpRequest对象。参数2:错误信息。参数3:捕获的异常对象。
参考(validate_Email_JQuery.jsp,VaildateEmailServlet)文件
除了$.ajax()方法还有: 以PSOT/GET请求发送Ajax
$.get{url,data,success(resp,status,xhr),dataType};
$.post{url,data,success(resp,status,xhr),dataType};
将页面片段载入到selector(选择器)所表达的容器中
$.load{url,data,success(resp,status,xhr)};
有待验证用法..
加载JSON格式数据或脚本
$.getJSON(url,[data],[callback])
$.getScript(url,[callback])
什么是JSON:轻量级的数据交换格式,能够替代XML的工作.
保存文件的格式可以为:js,json(jsondemo.js或者test.json)
优点是:数据格式比较简单, 易于读写, 格式都是压缩的, 占用带宽小
语法/书写格式是: 名称/值对。多个值之间使用逗号分隔:var JSON对象 = {key:value,key:value··};
value可以是:String,Number,boolean,null,对象,数组,等等类型
1.数据在键值对中,中间用冒号隔开:
2.数据由逗号分隔,
3.花括号保存对象{}
4.方括号保存数组[]
注意: 数组:var JSON对象 = [value,value,··];
用法:1.jsondemo.js 编写Js文件 {"key":"value"}
2.在页面输出
参考:(jsondemo.js,json.jsp)文件
发送JSON格式数据到服务端,或者接收从服务器端返回的JSON格式数据。
必须使用$getJSON()方法异步发送请求到服务端,并以JSON格式封装客户端与服务端间传递的数据。
语法:$getJSON(url,data,success(result,status,xhr))
等价于: 使用$Ajax({参数中,指定类型:dataType:"JSON"})就是两个方法一样的功效
注意:使用该方法时,默认从服务器接收到数据就是JSON对象,不需要再解析即可使用
读取文件 test.json 读取时指定绝对路径
$getJSON使用方式:$.getJSON("jqueryjs/test.json",function(data){
var dataValue = data.key;
}
解析字符串的方法: $.parseJSON(str)
用法:var Str = {"name":"林林林"};
alert($.parseJSON(Str).name);结果输出:弹框信息:林林林
使用Ajax+JSON+struts.xml+Action访问数据
使用JSON插件实现JSON类型的Result,实现JSON作为服务器和客户端之间的传递数据
1.先导入包:struts2-json-plugin-2.3.15.1.jar
2.在struts.xml文件中编写<package>,并指定该包继承于json-default
3.在<package>下定义<action>,并将结果标签指定属性为:<result type = "json"></result>
例子:struts.xml文件中
<package name="ajax" extends="json-default" namespace="/">
<!-- 使用Ajax方式的Action -->
<action name="loginUsersAjax" class="cn.struts2.action.LoginUsersAjaxAction" method="login">
<!-- <result name="input">/loginAjax.jsp</result> -->
<!-- 将返回类型的Type指定为json就可以进行服务端和客户端进行数据传递了 -->
<result name="success" type="json">
<!-- includeProperties 返回指定屬性的值 -->
<param name="includeProperties">users,nextAction</param>
<!-- root 返回要指定的序列化的根对象,若指定多个则只返回最后一个 -->
<!-- <param name="root">user</param> -->
<!-- excludeProperties 指定的属性不返回 -->
<!-- <param name="excludeProperties">user.password</param> -->
<!-- excludeNullProperties 指定的属性如果为空就不返回,不为空才返回 -->
<!-- <param name="excludeNullProperties">true</param> -->
</result>
</action>
</package>
jsp页面:必须保证能正常使用JQuery!(导包)
<script type="text/javascript">
function validate() {
var name = $("#name").val();
var pwd = $("#pwd").val();
/* alert(name);alert(pwd); */
if (name == null || name == "") {
$("#errorMsg").html("<span style='color:red'>请输入用户名!</span>");
}
$.ajax({
url : "loginUsersAjax", // 访问struts.xml
type : "post",
data : {
"users.name" : name,
"users.password" : pwd
},
dataType : "json",
success : function(data) {
$("#errorMsg").html("");
alert(data.nextAction);
if (data != null && data.users!=null) {
location.href = data.nextAction;
} else {
$("#errorMsg").html("<span style='color:red'>输入用户名或者密码不正确!</span>");
}
},
error : function(xhr, msg, etype) {
alert("异常类型1:" + etype + ",异常信息:" + msg);
}
});
};
</script>
使用正则表达式验证方法为:正则表达式.test(获取的值)
列子: var email = $("#email").val();
var testEmail = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
if(testEmail.test(email)){return"是邮箱"}else{return"不是邮箱"}