加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

AJAX 异步传输的WEB模式

发布时间:2020-12-16 00:51:16 所属栏目:百科 来源:网络整理
导读:如果有这么一种需求,即希望在不更新页面的情况下与服务器端进行数据交互,并且你的行为能够实时得到相应,那么就可以使用这篇博文要介绍的技术。 AJAX指异步JavaScript及XML(Asynchronous JavaScript And XML)。 AJAX是一种在2005年由Google推广开来的编

如果有这么一种需求,即希望在不更新页面的情况下与服务器端进行数据交互,并且你的行为能够实时得到相应,那么就可以使用这篇博文要介绍的技术。
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的核心内容,在架构上也没什么特殊之处,但却是很有用的。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

相关内容
推荐文章
站长推荐
热点阅读