什么是Ajax(Asynchronous Javascript And XML)?
异步刷新请求(服务),一般是在无需请求整个页面时执行的操作,局部页面发生改变。
为什么使用Ajax?
无刷新:不用刷新整个页面,只刷新局部
无刷新的好处:1、只更新部分页面,有效利用带宽
2、提供连续的用户体验
3、提高以c/s的交互结果,操作更方便
Ajax的工作流程:
1、由游览器中的脚本提供ajax引擎对象
2、通过引擎对象进行发送异步请求到服务器
3、服务器进行处理(获取)响应数据,给前台Ajax引擎对象
4、通过引擎对象对应的状态码进行数据获取,在回调函数中执行
5、进行页面显示
XMLHttpRequest
整个ajax的核心,提供异步发送请求的能力
常用方法:
open(String method,String url,boolean async) 创建请求
method:提交方式 get post方式
url:提交的地址
async:是否执行异步 true异步 false同步(会进入请求线程阻塞,必须等待其他请求结束)
send() 发送请求,一般send()方法用于携带请求参数(仅限于post方式)一般send参数为null或""
都为get方式提交
注意:get提交方式请求参数位于url之后(传统方式拼接)
abort() 取消当前请求
setRequestHeader(String header,String value) 设置当前请求头
getResponseHeader(String header) 根据名称获取请求头
getAllResponserHeader() 获取所有响应请求头信息
Ajax在js中使用步骤:
1、创建XMLHttpRequest对象,根据游览器不同,创建对象方式不同
var req=null;
if (window.XMLHttpRequest){//true IE7+ 谷歌 苹果 火狐
req=new XMLHttpRequest();
} else {//IE5 IE6游览器兼容此请求
req=new ActiveXObject("Microsoft.XMLHTTP")
}
2、设置当前对象执行的回调函数(执行完整请求后调用的函数)
req.onreadystatechange=function () {
if (req.readyState==4 && req.status==200){}
}
req.readyState:ajax生命周期状态码
0:未创建 1:开始发送请求 2:请求完毕 3:开始响应 4、结束响应
200:正常请求 404:找不到资源(url地址找不到) 500:服务器内部错误
405:请求方式不对
3、创建请求并执行发送
get req.open("get","请求路径","true"); 请求路径一般携带参数
req.send(null); 或者req.send("");
post req.open("post","请求连接",true);
req.setRequestHeader("Content-type","application/x-www-form-urlencoded");
//进行发送请求,并携带参数
req.send("参数名=参数值&参数名=参数值");
不同点:get方式可以请求路径中携带参数,不能在send()方法请求时加参数
post方式不可以在请求路径中携带参数,可以在send()方法请求时加参数
传统js方式的ajax不足:
1、步骤繁琐
2、属性方法不好记忆
3、游览器兼容问题
4、处理后台响应的各类数据比较繁琐、复杂
使用jQuery的ajax方法实现异步
语法:$.ajax({
url:请求路径,
type:请求方式(get/post)默认get,
data:发送给服务的数据,
dataType:响应的数据类型,
timeout:请求超时长,
global:是否触发全局ajax,默认触发,
success:function (data) { }, 执行成功
error:function () {}, 请求错误执行
beforeSend:function () {}, 请求之前执行
complete:function () {} , 始终执行
})
什么是json数据格式
1、轻量级语言交换格式
2、独立于语言的文本格式
3、在客户端和服务器之间传输数据
优点:1、轻量级语言
2、结构简单
3、易于解析
json语法:
var jsnotallow={"属性名":"属性值","属性名1":"属性值1"}
例如:name:张三 age:18 sex:男
var stu={"name":"张三","age":"18","sex":"男"}
jQuery的 方法(AJAX):
$.get()
$.post()
$getJSON()
$(选择器).load(请求地址,携带参数,回调函数);
将服务器影响的数据直接默认使用html()方法放置到页面上
注意:1、load()只对选中的元素生效
2、默认使用get()请求,如果携带的参数是对象,则使用post()请求
转换表单参数信息:
将匹配的元素转换为对象数组的形式进行保存
var serArr = $("选择器").serializeArray();
注意:
1、获取的不能有表单禁用元素、文件元素
2、必修有name属性
3、可以获取选中的单选和复选框
4、submit按钮也可以获取到
5、序列化内容包含键值对的形式 key=value
var param = $.param(serArr);//参数列
FashJSON处理数据:
是一个用于json数据格式和对象之间的解析和合生成。(来回转换)
解析器:将json数据解析为Java(反序列化)对象
生成器:将Java对象生成json(序列化)格式代码
JSON.toJSONString(Object) 序列化为字符串
JSON.toJSONString(Object,true) 具有格式
JSON.toJSONString(Object,SerializerFeature.静态常量) 可以设置JSON格式
JSON.toJSONStringWithDateFormat(date,"yyyy-MM-dd hh:mm:ss")日期对象转json对象
var param=$jq("#content,#username").serialize(); 序列化表单参数数据
让渡:使用jQuery让出$的使用权,可以替换为其他符号
var $jq=jQuery.noConflict();
jQuery加载方式:
1、jQuery(document).ready({});
2、让渡前:$({});
3、让渡后:$jq({});