Ajax + Json 基本用法（自整理）

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="/">

<action name="loginUsersAjax" class="cn.struts2.action.LoginUsersAjaxAction" method="login">



<result name="success" type="json">


<param name="includeProperties">users,nextAction</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"不是邮箱"}

Ajax + Json 基本用法（自整理）

猜你在找的Ajax相关文章