• 第一次使用ajax


    今天终于把ajax搬到了自己的博客中,从开始听说ajax到现在第一次使用它,估计隔了一年多。

    使用ajax的好处就是不刷新网页也能与后台进行交互,当然数据是小批量的。运用的场景有很多,比如百度搜索中的提示,博客中的留言功能等等。感觉就是用户体验非常好,我的博客中原来的留言功能提交后,是要重新加载网页的,本来服务器就是低配版,如果再刷一遍,代价很大啊。于是果断采用了传说中的ajax。下面是我参考的文档。

    http://www.runoob.com/ajax/ajax-tutorial.html   菜鸟教程  特点 简洁  适合入门。在这里只记录几点注意事项。

    1 ajax可以请求json,xml,txt等等静态文件,不一定要是php,java等等后台语言文件。

    2 post和get什么时候使用

    与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。然而,在以下情况中,请使用 POST 请求:

    • 无法使用缓存文件(更新服务器上的文件或数据库)
    • 向服务器发送大量数据(POST 没有数据量限制)
    • 发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠

    3 如过在使用post请求时,如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:

    xmlhttp.open("POST","ajax_test.html",true);
    xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
    xmlhttp.send("fname=Henry&lname=Ford");

    4 get方式,为了避免得到的是缓存的结果,建议如下操作。

    xmlhttp.open("GET","demo_get.html?t=" + Math.random(),true);
    xmlhttp.send();

    5 获得响应

    responseText     获得字符串形式的响应数据。

    responseXML     获得 XML 形式的响应数据。

    如过获得是XML的数据,还要进行XML解析

    6 如果存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。

    该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    var xmlhttp;
    function loadXMLDoc(url,cfunc)
    {
    if (window.XMLHttpRequest)
      {// IE7+, Firefox, Chrome, Opera, Safari 代码
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// IE6, IE5 代码
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
    xmlhttp.onreadystatechange=cfunc;
    xmlhttp.open("GET",url,true);
    xmlhttp.send();
    }
    function myFunction()
    {
    loadXMLDoc("/try/ajax/ajax_info.txt",function()
      {
      if (xmlhttp.readyState==4 && xmlhttp.status==200)
        {
        document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
        }
      });
    }
    </script>
    </head>
    <body>
    
    <div id="myDiv"><h2>使用 AJAX 修改文本内容</h2></div>
    <button type="button" onclick="myFunction()">修改内容</button>
    
    </body>
    </html>
  • 相关阅读:
    Ext.widgetsform(上)BasicForm/Field/Checkbox/Radio/HtmlEditor/TextField
    EXT核心API详解(二)Array/Date/Function/Number/String
    Think of Ext2.0
    EXT核心API详解(七)Ext.KeyNav/KeyMap/JSON/Format/DelayedTask/TaskRunner/TextMetrics/XTemplate
    Ext架构分析(2)理解Ext.util.Observable
    Ext.dataStore
    Ext架构分析(1)理解Ext.util.Event
    Spket Eclipse插件使用教程
    Ext.widgetsform(下)ComboBox,TimeField,DateField,TriggerField,TextArea,NumberField
    Ext.menu.Menu
  • 原文地址:https://www.cnblogs.com/djlxs/p/5691992.html
Copyright © 2020-2023  润新知