注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

米欧互联

No matter what you want to express……

 
 
 

日志

 
 
关于我

{ note: ‘不会编程的设计狮不是好科研狗’ }

网易考拉推荐

jQuery简介(5)ajax  

2014-05-26 09:42:42|  分类: jq |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
jquery实现ajax

1.复习js中讲过的ajax基础知识;
2.了解json数据格式,并能够在php中应用;

大纲:
1.ajax直译就是:“异步的javascript和XML”

2.现在数据交互多使用json交互,很少使用XML。

3.客户端使用js,服务器端我们选用php。

4.ajax应用案例: 谷歌地图、新浪微博、网易邮箱等;

5.原生js代码比较繁琐:4步 ( 参考:第一个ajax    、  不重载整个页面,更新局部页面-ajax演示  )

创建XMLHttpRequest对象;
与服务器建立连接;
若果请求方式是post,还需要设置请求头;
绑定onreadystatechange事件处理函数;
...
其中最繁琐的是创建XMLHttpRequest对象;
可见,使用原生js写ajax需要不少代码;
jq为我们封装好了完美的ajax方法,我们可以非常方便的用少量代码实现ajax效果。
ajax基础2目录:
1.ajax基础
1)目录结构
2)字符集
页面申明的字符集,文件本身的字符集(不同的编辑器不同)-默认是GBK;
建议统一使用UTF-8作为字符集,避免中文乱码;
3)最终的效果;

2.关于json
1)json简介
javascript object notation的缩写,轻量级的数据交互格式;
在js应用中,与XML相比体积小、解析速度快的优点;
在js中,json字符串可以非常容易的转换为js的对象和数组;
2)json一般形式;
(1)对象形式:
{"键":"值", "键":"值", "键":"值", ...}
(2)数组形式:
["值", "值", ...]
(3)在php中如何应用json
json_encode()很容易将php数组转换为json字符串;
json_decode()很容易将json字符串转化为php数组;
php5.2以上版本。


3.ajax请求方法
目标:
1.使用jq进行表单数据的序列化;
2.jq中常用的ajax请求方法的使用;

3.1表单数据的序列化:
serialize()  表单内容转换为字符串;
serializearray()   表单内容转换为json;

--------------------
return false与event.preventDefault()的区别:
1.return false实际上执行了三个操作:
1)event.preventDefault();
2)event.stopPropagation()
3)终止函数执行并立即返回;
2.为了避免对程序执行过多的隐式操作造成bug,建议:
1)只需要阻止事件冒泡时,应该使用event.stopPropagaton();
2) 只需要阻止默认事件时,应该使用event.preventDefault();
3)只有当同时需要阻止事件冒泡和阻止事件默认行为时,才使用return false;

3.2 ajax请求

$.get(url,[data],[fn],[type])   参数含义:
url: 请求的文件名;
data:返回的数据;
fn:毁掉函数;
type:返回内容的期待格式:xml 、html、script、json、text、_default;


$.post(url,[data],[fn],[type])  参数含义:
与$.get()使用上一样;适合于提交大量数据;


$.ajax(url,[settings]) 参数含义:[最强大的ajax函数]
url:请求的url地址;
type:请求类型,get或post;
data:请求的参数;
dataType:预期服务端返回的数据类型;
beforeSend:function(XMLHttpRequest, textStatus){
//请求完成后进行调用,请求成功or失败都调用;
}
error: function(XMLHttpRequest, textStatus, errorThrown){
//请求失败后调用;
}
success: function(data, textStatus){
//请求成功后调用;
}

举例:
$.ajax({
url:"my.php",
type:'get',
data:'brand[]=google&brand[]=apple',
dataType:'text',
beforeSend:function(XHR){
alert('正在加载");
alert('请求前状态:' + XHR.readyState );
},
complete:function(XHR, textStatus){
alert('加载完成');
alert('请求完成状态:' + XHR.readyState + ' ; textStatus值为: '+textStatus);
},
erro: function(XHR, textStatus, errorThrown){
alert('加载错误');
alert('请求错误:' + XHR.readyState + ' ; textStatus值为: '+textStatus+ ' ; errorThrown值为: '+errorThrown);
}, 
success: function(data, textStatus){
alert('加载成功: ' + data);
alert('加载成功状态:' + XHR.readyState + ' ; textStatus值为: '+textStatus);
}
})



---------------------
ajax

ajax 请求
load(url,[data],[callback]) 
$.getJSON(url,[data],[fn]) 
$.getScript(url,[callback]) 

ajax 事件
ajaxComplete(callback) 
ajaxError(callback) 
ajaxSend(callback) 
ajaxStart(callback) 
ajaxStop(callback) 
ajaxSuccess(callback) 

其它
$.ajaxSetup([options]) 



------------------


-------------

-----
  评论这张
 
阅读(32)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2018