`
taody
  • 浏览: 99850 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

几种ajax的使用

    博客分类:
  • JS
阅读更多

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);
        }   
    });
}
分享到:
评论

相关推荐

    AJAX+PHP实现的几种效果

    AJAX和PHP的结合可以实现以下几种常见效果: 1. **表单无刷新提交**:用户填写表单后,通过AJAX发送数据到PHP,PHP验证数据并处理,然后返回反馈信息,无需刷新页面,用户可以即时看到结果。 2. **实时搜索**:...

    ajax使用简单demo

    本教程以一个简单的Ajax使用示例为基础,帮助初学者理解并掌握其基本概念和使用方法。 ### 1. Ajax的基本工作原理 Ajax的核心是JavaScript对象XMLHttpRequest,它允许JavaScript向服务器发送HTTP请求,并接收...

    ajax的详细使用

    Ajax(Asynchronous JavaScript and XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它的核心是JavaScript对象XMLHttpRequest,通过这个对象,我们可以向服务器发送异步请求,获取数据并动态更新...

    ajax ajax原理 ajax代码 ajax编程 ajax学习

    **Ajax(Asynchronous JavaScript and XML)技术是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,提升了用户体验。Ajax的核心是...

    Ajax的使用

    Ajax(异步JavaScript和XML)是一种在无需刷新整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新。这使得网页应用程序能够更加用户友好,更加响应迅速。在本...

    DWR的几种小事例Ajax

    在标题"**DWR的几种小事例Ajax**"中,我们可以理解为这个压缩包包含了几个DWR在实际应用中的小案例,这些案例可能涉及到不同的功能或应用场景,例如数据的异步加载、用户界面的动态更新等。这些例子对于初学者来说是...

    json ajax ajax框架

    在使用JSON和AJAX框架时,我们需要注意以下几点: 1. **数据格式化**:JSON格式规定了键值对的表示方式,如`{"key": "value"}`,确保数据在服务器和客户端之间能正确解析。 2. **跨域安全**:由于同源策略的限制,...

    使用Ajax完成的几项简单的实例

    总之,"使用Ajax完成的几项简单的实例"可以帮助初学者快速上手Ajax,通过实践理解Ajax的工作原理和应用场景,为构建更高效的Web应用打下坚实基础。通过不断地学习和实践,你将能熟练地运用Ajax来提升网页的交互性和...

    浅谈与AJAX相关的几种技术.pdf

    "浅谈与AJAX相关的几种技术" 本文将对与AJAX相关的几种技术进行简单介绍,包括XHTML、CSS、XML、XSLT和DOM等。 首先,AJAX技术丰富的功能、交互性以及快速的响应能力受到人们广泛青睐,但实际上AJAX是多种老技术的...

    ajax的使用及案例

    **Ajax(Asynchronous JavaScript...无论是使用原生JavaScript,还是借助像jQuery这样的库,Ajax都提供了一种强大且灵活的方式来实现异步数据交互。通过学习和实践这些案例,开发者可以进一步提升其在Web开发中的技能。

    ajax使用例子 包括返回xml

    Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器进行少量数据交换,使网页实现异步更新,大大提升了用户体验。在Web开发中,Ajax被...

    js jquery ajax的几种用法总结(及优缺点介绍)

    以下是根据文章内容整理的几种Ajax使用方法及其特点: ### 一、原生JavaScript方式 原生JavaScript中的Ajax实现需要借助于XMLHttpRequest对象。首先,我们需要创建一个XMLHttpRequest实例,然后通过open方法初始化...

    jquery ajax验证用户名是否存在几种方式

    总结来说,jQuery AJAX 提供了一种高效、灵活的方法来实现用户名存在的验证,可以通过多种响应格式与服务器进行通信。结合服务器端的处理,可以实现无刷新的用户体验,提高用户注册或登录的效率。

    Ajax Test Ajax Test

    - **XML**:最初,Ajax使用XML来传输数据,但现在更常见的是JSON格式,因为JSON更轻量且易于处理。 ### 2. 工作原理 Ajax的工作流程通常包括以下几个步骤: 1. **创建XMLHttpRequest对象**:在JavaScript中,通过...

    ajax使用实例

    ### AJAX使用实例详解 在现代Web开发中,异步JavaScript和XML(Asynchronous JavaScript and XML,简称AJAX)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。这项技术对于提升用户体验至关重要,...

    grails 使用ajax的例子

    本教程将深入探讨如何在Grails应用中使用Ajax,通过几个实际的例子来帮助理解其工作原理和常见用法。 1. **Ajax简介** Ajax(Asynchronous JavaScript and XML)的核心是JavaScript异步通信,它允许网页在不重新...

    ajax安装包,安装程序ajax

    Ajax(Asynchronous JavaScript and XML)是一种在无需重新加载整个网页的情况下,能够更新部分网页的技术。它通过在后台与服务器交换数据并更新部分网页内容,提高了用户体验,使得网页更具交互性和响应性。本...

    结合使用 Ajax 和 WebSphere Portal

    Ajax,全称Asynchronous JavaScript and XML,是一种用于创建快速、动态网页的技术。它允许网页在不重新加载整个页面的情况下与服务器交换数据并更新部分网页内容。Ajax的核心是XMLHttpRequest对象,它提供了在后台...

    基于ajax相册系统

    Ajax(Asynchronous JavaScript and XML)技术是一种在不刷新整个网页的情况下,能够更新部分网页内容的技术。这种技术的核心在于利用JavaScript进行客户端处理,与服务器进行异步数据交换,使得用户界面更加动态和...

    PHP AJAX JSONP实现跨域请求使用范例_ajax如何解决跨域请求

    在使用 JSONP 时,我们需要注意以下几点: 首先,我们需要确保服务器端的数据是安全的,以免被恶意攻击所利用。 其次,我们需要确保客户端的数据处理是正确的,以免出现错误。 最后,我们需要注意浏览器的限制,...

Global site tag (gtag.js) - Google Analytics