我的第一个Ajax学习例子
2010-07-28 08:45
253 查看
最近空闲时间较多,最近两年多都忙于其它的事情没有空学习,落伍了。
对于Ajax的理解:
就是使用JavaScript这种脚本语言与服务器进行交互,不过,看例子,IE5.5就支持,不知道为什么最近几年才流行起来?
要点:不用同的浏览器XMLHTTP创建方式不同。
IE使用Msxml2.XMLHTTP,如果是IE5.5使用Microsoft.XMLHTTP
火狐,chrome浏览器应该使用XMLHttpRequest,它们好像是一个妈生的。
Opera不知道使用什么方式。下载的这个html说明文件没有。
这个简单的例子,主要使用了两种方式进行了对比,每当页面加载时,就重新当前系统时间,主要是对比两种方式的区别
对于Ajax来说,主要分为两步:
第一步是根据当前客户端浏览器,创建XMLHTTP对象,请求服务端的资源
第二步是XMLHTTP请求完成时,执行的操作。
首先如何创建XMLHTTP对象
function GetXmlHttpObject(handler)
{
var objXmlHttp=null
if (navigator.userAgent.indexOf("Opera")>=0)
{
alert("Opear 不支持")
return;
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP"
}
try
{
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler
return objXmlHttp
}
catch(e)
{
alert("错误,不能创建")
return;
}
}
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler
return objXmlHttp
}
}
请求服务端资源
function Ajaxjs(str)
{
if (str.length>0){
var url="ajax.aspx?q=" +str
xmlHttp=GetXmlHttpObject(stateChanged)
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
else{
document.getElementById("ajaxOut").innerHtml=""
}
}
请求成功执行
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
document.getElementById("ajaxOut").innerHTML=xmlHttp.responseText
}
}
其中服务端的ajax.aspx执行相应的处理,并使用Response对象输出结果就行了。
例子比较简单和丑陋,作为巩固学习使用。
对于Ajax的理解:
就是使用JavaScript这种脚本语言与服务器进行交互,不过,看例子,IE5.5就支持,不知道为什么最近几年才流行起来?
要点:不用同的浏览器XMLHTTP创建方式不同。
IE使用Msxml2.XMLHTTP,如果是IE5.5使用Microsoft.XMLHTTP
火狐,chrome浏览器应该使用XMLHttpRequest,它们好像是一个妈生的。
Opera不知道使用什么方式。下载的这个html说明文件没有。
这个简单的例子,主要使用了两种方式进行了对比,每当页面加载时,就重新当前系统时间,主要是对比两种方式的区别
对于Ajax来说,主要分为两步:
第一步是根据当前客户端浏览器,创建XMLHTTP对象,请求服务端的资源
第二步是XMLHTTP请求完成时,执行的操作。
首先如何创建XMLHTTP对象
function GetXmlHttpObject(handler)
{
var objXmlHttp=null
if (navigator.userAgent.indexOf("Opera")>=0)
{
alert("Opear 不支持")
return;
}
if (navigator.userAgent.indexOf("MSIE")>=0)
{
var strName="Msxml2.XMLHTTP"
if (navigator.appVersion.indexOf("MSIE 5.5")>=0)
{
strName="Microsoft.XMLHTTP"
}
try
{
objXmlHttp=new ActiveXObject(strName)
objXmlHttp.onreadystatechange=handler
return objXmlHttp
}
catch(e)
{
alert("错误,不能创建")
return;
}
}
if (navigator.userAgent.indexOf("Mozilla")>=0)
{
objXmlHttp=new XMLHttpRequest()
objXmlHttp.onload=handler
objXmlHttp.onerror=handler
return objXmlHttp
}
}
请求服务端资源
function Ajaxjs(str)
{
if (str.length>0){
var url="ajax.aspx?q=" +str
xmlHttp=GetXmlHttpObject(stateChanged)
xmlHttp.open("GET",url,true)
xmlHttp.send(null)
}
else{
document.getElementById("ajaxOut").innerHtml=""
}
}
请求成功执行
function stateChanged()
{
if (xmlHttp.readyState==4 || xmlHttp.readyState=="complete") {
document.getElementById("ajaxOut").innerHTML=xmlHttp.responseText
}
}
其中服务端的ajax.aspx执行相应的处理,并使用Response对象输出结果就行了。
例子比较简单和丑陋,作为巩固学习使用。
相关文章推荐
- 开始学习Ajax,第一个例子就出大问题(本地化运行)
- Fortran 90学习之旅(一)Visual Fortran 6.5 的安装与第一个例子
- ajax+json+jquery第一个mvc例子
- SSH与SSM学习之Struts201——介绍与环境搭建和第一个例子
- 最近了解Socked编程之一,记录第一个学习的例子源码
- 6.4: 编写第一个Ajax例子
- ajax 第一个例子
- ajax学习:一个简单的例子
- Ajax - 基础教程第八章例子学习一
- SpringBoot学习-(1)第一个小例子
- MXnet实战深度学习1--MXnet的安装与第一个例子
- 学习ajax+css 做的一个奇偶板块例子
- ajax学习笔记二:javascript实现命名空间(ajax封装类的例子)
- Hibernate入门学习(3)----第一个Hibernate例子
- Web学习第一个小例子-慕课网企业案例
- 第一个前台用AJAX做的例子
- Caffe学习笔记3:caffe跑第一个mnist的例子
- Ajax - 基础教程第八章例子学习四
- NGUI研究院之开始学习制作第一个例子(一)
- 【学习备份】ajax添加小例子