以前总是听别人说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对象。请看一个例子
<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>