0
点赞
收藏
分享

微信扫一扫

Ajax基础

什么是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({});







举报

相关推荐

0 条评论