http的交互方法有四种:get、post、put(增加数据)、delete(删除数据)
put和delete实现用的是get和post
get方式
页面不能被修改,只是获取查询信息。但是提交的数据会通过链接暴露在外,使用get请求会被人拿到登陆的用户名和密码,url长度有限制
post方式
页面可以修改,比如回帖、评论。但是提交的数据不会暴露在外,url长度无限制,但是提交大小会有限制
默认不被缓存,不在同一个请求域下远程请求,post都会被转为get
推荐两篇不错的jquery教程:《jQuery的起点教程》和《使用 jQuery 简化 Ajax 开发》
dataType:string
响应的数据类型主要是mime信息,不填写的话会智能判断。一般MIME(多功能网际邮件扩充协议)被定义在Content-Type header中。
一般包括有:xml、html、script、json、jsonp、text
$.ajax,$.get/$.post
$.ajax:执行异步复杂的请求,如果不需要在出错时执行可以用$.get或$.post替代
jQuery.post(url,data,success(data, textStatus, jqXHR),dataType)
jQuery.get(url,data,success(response,status,xhr),dataType)
url(必需,其他为可选):要发送的url
data:数据
success:成功时的操作
success(data, textStatus, jqXHR):(处理后的数据、请求状态字符串、jq1.4中xhr对象)
dataType:响应的数据类型
实例:
var loginFn=function(){
$.ajax({
type:'post', //String 默认为GET
timeout:'', //Number 设置超时时间(毫秒)
url:{"url"}, //String 发送请求的地址
dataType:"json", //String xml、html、script、json、jsonp、jQuery、text
data:{'ur;':url},
//或者data可以如以下写法
data:{username:$("#username").val(),content:$("#content").val()},
//GET请求中将附在URL后;对象必须为key/value形式。如果是数组,jQuery将自动为不同值对应同一名称例如:{foo:["bar1","bar2"]}转换为&foo=bar1&foo=bar2
//提交前回调函数(发送请求前可以修改XMLHttpRequest对象的函数)
beforeSend:function(XMLHttpRequest){
this; //调用本次Ajax请求时传递的options参数
},
//请求成功后处理(data可能是xmlDoc、jsonObj、html、text;textStatus
(请求状态):success、error、notimodified、timeout)
success:function(data,textStatus){
this; //调用本次Ajax请求时传递的options参数//window.location.href = data.getCodeUrl;/*location.reload();*/
},
//请求失败后处理(通常情况下textStatus和errorThrown只有其中一个包含信息)
error: function (XMLHttpRequest,textStatus,errorThrown) {
this; //调用本次Ajax请求时传递的options参数
console.log("error-----------");
},
//请求完成后处理(请求成功或失败时均调用)
complete:function(XMLHttpRequest,textStatus){
this; //调用本次Ajax请求时传递的options参数
}
});
}
$("#object").on("click",loginFn);
接上,success扩展:
success: function(xml){
$(xml).find('item').each(function(){
var item_text = $(this).text(); $('<li></li>')
.html(item_text)
.appendTo('ol');
});
}
load:请求加载数据并返回到指定位置。一般为常用为:点击或输入文本框在指定位置加载出文本,
如果提供数据的是方法,得用post或者get才能生效
实例:
$("button").click(function(){
$("div").load('demo_ajax_load.txt');
});
$("#result").load("ajax/test.html", function() {
alert("Load was performed.");
});
浏览器兼容
function() getXhr{
var xhr;
if(window.XMLHttpRequest){
xhr=new XMLHttpRequest();//非ie浏览器
}else{
xhr=new ActiveXobject('Microsoft.XMLHttp');//ie浏览器
}
}
/*保证返回内容包含text/html,超文本文件
* MIME(多功能网际邮件扩充协议)
* 被定义在Content-Type header中
*常用的有:
超文本标记语言文本 .html,.html text/html
普通文本 .txt text/plain
RTF文本 .rtf application/rtf
GIF图形 .gif image/gif
* */
xhr.overrideMimeType('text/html');
var xhr =new XMLHttpRequest();
→类似于jq的$.ajax
xhr.open("get/post","/*/*/url",true);
→类似于jq的type,url,async
xhr.responseType="text"/"blob"/"json";
→类似于jq的dataType
xhr.send();
→类似于jq的success
推荐参考:原生和jQuery的ajax用法
推荐参考精华:AJAX(用法总结-精华版)