|
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,dataType};
将页面片段载入到selector(选择器)所表达的容器中
$.load{url,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,success(result,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,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"不是邮箱"} （编辑：李大同）
【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!
|
