ajax

最新推荐文章于 2025-09-05 11:31:06 发布

原创最新推荐文章于 2025-09-05 11:31:06 发布 · 92 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#xmlhttprequest #ajax #jquery #ViewUI

javascript 专栏收录该内容

1 篇文章

订阅专栏

本文详细介绍了Ajax请求的不同方式，包括使用原生XMLHttpRequest实现GET请求、jQuery中的$.ajax()方法及$.get()、$.post()等简化操作，并展示了如何处理请求的成功与失败。

//模拟xmlHttpRequest请求
var xmlHttpRequest = null;
function Ajax(){
  if(window.ActiveXObject){
   xmlHttpRequest = new ActiveXOjbect("Microsoft.XMLHTTP");
  }else if(window.XMLHttpRequest){
   xmlHttpRequest = new XMLHttpRequest();//实例化XMLHttpRequest对象
  }
  xmlHttpRequest.open("GET","getMessage.action".true);
  xmlHttpRequest.onreadystatechange= requestCallBack;//设置回调函数
  xmlHttpRequest.send(null);
}
function requestCallBack(){
  if(xmlHttpRequest.readyState == 4){
   if(xmlHttpRequest.status == 200){
    document.getElementById("").innerHTML=xmlHttpRequest.responseText;
   }
  }
}

//jQuery中的Ajax
底层:$.ajax();
ajax:
  $.ajax({url,data,timeout,type,success,error,beforeSend,complete,dataType});
  //data:请求的数据参数
  //timeout:超时时限
  //type:请求类型:get,post,put,delete
  //success:请求成功回调函数
  //error: 请求失败回调函数
  //beforeSend(XMLHttpRequest):发送请求前可以进行修改
  //dataType:服务器端返回的数据格式设定:html,xml,json,text
  ex:
   $.ajax({
     url:'server.action',
    type:'post',
    dataType:'json',
    data:{
     param1:value1,
     param2:value2,
     param3:value3
    },
    timeout:3000,
    beforeSend : function(reqObj){
     alert("请求之前进行数据确认和验证");
    },
    success:function(data,textStatus){
     alert("请求成功");
    },
    error:function(data,textStatus){
     alert("请求失败");
    }
   });
第二层:$.load(); $.get(); $.post();
load:
  $.load(url [,data] [,callback]);
  ex:$.load(url,{param1:value1,param2:value2},function(responseText,textStatus,XMLHttpRequest){
   //responseText:返回的内容
   //textStatus: 请求状态
   //XMLHttpRequest:XMLHttpRequest对象
  });
get:
  $.get(url [,data] [,callback] [,type]);
  //callback:是只有载入成功时,才有的回调函数,函数有两个参数:function(data,textStatus);//返回的数据和状态码
  //type:服务器端返回的数据格式:xml,html,json,script,text和_default
post:
  $.post(url [,data] [,callback] [,type]);

第三层:$.getScript(); $.getJSON();
  getScript:
   $.getScript(url);
   //动态加载js文件:$.getScript("example.js");
  getJSON:
   $.getJSON(url[,callback]);
   //加载json数据文件
   //$.getJSON('test.json' , function(data,status){
    //do something....
   });

序列化数据操作
$.param(obj); //是serialize()方法的核心,用于对一个对象进行序列化数据处理(按照key/value);
var obj = {a:1,b:2,c:3};
var result = $.param(obj);
alert(result);//输出:a=1&b=2&c=3

$("#formObj").serialize(); //序列化表单数据为字符串
//$.post(url,$("#formObj").serialize(),function(data,status){
  //do something....
});

var fields = $.(":checkbox,:radio").serializeArray(); //序列化数据为对象
$.each(fields,function(index,data){
  //循环迭代对象数据
  //index:下标
  //data:对应的数据
});