zoukankan      html  css  js  c++  java
  • ajax入门 不要畏惧 很简单 进了门一切都好学多了

    以前总是听别人说ajax是多么的好,然后自己就去借了本书看,哇塞感觉好难哦,什么介绍JavaScript,html,css,还有很多一些东西。看的那个难啊,然后就是硬着头皮把它给看完了,但是就是缺少了一步最关键的步骤,运行它。理解它的原理。了解它的机制。去感觉它,触摸它。

        现在拿了一个实例自己去练习了一下,发现,嗯,可以感觉到它的存在了。可以触摸到了。好开心啊,还有那些很复杂的介绍知识我现在明白了,它们都是用来干什么的了。

        忽然发现原来有些东西,你是需要提前去体验它,感知它,这样才会有目标性,有兴趣,有动力的去学习。也明白了一些语言或者技术都喜欢用hello world的实例了,就是要让你去体验一下。

        那么下面就是体验ajax的实例了,

        别急先来了解原理,不知道原理,再经典的例子也调动不了你的兴奋神经

    转载的哦

    ---------------------------------------------------------------------------------------------------------------------------------

    什么是Ajax:Ajax(Asynchronous Javascrpt And Xml)是一种运用于浏览器的技术,它可以在浏览器与服务器之间使用异步通信机制进行数据通信,从而允许浏览器向服务器获取少量信息而不是刷新整个页面。Ajax并不是一种新的技术,或者说它不是一种技术,它只是多种技术的综合:javascript、Html、Css、Dom、Xml、XMLHttpRequest等技术按照一定的方式在协作中发挥各自的作用就构成了Ajax。

    Javascript,Html,Css这些都是一个WEB编程人员必备的知识,这里就不再介绍了,下面着重介绍一下XMLHttpRequest。可以说XMLHttpRequest是Ajax技术的一个核心,没有它Ajax无从运作。

    XMLHttpRequestXMLHttpRequest是XMLHttp组件的一个对象,使用XMLHttpRequest可以实现浏览器端与服务器端进行异步通信。通过HttpRequest对象,Web应用程序无需刷新页面就可以向服务器提交信息,然后得到服务器端的返回信息。

    如何使用XMLHttpRequest对象:使用XMLHttpRequest首先要先创建XMLHttpRequest对象。请看一个例子

    Copy code

    <script type="text/javascript">
    function createXmlHttp(){
            if(window.ActiveXObject){
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
                    //alert("IE XmlHttp");
            }
            else if(window.XMLHttpRequest){
                    xmlHttp=new XMLHttpRequest();
                    //alert("Other XmlHttp");
            }
    }
    </script>



    这是一个兼容三大浏览器的创建XMLHttpRequest方法。

    XMLHttpRequest的属性介绍: (常用的属性)

      (1). readyState:返回当前XMLHttp请求的状态,有5种:

          状态:0 :请求未初始化;
              状态:1 :请求已经建立;
              状态:2 :请求已经发送;
              状态:3 :请求处理中;
              状态:4 :响应已经完成。

      (2). onreadystatechange:readyState状态改变的事件触发器,用来指定当readyState发生变化时的处理事件。
      (3). responseText:将响应信息以字符串的形式返回。
      (4). responseXML:将响应信息格式化为XML文档的形式返回。
      (5). status:当前Http请求的状态,下面列几个重要的,经常用到的状态。

            状态值:200 :交易成功;
            状态值:404 :没有发现文件、查询或URI;
            状态值:500 :服务器产生内部的错误;

    XMLHttpRequest的方法:(常用的方法)

      (1). open(string method,string url,boolean asynch,string username,string password)方法将创建一个新的Http请求。

        method(请求方法):GET,POST和PUT(一般不用);
              url为:请求的地址
        asynch:可选参数,用来指定此请求是同步还是异步方式,默认为trun(异步);
            username,password:可选参数,服务器需要验证时用的,一般不用(插一句:俺没用过,嘿嘿……)。

    (2). send(content)方法用来向服务器发送具体的请求,如果没有内容要发送,content省略或为null。

    介绍了这么多了,有人一定会说有用吗?到底Ajax怎么用?这才是我们最关心的一件事?

    往下看 ↓↓↓

    对了,容我再说一句费话:一个不懂上面内容的程序员说自己是一个Ajax高手无异于打肿了脸充胖子。

         ajax+coldfusion

    //as.cfm

    <html>
    <head>
    <title>ajax实例</title>
    <script type="text/javascript">
    function createXmlHttp(){
        if(window.ActiveXObject){
                    xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            else if(window.XMLHttpRequest){
                    xmlHttp=new XMLHttpRequest();
            }       
    }

    function sendAjax(strUrl){
            createXmlHttp();
            xmlHttp.open("GET",strUrl,true);
        xmlHttp.onreadystatechange=process;
            xmlHttp.send(null);
    }

    function process(){
            if (xmlHttp.readyState==4){
                    if(xmlHttp.status==200){
                            alert(xmlHttp.responseText);
                    }
            }
    }

    function call_back(){
    var love=document.getElementById("love").value;
    var url="aas.cfm?love="+love;
    sendAjax(url);
    }
    </script>
    </head>
    <body>
    <center>
    <form name="f1">
    爱好:<input type="text" name="love" id="love" />
    <input type="button" name="submit" value="提交" onClick="call_back()" />
    </form>
    </center>
    </body>
    </html>

    //aas.cfm

    <html>
     <head>
     <title>ajax 2</title>
    </head>
     <body>
      <cfoutput>
       #FORM.Love#
      </cfoutput>
     </body>
    </html>

  • 相关阅读:
    微信小程序 列表渲染 wx:for
    微信小程序获取数据、处理数据、绑定数据关键步骤记录
    jq获取页面距离
    jq中哪个方法有回调函数
    轮播图jq版
    计算器
    计算机基础
    安装LAMP
    ubuntu安装最新版本的node.js
    blade模版之页面的嵌套
  • 原文地址:https://www.cnblogs.com/qianjilou/p/7097497.html
Copyright © 2011-2022 走看看