首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Ajax >

几种ajax的施用

2012-09-04 
几种ajax的使用1.Jquery中使用ajax方法$.ajax({type: get,//(默认: GET) 请求方式 (POST 或 GET),

几种ajax的使用

1.Jquery中使用ajax方法
$.ajax({
type: "get",//(默认: "GET") 请求方式 ("POST" 或 "GET"), 默认为 "GET"。注意:其它 HTTP 请求方法,如 PUT 和 DELETE 也可以使用,但仅部分浏览器支持。
url: "http://localhost/xxsb/demo/all_sjdctemp.jsp",
timeout : 3000 ,//设置请求超时时间(毫秒)。此设置将覆盖全局设置。
dataType : 'text',//
beforeSend: function(XMLHttpRequest){
//发送请求前可修改 XMLHttpRequest 对象的函数,如添加自定义 HTTP 头
},
success: function(data, textStatus){
   alert(data);
//请求成功后回调函数。这个方法有两个参数:服务器返回数据,返回状态
},
complete: function(XMLHttpRequest, textStatus){
//请求完成后回调函数 (请求成功或失败时均调用)。
},
error: function(){
alert('调用错误');
//请求出错处理
//(默认: 自动判断 (xml 或 html)) 请求失败时将调用此方法。这个方法有三个参数:XMLHttpRequest 对象,错误信息,(可能)捕获的错误对象。
}
});
2.基本的实现方法
var xmlHttp = false;
//如果使用较新版本的 Internet Explorer,则需要使用对象 Msxml2.XMLHTTP,而较老版本的 Internet //Explorer 则使用 Microsoft.XMLHTTP。非IE则需要XMLHttpRequest。
try {
  xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
  try {
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  } catch (e2) {
    try{
            xmlHttp = new XMLHttpRequest();
    catch(e3){
        alert("您的浏览器不支持AJAX技术");
    }
  }
}

function send(){
  var url = "/demo.action"
//注意下写的顺序,有时候顺序写错了会出错
  xmlHttp.open("GET", url, true);  //open函数说明见下方
  xmlHttp.onreadystatechange = callback; //调用回调函数对服务器进行响应
  xmlHttp.send(null);  //一般的内容用url发送信息即可,特殊需求可用send发送信息,这是url发送                        //信息的写法
}

//回调函数 取得服务器回传的信息
function callback{
if(xmlHttp.readystatechange
  if (xmlHttp.readyState == 4) {   //详见HTTP就绪状态
    if (request.status == 200){    //详见HTTP状态代码
      var response = xmlHttp.responseText;
    }
  }
}

open()参数
request-type:发送请求的类型。典型的值是 GET 或 POST,但也可以发送 HEAD 请求。
url:要连接的 URL。
asynch:如果希望使用异步连接则为 true,否则为 false。该参数是可选的,默认为 true。
username:如果需要身份验证,则可以在此指定用户名。该可选参数没有默认值。
password:如果需要身份验证,则可以在此指定口令。该可选参数没有默认值。
通常使用其中的前三个参数

HTTP就绪状态
HTTP 就绪状态表示请求的状态或情形。它用于确定该请求是否已经开始、是否得到了响应或者请求/响应模型是否已经完成。它还可以帮助确定读取服务器提供的响应文本或数据是否安全。在 Ajax 应用程序中需要了解五种就绪状态:

    0:请求没有发出(在调用 open() 之前)。
    1:请求已经建立但还没有发出(调用 send() 之前)。
    2:请求已经发出正在处理之中(这里通常可以从响应得到内容头部)。
    3:请求已经处理,响应中通常有部分数据可用,但是服务器还没有完成响应。
    4:响应已完成,可以访问服务器响应并使用它。

与大多数跨浏览器问题一样,这些就绪状态的使用也不尽一致。您也许期望任务就绪状态从 0 到 1、2、3 再到 4,但实际上很少是这种情况。一些浏览器从不报告 0 或 1 而直接从 2 开始,然后是 3 和 4。其他浏览器则报告所有的状态。还有一些则多次报告就绪状态 1。在上一节中看到,服务器多次调用 updatePage(),每次调用都会弹出警告框 —— 可能和预期的不同!

HTTP状态代码
404 该页面不存在
403 和 401  所访问数据受到保护或者禁止访问
200 一切顺利
3.prototype实现ajax
<script type="text/javascript" src="prototype.js"/>
function demo(){
     var url="demo.action";    //请求路径
     var pars="";//请求参数  如完整请求路径为http://www.demo.com/demo&d1=2,
                         //则url="http://www.demo.com/demo,pars="d1=2"
     var ajax=new Ajax.Request(url,{method:"post",parameters:pars,onComplete:callback});
  //callback为回调方法
      //var ajax=new Ajax.Updater(div,url,{method:"post",parameters:pars,evalScripts:true});
       //evaldemo=function(){}
     //使用 Ajax.Request 类还有一些其它的属性可以在这个对象里面定义和设置,如 asynchronous,可以为 true或 false 来决定 AJAX 对服务 器的调用是否是异步的(默认值是 true)。
    //还有另外两个有用的选项用来处理结果。我们可以在 onSuccess 选项处传入一个方法,当 AJAX 无误的执行完后调 ,相反的,也可以在 onFailure 选项处传入一个方法,当服务器端出现错误时调用。
}
function callback(request){    //回调方法需有一个参数
   var s=request.responseText;      //得到服务器返回信息
}
4.dojo实现ajax
<script type="text/javascript" src="dojo.js"/>
function demo() {
    var pars={actionSign:'firstlogin',userid:dojo.byId('userid').value};  //请求参数 格式为 {参数名:值}
    dojo.xhrPost({          //使用post请求  对应get请求的方法为xhrGet
        url:"demo.action",
        content:pars,
        preventCatch:true,         //不使用浏览器缓存  如果使用的话,两个一样的请求,浏览器会从缓存中调用上次请求的结果
        handleAs:'text',           //返回的数据格式
        load:function(data){    //成功请求后的动作
            callback(data);
        },
        error:function(response,ioArgs){     //请求错误后的动作
             alert("HTTP status code: " + ioArgs.xhr.status);
        }   
    });
}

热点排行