AJAX基础总结

alex_gao

浏览: 81023 次
性别:
来自: 北京

最近访客更多访客>>

zj619

yczoutao

taotaow2n

mikeeee

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

Web前端

Ajax EXT 浏览器 IE Microsoft

一直在用Extjs，所用到的AJAX应用基本上有以下几种场景：
1.简单的数据请求，一般直接使用Ext.Ajax.requst()，以json的格式配置url、method、
params等参数信息。
2.列表大量数据的请求，需要依赖store进行数据的load。
3.在表单form数据提交时，可以选择使用方法1拼装表单配置项为params进行提交，也可以使用
Ext Form组件的submit方法自动根据name拼装params进行提交。

AJAX基础知识都遗忘了，重新回顾一下。
一、AJAX应用的创建过程：
1. 创建AJAX浏览器对象。
   由于IE使用的ActiveXObject，所以根据不同的浏览器创建不同的实现对象，以下为一种较完整的跨浏览器的编码：
var xmlHttp;
if (typeof XMLHttpRequest != "undefined") {
xmlHttp = new XMLHttpRequest();
}else if (window.ActiveXObject){
var aVersions = ["Msxml2.XMLHttp.5.0","Msxml2.XMLHttp.4.0",
                    "Msxml2.XMLHttp.3.0","Msxml2.XMLHttp",
                     "Microsoft.XMLHttp"];
for (var i=0; i<aVersions.length;i++){
try{
xmlHttp = new ActiveXObject(aVersions[i]);
break;
}catch (e){}
   }
}

2. 创建准备状态更新监听响应方法
   if(xmlHttp.readyState==4){
    if(xmlHttp.status==200){
          alert("OK");
        }
    }

3. 注册准备状态更新监听事件
   xmlHttp.onreadystatechange = functionName;

4. 创建Http请求并发送请求
xmlHttp.open(bstrMethod, bstrUrl, varAsync, bstrUser, bstrPassword);
xmlHttp.send(null);
参数:
        bstrMethod：数据传送方式，GET | POST(大小写不敏感).
        bstrUrl:请求的URL.
        varAsync:指定此请求是否为异步方式,默认为true.
        bstrUser:如果服务器需要验证，此处指定用户名(可省略).
        bstrPassword:验证密码(可省略).

5. 处理返回信息
responseStream 以Ado Stream对象的形式返回响应信息
responseText 将响应信息作为字符串返回
responseXML 将响应信息格式化为Xml Document对象并返回
responseBody 返回某一格式的服务器响应数据

二、HTTP准备状态和状态信息
1.readyState的取值：
0 (未初始化)
1 (正在装载)
2 (装载完毕)
3 (交互中)
4 (完成)

2.HTTP的状态：
100 Continue
101 Switching protocols
200 OK
201 Created
202 Accepted
203 Non-Authoritative Information
204 No Content
205 Reset Content
206 Partial Content
300 Multiple Choices
301 Moved Permanently
302 Found
303 See Other
304 Not Modified
305 Use Proxy
307 Temporary Redirect
400 Bad Request
401 Unauthorized
402 Payment Required
403 Forbidden
404 Not Found
405 Method Not Allowed
406 Not Acceptable
407 Proxy Authentication Required
408 Request Timeout
409 Conflict
410 Gone
411 Length Required
412 Precondition Failed
413 Request Entity Too Large
414 Request-URI Too Long
415 Unsupported Media Type
416 Requested Range Not Suitable
417 Expectation Failed
500 Internal Server Error
501 Not Implemented
502 Bad Gateway
503 Service Unavailable
504 Gateway Timeout
505 HTTP Version Not Supported

三、一个实例
<script type="text/javascript">
var xmlHttp;
function getName(){
    var url = document.getElementById('txtUrl');
    createHttpRequest();
    xmlHttp.onreadystatechange=state_change;
    xmlHttp.open("GET",url.value,true);
    xmlHttp.send(null);
}

function createHttpRequest(){
    if(window.ActiveXObject){
        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
    }else if(window.XMLHttpRequest){
        xmlHttp=new XMLHttpRequest();
    }
}
function state_change(){
    if(xmlHttp.readyState==4){
        if(xmlHttp.status==200){
          var resXml=xmlHttp.responseXML;
         ...//处理XML.
        }
    }
}
</script>

<BODY>
<input type="text" id="txtUrl"/>
<input type="button" onclick="getName()" value="Sub"/>
<div id="txtShowInfo"></div>
</BODY>

0
顶

0
踩

分享到：

Javascript对象编程总结

2010-11-10 11:28
浏览 1206
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论