AJAX 异步传输的WEB模式

前端之家收集整理的这篇文章主要介绍了AJAX 异步传输的WEB模式前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

如果有这么一种需求,即希望在不更新页面的情况下与服务器端进行数据交互,并且你的行为能够实时得到相应,那么就可以使用这篇博文要介绍的技术。
AJAX指异步JavaScript及XML(Asynchronous JavaScript And XML)。
AJAX是一种在2005年由Google推广开来的编程模式,不是一种新的编程语言,而是一种使用现有标准的新方法
通过AJAX,你的JavaScript可使用JavaScript的XMLHttpRequest对象来直接与服务器进行通信。通过这个对象,你的JavaScript可在不重载页面的情况与Web服务器交换数据。
AJAX在浏览器与Web服务器之间使用异步数据传输(HTTP 请求),这样就可使网页从服务器请求少量的信息,而不是整个页面

Ajax的核心是JavaScript对象XmlHttpRequest,用于在后台与服务器交换数据。
XmlHttpRequest使您可以使用JavaScript向服务器提出请求并处理响应,而不阻塞用户,即实现异步请求。
几乎所有的浏览器(IE7+、Firefox、Chrome、Safari、Opera)都支持XMLHttpRequest对象(IE5和IE6使用的是ActiveXObject)。

下面就来学习一下这一编程模式。
1. 创建XmlHttpRequest对象:
下面是一个XmlHttpRequest对象的创建方法

1 //该函数为不同浏览器创建不同的对象。
2 functionGetXmlHttpObject()
3 {
4 varxmlHttp=null;
5 try
6 {
7 // Firefox,Opera 8.0+,Safari
8 newXMLHttpRequest();
9 }
10 catch(e)
11 12 //Internet Explorer
13 14 15 ActiveXObject("Msxml2.XMLHTTP");
16 }
17 (e)
18 19 "Microsoft.XMLHTTP"20 21 22 returnxmlHttp;
23 }

2. 向服务器端发送请求:
刚才创建了过XHR对象,现在就利用它向服务器端发生请求。

xmlHttp.open("GET",url,truexmlHttp.send();

其中open(method,async)用于声明请求类型:
参数method是Get或Post;
参数url是请求位置;
参数async是异步与否,true异步,false同步。
send(string)用于发送请求:
参数string仅用于Post,Get不需要参数。

3. 获取来自服务器的响应:
来自服务器的响应有两种形式:字符串类型responseText和xml类型responseXML。
这里只说第一种,利用这一句就把服务器响应的内容传回到当前页面

document.getElementById("myDiv").innerHTML
=xmlhttp.responseText;

4. onreadystatechange事件:
readyState属性存有XMLHttpRequest的状态信息,从0到4共五种状态。每当readyState改变时,就会触发onreadystatechange事件,即调用对应的函数
0: 请求未初始化
1: 服务器连接已建立
2: 请求已接收
3: 请求处理中
4: 请求已完成,且响应已就绪

//每当XHR对象的状态发生改变,则会调用函数,来处理页面
//比如,将返回数据显示页面中,需要填充到某个元素中。
xmlhttp.onreadystatechange=()
if(xmlHttp.readyState==4 || xmlHttp.readyState=="complete")
"myid"=xmlHttp.responseText
5.Ajax是前端技术,将1-4所做的写在页面加载的js文件中即可实现。
后端的PHP是没什么特别的,正常处理请求即可。
展示的页面上要添加把事件(如键盘或鼠标事件)同处理函数对应起来。

<form>
inputtype="text"id"txt"onkeyup"show(this.value)">
</div>The response will be here.</div>

以上就是ajax的核心内容,在架构上也没什么特殊之处,但却是很有用的。

猜你在找的Ajax相关文章