当前位置: 首页 > 最新文章 > 正文

什么是ajax技术

1.什么是ajax技术ajax技术的中文意思为:异步js和xml.所以其实ajax是有两种老技术共同开出了一朵鲜花.①什么是异步和同步呢?1.什么是ajax技术ajax技术的中文意思为:异步js和xml.所以其实ajax是有两种老技术共同开出了一朵鲜花.①什么是异步和同步呢?同步:一般来说,我们的客户端请求服务器,都是等待服务器响应完毕后,才可以继续发出下一个请求的.异步:不需要等待服务器响应完毕

admin

1.什么是ajax技术ajax技术的中文意思为:异步js和xml.所以其实ajax是有两种老技术共同开出了一朵鲜花.①什么是异步和同步呢?

什么是ajax技术

1.什么是ajax技术

ajax技术的中文意思为:异步js和xml.

所以其实ajax是有两种老技术共同开出了一朵鲜花.

①什么是异步和同步呢?

同步:一般来说,我们的客户端请求服务器,都是等待服务器响应完毕后,才可以继续发出下一个请求的.

异步:不需要等待服务器响应完毕,可以一口气连续发几个请求.

另外,同步的刷新往往是刷新整一个页面,因为服务器响应的是一个html文档.

然而,ajax的异步刷新可以是局部的刷新,同时服务器返回的是数据,至于数据的格式可以是xml,也可以是json.早期是使用xml格式的,所以才有ajax这个名字,异步的js和xml,但是现在的ajax更加喜欢json格式的数据.

而且,还有一般原来的js是不可以发出请求的,只好在客户端里面玩耍.但是在ajax里面的js是可以发出请求的.

2.ajax的应用场景

其实ajax的应用场景还是挺多的,简单来说,只要是需要异步请求的,不想等待的,实现局部刷新的,可以提高的用户体验的,就可以考虑使用ajax技术

3.ajax的优缺点

优点:

①可以实现异步请求,局部刷新,提高用户体验

②由于请求返回的都是数据,不是一个页面,减低了服务器的压力

缺点:

①不是什么任何场景都是可以使用ajax的,要考虑是否应该使用ajax

②利用ajax技术,比没有ajax技术来言,访问服务器的次数多了,增大了服务器的压力.

4.使用ajax的四大步骤

①获取XMLHttpRequest对象,

大部分的浏览器都支持这句代码:

 var xmlHttp=new XMLHttpRequest();

但是个别浏览器不太一样,

例如

IE6.0

 var xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");

IE5.5

 var xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");

一般我们可以编写一个函数来实现上面三种情况

 function createXmlHttpRequest(){ try{ return new XMLHttpRequest(); }catche(e){ try{ return new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ return new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ alert("嘿,哥们,你用的到底是啥浏览器啊?"); throw e; } } } }

②打开跟服务器的连接,注意这时候还没有发送数据.

xmlHttp.open();

需要传入三个参数

1.请求的参数,可以是GET或者POST

2.请求的URL,例如/hello2/a,servlet

3.请求是否为异步,若为true,则是异步,否则同步

xmlHttp.open("GET","/hello2/a.servlet",true);

③发送数据

xmlHttp.send(null)

注意,必须给出参数值,否则部分浏览器会出现错误

参数值表示要发送的数据.

假如是get请求,则是获取数据,不需要请求体,所以为null

假如是post请求,则是提交数据,需要请求体,则给出请求体,关于post方式的ajax,后面给出例如详细说明

④由于ajax是异步请求,所以不知道什么时候会有响应,所以要注册监听器.

监听xmlHttp的一个事件 onreadystatechange;

xmlHttp一共有五个状态,分别是:

0 刚开始创建,还没有调用open方法

1 调用了open方法,还没有调用send方法

2 调用了send方法

3 服务器开始响应,但是响应还没结束

4 服务器响应结束

如何获取xmlHttp的状态

var state=xmlHttp.readyState;

如何获取服务器的响应码

var status=xmlHttp.status;

如何获取服务器的响应内容

var content=xmlHttp.responseText;获取文本格式的内容var content=xmlHttp.responseXml; 获取xml文件的内容,返回的是一个document对象

第四个步骤给出一个代码案例

 xmlHttp.onreadystatechange=function (){ if( xmlHttp.readyState==4&&xmlHttp.status==200){ var content= xmlHttp.responseText; }}

案例片段演示

 <script type="text/javascript"> function createXmlHttpRequest(){ try{ return new XMLHttpRequest(); }catche(e){ try{ return new ActiveXObject("Msxml2.XMLHTTP"); }catch(e){ try{ return new ActiveXObject("Microsoft.XMLHTTP"); }catch(e){ alert("嘿,哥们,你用的到底是啥浏览器啊?"); throw e; } } } } window.onload=function (){ var btn=document.getElementById("idbtn1"); btn.onclick=function (){ var xmlHttp=createXmlHttpRequest(); xmlHttp.open("GET","<c:url value='/a.servlet'/>",true); xmlHttp.send(null); xmlHttp.onreadystatechange=function (){ if( xmlHttp.readyState==4&&xmlHttp.status==200{ var content= xmlHttp.responseText; var h1=document.getElementById("idh1"); h1.innerHTML=content; } } } </script>

②发送post的案例

注意发送post请求有以下关键点 1.xmlHttp.open("POST",,,,,); 2.xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded"); 3.xmlHttp.send("username=xiaoming&password=123");

③文本框的字体变化的事件为 textBox.onBlur

获取文本框的文本内容为 textBox.value

【本文为e安在线合作讲师“刘建恒”原创稿件,转载请联系e安在线】

什么是ajax技术


上一篇: RAR文件怎么解压?只需要安装一个小工具,就可以轻松完成 下一篇:福彩胆码图谜(3d蜂巢胆码配图226期)
返回顶部