文本浏览器

ajax入门

发布者 : 管理员-Adler | 发布时间 : 2019-01-10 15:42:43
文章号 : 17 | 阅读量 : 21+1 | AAW值(?) : 0.05 (仅供参考)

 以前总是听别人说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无从运作。

XMLHttpRequest:XMLHttpRequest是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>
--------------------- 
原文:https://blog.csdn.net/y75475/article/details/70921279 





评论加载中...

+ 参与讨论