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

AJAX基础总结

阅读更多
  一直在用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
分享到:
评论

相关推荐

    ajax基础知识总结

    学习ajax基础知识,让自己的前端技术更上一层,学会与后台交互

    ajax基础学习资料

    总结的ajax基础精简资料总结的ajax基础精简资总结的ajax基础精简资总结的ajax基础精简资

    ajax基础学习总结及例子

    ajax基础学习总结及例子,很好用的,希望能帮助到别人

    Ajax学习笔记个人总结

    根据个人学习Ajax的过程总结,整理了Ajax相关基础知识点,对Ajax的使用有较详细的介绍,通过个别举例,可以快速了解Ajax的功能,比较适合初学者入门。

    ajax技术总结,主要是基础方面的知识

    AJAX和HTML5的简介,主要是一些基础知识方面的

    实验五 AJAX开发及JSP验证码

    1.在实验四基础上使用AJAX技术实现异步登录功能。(40分) Ajax异步的特点为:多个事件并行发生,事件互不影响,请求之后,不刷新整张页面,页面不动,只是刷新页面的局部。异步数据获取技术 XMLHttpRequest对象方法...

    使用Ajax和Web Service 重构网上书店总结ppt

    使用Ajax和Web Service 重构网上书店的基础知识总结

    Ajax实战中文版

     《Ajax实战》是目前Ajax领域最为全面深入的一本著作,其中不仅有对于基础知的的介绍,还有对于Ajax开发中重大架构问题的深入探讨,总结了大量Ajax开发中的设计模式,并讨论了框架、安全性与性能等。书中提供了几个...

    Ajax及JSON基础

    Ajax及JSON基础,个人总结,相当简单,经过测试,运行正确!

    Java基础知识点总结.docx

    无论是工作学习,不断的总结是必不可少的。只有不断的总结,发现问题,弥补不足,才能长久的进步!!Java学习更是如此,知识点总结目录如下: 目录 一、 Java概述 3 二、 Java语法基础 5 数据类型 5 运算符号 14 ...

    ajax 基础教程大合集

    ajax 的基础教程,这是当初作者学习的时候,花了很大的心思找到的,现在总结在了一起。打包一下。分享一下。分是有点高。但个人感觉对的起着资源。由于上传限制,只能先发这些。请见谅。

    ajax总结.doc

    一些基础的ajax点,帮助大家在使用ajax的同时,能够更深入的了解和体验。有了Ajax之后,就可以实现在网页不跳转不刷新的情况下,在网页后台提交数据,部分更新页面内容。

    AJAX实战电子书下载

    本书是目前Ajax领域最为全面深入的一本著作,其中不仅有对于基础知识的介绍,还有对于Ajax开发中重大的体系架构问题的深入探讨,总结了大量Ajax开发中的设计模式,并讨论了框架、安全性与性能等等。书中提供了几个...

    《AJAX实战》AJAX In Action.

    本书是目前Ajax领域最为全面深入的一本著作,其中不仅有对于基础知识的介绍,还有对于Ajax开发中重大的体系架构问题的深入探讨,总结了大量Ajax开发中的设计模式,并讨论了框架、安全性与性能等等。书中提供了几个...

    Ajax相关内容的总结

    XML的相关内容,基础。

    学习ajax必看ppt--总结的很全面看描述

    01_Ajax基础;02_使用Ajax发送异步请求;03_在请求和响应中使用XML;04_使用JSON进行数据传输;对XML文档进行分析

    Ajax学习资料+实例

    我总结的Ajax学习资料,希望对大家有所帮助!

    AJAX技术原理和使用方法

    该PPT总结了AJAX技术的一些原理和使用方法

    《Ajax实战》高清PDF.part05(分九部分,全部下载才能解压)

    本书是目前Ajax领域最为全面深入的一本著作,其中不仅有对于基础知识的介绍,还有对于Ajax开发中重大的体系架构问题的深入探讨,总结了大量Ajax开发中的设计模式,并讨论了框架、安全性与性能等等。书中提供了几个...

    Ajax实战.part2.rar

    本书是目前Ajax领域最为全面深入的一本著作,其中不仅有对于基础知识的介绍,还有对于Ajax开发中重大的体系架构问题的深入探讨,总结了大量Ajax开发中的设计模式,并讨论了框架、安全性与性能等等。书中提供了几个...

Global site tag (gtag.js) - Google Analytics