zoukankan      html  css  js  c++  java
  • 非常不错的ajax原理总结

    在工作中用了Ajax N多次了,也看过一些相关方面的书籍,也算是认识了它,但是一直没有认真总结和整理过相关的东东,失败!
    近有闲情,将之总结如下:
    【名称】
    Ajax是Asynchronous JavaScript and XML(以及 DHTML 等)的缩写。
    详情请移步Ajax: A New Approach to Web Applications
    【原理】
    简单一些,就是通过使用XmlHttpRequest对象向服务器发送异步请求,获取返回的数据,并使用Javascript和DOM操作页面内的元素,从而达到改变页面内容的目的。
    其中XmlHttpRequest对象是关键,因为它支持异步请求。XMLHttpRequest是完全用来向服务器发出一个请求的。它所包含的方法和属性如下所示:
    方法:
    abort() 导致当前正在请求被取消
    getAllResponseHeaders() 返回一个字符串,包含氖 响应标头的名称和值
    getResponseHeader(name) 返回指定的响应标头的值
    open(method, url, async, username, password) 设置请求的方法和目标URL。请求可以声明为同步的(可选),也可以给需要基于窗口谁的请求而提供用户名和口令(可选)
    send(content) 发起带有指定内容(可选)的请求
    setRequestHeader(name, value) 利用指定的名称和值,设置一个请求标头
    属性:
    onreadystatechange 指派在请求的状态发生变化时所使用的事件处理程序
    readyState 一个整数值,指示请求的状态如下:
    0—-未初始化
    1—-正在加载
    2—-已加载
    3—-交互
    4—–完成
    responseText 在响应里所返回的内容
    responseXML 如果内容是XML,就根据内容而创建XML DOM
    status 从服务器所返回的响应状态码。例如:200表示成功,404表示未找到,参考HTTP规范
    statusText 响应所返回的状态文本消息
    对于此对象其它介绍请移步:XMLHttpRequest概述
    【所包含的技术】
    · 基于XHTML和CSS标准的表示;
    · 使用Document Object Model进行动态显示和交互;
    · 使用XMLHttpRequest与服务器进行异步通信;
    · 使用JavaScript绑定一切;
    · 使用XML和XSLT;交换和操作数据。
    以上的技术都是一些广泛使用了的技术,都属于比较旧的技术,ajax是这几种技术的结合体。
    【简单实例】

     1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
     2 <html>
     3 <head>
     4 <title></title>
     5 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
     6 <script type="text/javascript">
     7 function ajax() {
     8 var xmlHttp;
     9 // 依据对象判断,而不是依据浏览器
    10 if(window.XMLHttpRequest) {
    11 xmlHttp=new XMLHttpRequest();//mozilla浏览器
    12 }else if(window.ActiveXObject){
    13 try{
    14 xmlHttp=new ActiveXObject("Msxmlx2.XMLHTTP"); //IE老版本
    15 }catch(e){}
    16 try{
    17 xmlHttp=new ActiveXObject("Microsoft.XMLHTTP"); //IE新版本
    18 }catch(e){}
    19 
    20 if(!xmlHttp){
    21 window.alert("不能创建XMLHttpRequest对象实列");
    22 return false;
    23 }
    24 }
    25 
    26 if (!xmlHttp) {
    27 alert("创建XMLHttpRequest对象失败!");
    28 return false;
    29 }
    30 
    31 xmlHttp.open('POST', 'index.php?get_a=2&get_b=3', false);
    32 xmlHttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded;charset=UTF-8;');
    33 xmlHttp.send("post_a=1&post_b=2");
    34 xmlHttp.onreadystatechange = function() {
    35 alert(xmlHttp.readyState);
    36 }
    37 if(xmlHttp.readyState == 4){ //判断对象状态
    38 var content_obj = document.getElementById("content");
    39 content_obj.innerHTML = "正在处理数据...";
    40 if(xmlHttp.status == 200){ //信息已经成功返回,开始处理信息
    41 var returnStr = xmlHttp.responseText;
    42 content_obj.innerHTML = returnStr;
    43 }else{ //页面不正常
    44 content_obj.innerHTML = "您所请求的页面存在异常!";
    45 }
    46 }
    47 }
    48 
    49 
    50 </script>
    51 </head>
    52 <body>
    53 <input type="button" value="ajax" onclick="ajax();" />
    54 <div id="content">ajax内容显示区</div>
    55 </body>
    56 </html>



    切记:当发起一个POST请求时,需要对报头 Content-type(内容类型)进行设置。这样,服务器就知道如何来处理上传的内容。如果要模拟通过HTTP协议的POST方式来发送表单,则应将内容类型设置为application/x-www-form-urlencoded。
    【优点】
    页面无刷新,用户体验好;
    异步,不打断用户操作,响应速度快;
    “按需取数据”,减少冗余请求,减轻服务器负担;
    基于标准化的并被广泛支持的技术,无需额外的插件;
    可以使数据和表现分离;
    【存在的问题】
    一些设备还不支持
    开发成本提高
    使back按钮失效,用户操作后无法返回;
    对流媒体支持没有flash之流好;
    对搜索引擎不友好
    破坏程序的异常机制
    存在一些安全问题,暴露了一些程序接口和数据逻辑

    转自:http://www.phppan.com/2009/09/ajax-summary/

  • 相关阅读:
    前端开发之初探五
    前端开发之初探四
    前端开发之初探三
    漫谈
    前端工程师的发展之路
    SVG
    前端开发之初探一
    前端开发之初探二
    详解浏览器缓存
    webStroage案例
  • 原文地址:https://www.cnblogs.com/naledao/p/3671024.html
Copyright © 2011-2022 走看看