ajax。xmlHttpRequest的原理
一、什么是ajax
ajax是一种异步通信技术。在ajax出现之前,客户端与服务端之间直接通信。引入ajax之后,客户端与服务端加了一个第三者--ajax。有了ajax之后,通过在后台与服务器进行少量数据交换,可以达到在不刷新整个页面的情况下实现局部刷新。其原理如图
总结:简单来说就是通过XmlHttpRequest对象来向服务器发异步请求,从服务器获得数据,然后用javascript来操作DOM而更新页面(这里并不是直接显示在页面)。
二:XmlHttpRequest对象
XMLHttpRequest是ajax的核心机制,完全是用来向服务器发出一个请求的,仅仅如此.
XMLHttpRequest对象一共有三个属性:onreadystatechange(全小写)、readyState、status
1.onreadystatechange
xmlhttp.onreadystatechange = function(){
};
每次readyState对象的改变都会触发一次onreadystatechange属性储存的函数,一次有效的Ajax请求一共会触发5次该事件
2.readyState
一共有5个值,0~4分别代表不同的状态。
0 —— 请求未初始化
1 —— 服务器已建立了链接
2 —— 请求已被服务器接收
3 —— 请求正在被处理
4 —— 请求完成处理,响应就绪
if(xmlhttp.readyState==4…):用以判断当前服务器是否已准备好响应
3.Status
代表着Http状态码 200:OK
if(xmlhttp.readyState==4&& xmlhttp.status==200)
三:原生ajax的流程
原生ajax的请求总结为一下六个步骤
1.创建XHR对象
2.调用open()方法创建请求
3.调用send()方法发送请求
4.onreadychange捕获请求的状态码
5.判断状态吗是否成功
6.调用ajax的responseText属性返回数据:(获取服务器响应内容:responseText / responseXML)
四:Jquery对ajax的封装
$.ajax,....(其他忽略)
这个是JQuery对ajax封装的最基础方法,通过使用这个函数可以完成异步通讯的所有功能。也就是说什么情况下我们都可以通过此方法进行异步刷新的操作。
jquery封装了XMLHttpRequest的底层实现,直接调用提供的方法即可
function confirm(){
$('#check-form').bootstrapValidator('validate');
if($('#check-form').data('bootstrapValidator').isValid()){
if($.trim($('#password').val()) != ''){
var memberNo = getValueAny('memberNo');
var passwordEncrypt = $('#password').val();
ajax({
url: "@url("/common/checkPassword.action")",
type: "POST",
data:{
memberNo:getValueAny('memberNo'),
passwordEncrypt:passwordEncrypt
},
async:false,
success: function(result) {
this.parent.save();
closeSelfDialog();
}
});
}
}
}
contentType: 告诉服务器,我要发什么类型的数据
dataType:告诉服务器,我要想什么类型的数据,如果没有指定,那么会自动推断是返回 XML,还是JSON,还是script,还是String。
五 .json字符串与json对象的区别
a.JSON对象是直接可以使用JQuery操作的格式,如C#中可以用对象(类名)点出属性(方法)一样
b.JSON字符串仅仅只是一个字符串,一个整体,不截取的话没办法取出其中存储的数据,不能直接使用,除非你只想alert()他;
JSON对象:
var str2 = { "name": "deluyi", "sex": "man" };
JSON字符串:
var str1 = '{ "name": "deyuyi", "sex": "man" }';
1.将"JSON对象"转化为"JSON字符串"的方法?
使用全局方法JSON.stringify()与toJSONString()
例如:
obj.toJSONString(); //将JSON对象转化为JSON字符
或者
JSON.stringify(obj); //将JSON对象转化为JSON字符
var params = $('#user-form').serializeObject();//这样就可以获得整个表单所有字段的数据,并以object格式序列化
关于ajax设置contentType,data的部分相关实验:
前端:
if ($('#main-form').data('bootstrapValidator').isValid()) {
var sql = document.getElementById('sql').value
$.ajax({
url:'@url("/loginSysInformConf/select.action")',
type:"post",
data:sql,
contentType:"application/json",
mask:true,
success:function(result){
if(result && result.data){
confirm(result.messages+",是否要保存?", function(){
save();
});
}else{
error(result.messages+",请核对你的sql文");
}
},
error: function(xmlHttpRequest, message, exception) {
error("系统异常:\n" + message);
}
});
}
sql的值为:SELECT USER_NAME as USER_NAME,LAST_LOGIN_TIME as LAST_LOGIN_TIME FROM TB_USER@TEST
后台:
public ResultBean select(@RequestBody String sql){ List<SystemUserLoginInfoEntity> userList = loginSysInformConfService.select(sql); ResultBean bean=new ResultBean(); bean.setData(userList); if(userList != null && userList.size() > 0){ bean.setData(userList); bean.setMessages("测试通过"); bean.setStatus(true); }else{ bean.setMessages("测试未通过"); bean.setStatus(false); } return bean; }
情况1:data:sql contentType:"application/json", @RequestBody String sql
接收情况:SELECT USER_NAME as USER_NAME,LAST_LOGIN_TIME as LAST_LOGIN_TIME FROM TB_USER@TEST -------正常
情况2:data:JSON.stringify(sql) contentType:"application/json", @RequestBody String sql
接收情况:"SELECT USER_NAME as USER_NAME,LAST_LOGIN_TIME as LAST_LOGIN_TIME FROM TB_USER@TEST"
情况3:data:{sql:sql} contentType:"application/json", @RequestBody String sql
接收情况:sql=SELECT+USER_NAME+as+USER_NAME%2CLAST_LOGIN_TIME+as+LAST_LOGIN_TIME+FROM+TB_USER%40TEST
情况4:data:sql @RequestBody String sql
接收情况:SELECT+USER_NAME+as+USER_NAME%2CLAST_LOGIN_TIME+as+LAST_LOGIN_TIME+FROM+TB_USER%40TEST=
情况5:data:JSON.stringify(sql) @RequestBody String sql
接收情况:%22SELECT+USER_NAME+as+USER_NAME%2CLAST_LOGIN_TIME+as+LAST_LOGIN_TIME+FROM+TB_USER%40TEST%22=
情况6:data:{sql:sql} @RequestBody String sql
接收情况:sql=SELECT+USER_NAME+as+USER_NAME%2CLAST_LOGIN_TIME+as+LAST_LOGIN_TIME+FROM+TB_USER%40TEST
情况7:data:{sql:sql} String sql
接收情况:SELECT USER_NAME as USER_NAME,LAST_LOGIN_TIME as LAST_LOGIN_TIME FROM TB_USER@TEST -------正常
情况8:data:JSON.stringify(sql) String sql
接收情况:null
情况9:data:sql String sql
接收情况:null
情况10:data:sql contentType:"application/json", String sql
接收情况:null
情况11:data:JSON.stringify(sql) contentType:"application/json", String sql
接收情况:null
情况12:data:{sql:sql} contentType:"application/json", String sql
接收情况:null
总结:1.@RequestBody接收的是一个Json对象的字符串,而不是一个Json对象
2. data:sql contentType:"application/json", @RequestBody String sql
或 data:{sql:sql} String sql才能正常接收数据
3.不使用contentType: “application/json”则data可以是对象------------data: { id: nodeId },
使用contentType: “application/json”则data只能是json字符串--------------------data: "{'id': " + nodeId +"}",