• 学无止境,学习AJAX(一)


    什么是AJAX?异步JavaScript和XML。

    AJAX是一种用于创建快速动态网页的技术。

    通过在后台与服务器进行少量数据交换,AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    传统的网页(不使用 AJAX)如果需要更新内容,必需重载整个网页面。

    不会AJAX=营养不良

    现在站点讲求交互~~~以前也用AJAX,但不系统不深入,所以还是老老实实系统学习一下吧。相信花的这点时间学习,对以后项目帮助是巨大的。

    先学习了一个简单的例子,通过点击按钮,更新页面上的DIV,熟悉一下AJAX运作。

    首先在页面上定义一个DIV标签,这个标签将负责信息显示,点击按钮后,通过LOADXMLDOX去返回服务器信息并显示在DIV标签里。

    <html>
    <body>
    
    <div id="myDiv"><h3>Let AJAX change this text</h3></div>
    <button type="button" onclick="loadXMLDoc()">Change Content</button>
    
    </body>
    </html>

     在页面的 head 部分添加一个 <script> 标签。该标签中包含了这个 loadXMLDoc() 函数:

    <head>
    <script type="text/javascript">
    function loadXMLDoc()
    {
    .... AJAX script goes here ...
    }
    </script>
    </head>

    OK了,这时候基本的AJAX应用架子搭出来了。

    在写LoadXMLDoc之前,还必须学习一下:XMLHttpRequest 对象

    所有现代浏览器均支持 XMLHttpRequest 对象(IE5 和 IE6 使用 ActiveXObject)。

    XMLHttpRequest 用于在后台与服务器交换数据。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。

    要使用对象就必须先 

    创建 XMLHttpRequest 对象

    :P 为了兼容老的IE~~~ 貌似马上微软都放弃IE了,吐槽一下。。。

    我们应该这样创建

    var xmlhttp;
    if (window.XMLHttpRequest)
      {// code for IE7+, Firefox, Chrome, Opera, Safari
      xmlhttp=new XMLHttpRequest();
      }
    else
      {// code for IE6, IE5
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }

    这样新老都能兼容了...

    创建好对象,那么就要考虑如何与服务器交互了。

    向服务器发送请求

    如需将请求发送到服务器,我们使用 XMLHttpRequest 对象的 open()send() 方法:

    举个例子:

    xmlhttp.open("GET","test1.txt",true);
    xmlhttp.send();
    方法描述
    open(method,url,async)

    规定请求的类型、URL 以及是否异步处理请求。

    • method:请求的类型;GET 或 POST
    • url:文件在服务器上的位置
    • async:true(异步)或 false(同步)
    send(string)

    将请求发送到服务器。

    • string:仅用于 POST 请求

    到底用 GET 还是 POST?

    与 POST 相比,GET 更简单也更快,并且在大部分情况下都能用。

    然而,在以下情况中,请使用 POST 请求:

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

    举个例子:

    xmlhttp.open("GET","demo_get.asp",true);
    xmlhttp.send();

    通过GET发送一些简单的信息:

    xmlhttp.open("GET","demo_get2.asp?fname=Bill&lname=Gates",true);
    xmlhttp.send();
  • 相关阅读:
    Maven记录
    TP-Link的config.bin的解码
    SLF4JLogFactory does not implement org.apache.commons.logging.LogFactory
    axis1.4调用WebService报找不到分派方法
    Spring在单例bean中使用session、request范围的bean
    使用spring-session同时用session范围bean的问题
    tomcat session共享快速入门
    Log4j配置spring+druid打印日志
    基于WebSocket的多人在线坦克大战demo
    IDEA将maven项目配置到本地tomcat中运行
  • 原文地址:https://www.cnblogs.com/vicen/p/5174986.html
Copyright © 2020-2023  润新知