Chinaunix首页 | 论坛 | 博客
  • 博客访问: 2534335
  • 博文数量: 245
  • 博客积分: 4125
  • 博客等级: 上校
  • 技术积分: 3113
  • 用 户 组: 普通用户
  • 注册时间: 2009-03-25 23:56
文章分类

全部博文(245)

文章存档

2015年(2)

2014年(26)

2013年(41)

2012年(40)

2011年(134)

2010年(2)

分类: JavaScript

2013-03-24 15:48:34

通过阅读《疯狂Ajax讲义(第3版)——jQueryExt JSPrototypeDWR企业应用前端开发实战(含CD光盘1张)试读样章》,本文总结了使用Extjs,jquery,javascript进行ajax请求的方法。实际上,不论是使用extjs还是jquery,最终都是使用的javascript中的XMLHttpRequest对象。ajax请求的参数一般包括:请求方式(POST或GET),请求的URL,请求的参数,请求成功或失败时的回调函数。

ExtJS, 使用Ext.Ajax 类进行ajax请求。下面是一个例子:

点击(此处)折叠或打开

  1. Ext.Ajax.request({
  2.     url: 'ajax_demo/sample.json',//ajax请求的url
  3.     success: function(response, opts) {//当HTTP响应200 OK,就会调用success回调函数
  4.        var obj = Ext.decode(response.responseText);//decode http响应文本,一般是json字符串
  5.        console.dir(obj);
  6.     },
  7.     failure: function(response, opts) {//当请求失败,执行该回调函数
  8.        console.log('server-side failure with status code ' + response.status);
  9.     }
  10. });

Jquery中,使用函数$.ajax $.get $.post进行异步请求,下面是一个例子:

点击(此处)折叠或打开

  1. /* 以post方式请求,将响应的结果显示在id为result的div中 */
  2.     $.ajax({
  3.       url: "test.php",
  4.       type: "post",
  5.       data: values,
  6.       success: function(){
  7.           alert("success");
  8.            $("#result").html('submitted successfully');
  9.       },
  10.       error:function(){
  11.           alert("failure");
  12.           $("#result").html('there is error while submit');
  13.       }
  14.     });


javascript方式,使用XMLHttpRequest对象进行ajax请求,下面是一个例子:
使用XMLHttpRequest对象发送请求的基本步骤如下:
创建一个XMLHttpRequest的引用
告诉XMLHttpRequest对象,哪个函数会处理XMLHttpRequest对象状态的改变,为此要设置onreadystatechange属性
指定请求的属性。open()
将请求发送给服务器。send()
xmlHttp.responseText将响应提供为一个串

点击(此处)折叠或打开

  1. var xmlHttp;
  2.    //创建一个XMLHttpRequest对象
  3.     function createXMLHttpRequest()
  4.     {
  5.       if(window.ActiveXObject)
  6.       {
  7.          xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
  8.       }
  9.       else if(window.XMLHttpRequest)
  10.       {
  11.         xmlHttp = new XMLHttpRequest();
  12.       }
  13.     }
  14.     
  15.     //开始一个请求
  16.     function startRequest()
  17.     {
  18.       createXMLHttpRequest();
  19.       xmlHttp.onreadystatechange = handleStateChange;
  20.       xmlHttp.open("GET","simpleResponse.xml",true);
  21.       xmlHttp.send(null);
  22.     }
  23.     
  24.     //当xmlHttp对象的内部状态发生变化时候,调用此处理函数
  25.     //一旦接受到相应(readyState为4)
  26.     function handleStateChange()
  27.     {
  28.       if(xmlHttp.readyState == 4)
  29.       {
  30.          if(xmlHttp.status == 200)
  31.          {
  32.            alert("The server replied with:"+xmlHttp.responseText);
  33.            document.getElementById("result").innerHTML = xmlHttp.responseText;
  34.          }
  35.       }
  36.     }

更多关于ajax的参考:http://blog.chinaunix.net/uid/21209537/sid-143571-list-1.html




阅读(3750) | 评论(2) | 转发(1) |
给主人留下些什么吧!~~

liuweihug2014-05-06 10:19:18

楼主写的不错。这个文章也不错。ajax请求原理及jquery $.ajax封装全解析 。 
 suchso.com/projecteactual/web-browser-ajax-callback-jquery.html

CU博客助理2013-04-08 15:00:58

嘉宾点评:在 web 编程中,ajax 是提高 web 应用程序的易用性、响应的快速性的重要手段;也是使 web 应用能够日益强大,可以与传统桌面应用相媲美的主要技术。tkchks 在本篇博文中介绍了最流行的两个框架 ExtJS 和 JQuery 中如何使用 ajax 技术的基本方法,并且进一步讲解了其背后的原理,即 XMLHttpRequest 对象的使用。使读者能够在方便的使用框架提供的简便方法的同时,了解其实现机制。如果能再展开一点,完整的介绍一个两个框架的全部 ajax 对象,及不同浏览器的 XMLHttpRequest 对象的异同,对读者的帮助就会更大。期待作者的更多文章。
(感谢您参与“原创博文评选”获奖结果即将公布)