• 企业400电话
  • 微网小程序
  • AI电话机器人
  • 电商代运营
  • 全 部 栏 目

    企业400电话 网络优化推广 AI电话机器人 呼叫中心 网站建设 商标✡知产 微网小程序 电商运营 彩铃•短信 增值拓展业务
    Ajax 框架学习笔记

    一.XMLHttpRequest 对象的三个重要的属性。

    onreadystatechange 属性

    onreadystatechange 属性存有处理服务器响应的函数。下面的代码定义一个空的函数,可同时对 onreadystatechange 属性进行设置:

    xmlHttp.onreadystatechange=function()

    {

      // 我们需要在这里写一些代码

      }

    readyState 属性

    readyState 属性存有服务器响应的状态信息。每当 readyState 改变时,onreadystatechange 函数就会被执行。

    这是 readyState 属性可能的值:

    状态

    描述

    0

    请求未初始化(在调用 open() 之前)

    1

    请求已提出(调用 send() 之前)

    2

    请求已发送(这里通常可以从响应得到内容头部)

    3

    请求处理中(响应中通常有部分数据可用,但是服务器还没有完成响应)

    4

    请求已完成(可以访问服务器响应并使用它)

    我们要向这个 onreadystatechange 函数添加一条 If 语句,来测试我们的响应是否已完成(意味着可获得数据):

    xmlHttp.onreadystatechange=function()

      {

      if(xmlHttp.readyState==4)

        {

        // 从服务器的response获得数据

        }

      }

    responseText 属性

    可以通过 responseText 属性来取回由服务器返回的数据。

     

     

    二.基本源码:

    var xmlHttp

     

    function showCustomer(str)

    {

    xmlHttp=GetXmlHttpObject();

    if (xmlHttp==null)

      {

      alert ("Your browser does not support AJAX!");

      return;

      }

    //设置请求响应的url

    var url="getcustomer_xml.asp";

    url=url+"?q="+str;

    url=url+"sid="+Math.random();

     

    xmlHttp.onreadystatechange=stateChanged;

    xmlHttp.open("GET",url,true);

    xmlHttp.send(null);

    }

     

    function stateChanged()

    {

    if (xmlHttp.readyState==4)

    {

    //responseText 以字符串返回 HTTP 响应

    //document.getElementById("txtHint").innerHTML=xmlHttp.responseText;

     

    //responseXML 以 XML 返回响应

    //服务器端ContentType 属性为 response 对象设置了 HTTP 内容类型。该属性的默认值是 "text/html"。服务器端返回responseXML 要把内容类型设置为 XML。

    var xmlDoc=xmlHttp.responseXML.documentElement;

    document.getElementById("companyname").innerHTML=

    xmlDoc.getElementsByTagName("compname")[0].childNodes[0].nodeValue;

    document.getElementById("contactname").innerHTML=

    xmlDoc.getElementsByTagName("contname")[0].childNodes[0].nodeValue;

    document.getElementById("address").innerHTML=

    xmlDoc.getElementsByTagName("address")[0].childNodes[0].nodeValue;

    document.getElementById("city").innerHTML=

    xmlDoc.getElementsByTagName("city")[0].childNodes[0].nodeValue;

    document.getElementById("country").innerHTML=

    xmlDoc.getElementsByTagName("country")[0].childNodes[0].nodeValue;

    }

    }

     

    function GetXmlHttpObject()

    {

    var xmlHttp=null;

    try

      {

      // Firefox, Opera 8.0+, Safari

      xmlHttp=new XMLHttpRequest();

      }

    catch (e)

      {

      // Internet Explorer

      try

        {

        xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

        }

      catch (e)

        {

        xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

        }

      }

    return xmlHttp;

    }

     

    三.Ajax框架:基于浏览器的应用框架,基于服务器端的应用框架。

    1.基于浏览器的应用框架一般分为两种:

    Aplication frameworks:提供了浏览器功能,但其最著名的还是在于通过窗口生成组件建立桌面GUI。 如:DOJO,qooxdoo,JavaFX,YUI,ExtJS(最开始的名字是yui-ext,因为扩展了yui的库,后来发展为可选择扩展jquery和prototype就改名字为ext),Flex(与ExtJS有很多相似),TIBET等。

    Infrastructural frameworks:提供基本的框架功能和轻便式浏览器端操作,让开发者去创建具体应用,主要功能包括:

    如:jQuery(代码量少),prototype,MooTools(功能比prototype强大,设计比prototype完善,从prototype中汲取很多有益的设计理念),Google AJAXSLT,Flash/JavaScript,等。

    2.基于服务器端的应用框架通常以下面两种方式工作(尽管它们根据不同的语言进行了分类) :

    HTML/JS Generation(HTML/JS生成):通过服务器端生成HTML和JS代码在传递给浏览器端进行直接运行 。如:Ext GWT。

    远程交互:JavaScript调用服务器端函数(例如调用Java函数)并返回给JavaScript的回调句柄,或者请求服务器端数据信息,例如Session信息,数据库查询等。 如DWR。

    您可能感兴趣的文章:
    • 无框架 Ajax分页(原创)
    • AJAX 图片展示框架56个 提升开发效率
    • AJAX 验证框架13个
    • PHP 开源AJAX框架14种
    • jquery 框架使用教程 AJAX篇
    • Jquery AJAX 框架的使用方法
    • 基于JQuery框架的AJAX实例代码
    • javascript之AJAX框架使用说明
    • asp.net省市三级联动的DropDownList+Ajax的三种框架(aspnet/Jquery/ExtJs)示例
    • 简单的前端js+ajax 购物车框架(入门篇)
    • 简单介绍不用库(框架)自己写ajax
    上一篇:ajax Suggest类似google的搜索提示效果
    下一篇:用ajax xml的数据读取的HelloWorld程序
  • 相关文章
  • 

    © 2016-2020 巨人网络通讯 版权所有

    《增值电信业务经营许可证》 苏ICP备15040257号-8

    Ajax 框架学习笔记 Ajax,框架,学习,笔记,Ajax,