Ajax
不会ajax就不是前端
ajax最重要作用是的是局部刷新页面(我想学之前你应该已经了解过了)
前端
$.ajax({
type: //数据的提交方式:get和post
url: //请求地址
async: //是否支持异步刷新,默认是true
data: //需要提交的数据
dataType: //服务器返回数据的类型,例如xml,String,Json等
success:function(data){
} //请求成功后的回调函数,参数data就是服务器返回的数据
error:function(data){
} //请求失败后的回调函数,根据需要可以不写,一般只写上面的success回调函数
})
jQuery中的ajax封装案例
//ajax请求后台数据
var btn = document.getElementsByTagName("input")[0];
btn.onclick = function(){
ajax({//json格式
//请求类型
type:"post",
//请求接口/地址
url:"post.php",
//请求内容
data:"username=poetries&pwd=123456",
//是否异步的意思
asyn:true,
请求状态,接收并渲染页面
success:function(data){
document.write(data);
}
});
}
//封装ajax
function ajax(aJson){
var ajx = null;
var type = aJson.type || "get";
var asyn = aJson.asyn || true;
var url = aJson.url; // url 接收 传输位置
var success = aJson.success;// success 接收 传输完成后的回调函数
var data = aJson.data || '';// data 接收需要附带传输的数据
if(window.XMLHttpRequest){//兼容处理
ajx = new XMLHttpRequest();//一般浏览器
}else
{
ajx = new ActiveXObject("Microsoft.XMLHTTP");//IE6+
}
if (type == "get" && data)
{
url +="/?"+data+"&"+Math.random();
}
//初始化ajax请求
ajx.open( type , url , asyn );
//规定传输数据的格式
ajx.setRequestHeader('content-type','application/x-www-form-urlencoded');
//发送ajax请求(包括post数据的传输)
type == "get" ?ajx.send():ajx.send(aJson.data);
//处理请求
ajx.onreadystatechange = function(aJson){
if(ajx.readState == 4){
if (ajx.status == 200 && ajx.status<300)//200是HTTP 请求成功的状态码
{
//请求成功处理数据
success && success(ajx.responseText);
}else{
alert("请求出错"+ajx.status);
}
}
}
jQuery中的Ajax的一些方法
jquery对Ajax操作进行了封装,在jquery中的
.
a
j
a
x
(
)
方
法
属
于
最
底
层
的
方
法
,
第
2
层
是
l
o
a
d
(
)
、
.ajax()方法属于最底层的方法,第2层是load()、
.ajax()方法属于最底层的方法,第2层是load()、.get()、
.
p
o
s
t
(
)
;
第
3
层
是
.post();第3层是
.post();第3层是.getScript()、$.getJSON(),第2层使用频率很高
最后说一句查文档吧
内容完了,我是Yama 拜拜~~
今天事多这个博客没怎么写好,欢迎下方提意见我改进