ajax的jquery写法和原⽣写法
⼀、ajax的简介
Ajax被认为是(Asynchronous(异步) JavaScript And Xml的缩写）。现在，允许浏览器与服务器通信⽽⽆须刷新当前页⾯的技术都被叫做Ajax.
同步是指：发送⽅发出数据后，等接收⽅发回响应以后才发下⼀个数据包的通讯⽅式。
异步是指：发送⽅发出数据后，不等接收⽅发回响应，接着发送下个数据包的通讯⽅式。
⼆、ajax的缺陷
AJAX⼤量使⽤了JavaScript和AJAX引擎，⽽这个取决于浏览器的⽀持。IE5.0及以上、Mozilla1.0、NetScape7及以上版本才⽀持，Mozilla 虽然也⽀持AJAX，但是提供XMLHttpRequest的⽅式不⼀样。所以，使⽤AJAX的程序必须测试针对各个浏览器的兼容性。
AJAX更新页⾯内容的时候并没有刷新整个页⾯，因此，⽹页的后退功能是失效的；有的⽤户还经常搞不清楚现在的数据是旧的还是已经更新过的。这个就需要在明显位置提醒⽤户“数据已更新”。
对流媒体的⽀持没有FLASH好。
⼀些⼿持设备（如⼿机、PDA等）现在还不能很好的⽀持Ajax。
form数据的序列化：
$('#submit').click(function(){
$('#form').serialize(); //会根据input⾥⾯的name，把数据序列化成字符串；eg：name=yang
$('#form').serializeArray(); //会根据input⾥⾯的name，把数据序列化成数组；eg：[object]
//注意：没有name会获取不到值
//下⾯两种不是jQuery的⽅法
JSON.parse() //json字符串转化为json对象
JSON.stringify() //json对象转化为json字符串
});
三、ajax的四种type类型：
1、GET请求会向数据库发索取数据的请求，从⽽来获取信息，该请求就像数据库的select操作⼀样，只是⽤来查询⼀下数据，不会修改、增加数据，不会影响资源的内容，即该请求不会产⽣副作⽤。⽆论进⾏多少次操作，结果都是⼀样的。
2、与GET不同的是，PUT请求是向服务器端发送数据的，从⽽改变信息，该请求就像数据库的update操作⼀样，⽤来修改数据的内容，但是不会增加数据的种类等，也就是说⽆论进⾏多少次PUT操作，其结果并没有不同。
3、POST请求同PUT请求类似，都是向服务器端发送数据的，但是该请求会改变数据的种类等资源，就像数据库的insert操作⼀样，会创建新的内容。⼏乎⽬前所有的提交操作都是⽤POST请求的。
jquery ajax例子4、DELETE请求顾名思义，就是⽤来删除某⼀个资源的，该请求就像数据库的delete操作。
简单的说就是
get理解为查询 delete就是删除 post就是新增 put就是更新数据
四、ajax的原⽣写法
/*
ajax({
type:'',//请求⽅式
url:'',//请求地址
asny:true, //是否异步
data:'',//数据
dType:'',//请求数据类型
success：function(response){},//执⾏成功的回调函数
error:function(status){}//执⾏失败的回调函数
})
参数json所需要的属性：
*type : string 可缺省，代表请求的⽅式(默认'GET')
*url ：string 不可缺省，代表请求的地址
*asny : boolean可缺省，(默认'true')代表是否异步
*data : json代表需要传递的数据
*dType:data的数据类型
*success ：可缺省，function代表成功的回调函数，该函数第⼀个形参代表后台返回的数据
*error ：可缺省，function代表失败的回调函数，该函数第⼀个形参代表请求的状态码
*/
function ajax(obj){
var type = pe || 'GET',//默认是GET
url = obj.url,
asny = obj.asny !== false,
data = obj.data,
dType = obj.dataType || 'json',
success = obj.success,
error = ;
//处理data
for(var key in data){
data += key + '=' + obj.data[key] + '&';
}
var xhr;//创建XMLHttpRequest
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
try{
xhr = new ActiveXObject('Msxml2.XMLHTTP.6.0');
}catch(e){
xhr = new ActiveXObject('Msxml2.XMLHTTP.3.0');
}
}
if( UpperCase() == 'GET' ){//处理GET
var d = new Date();
url += '?' + data + '_=' + d.getTime();//处理缓存问题
data = null;
}
xhr.open(type,url,asny);
xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');//设置请求头信息 xhr.send(data);//发送数据
//xhr监听
adyState == 4 && xhr.status ==200 ){
var response;
if( dType == 'text' || dType == 'json'){
if( dType == 'json'){//json
response = JSON.parse( sponseText );
}else{//普通⽂本
response = sponseText;
}
}else{//XML
response = sponseXML;
}
success && success(response);//成功回调函数
}else{//请求失败
error && error(xhr.status);//失败回调函数
}
}
}
五、ajax的jquery写法：
$.ajax({
type:"POST", //请求⽅式 get查询 post增加 put修改 delete删除
url:"localhost:8080/info",//请求路径
async:true, //或false 是否异步
data:{name:'ycg',age:25},
timeout:5000,//超时时间
dataType:'json', //返回的数据格式：json/xml/html/script/jsonp/text
beforeSend:function(xhr){
console.log('发送前');
}
success:function(data,textStatus,jqXHR){
console.log('成功');
},
error:function(error){
console.log('错误');
},
complete:function(){
console.log('结束');
}
})
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论