ajax交互原理

ajax：异步javascript和xml，是指一种创建交互式网页应用的网页开发技术，ajax技术的核心操作是用xmlHttpRequest（简称XHR）对象进行异步数据处理，所谓异步，即通过ajax，javascript无需等待服务器的响应，而是在等待服务器响应时执行其它脚本，当响应就绪后对响应进行处理

作用：在ajax中主要利用javascript的XHR对象来传递用户界面上的数据到服务端并返回结果。XHR对象用来响应通过HTTP传递的数据，一旦数据返回到客户端就可以立刻使用DOM技术操作数据展现到页面，目的是能更好更快以及交互性更强的web应用程序。

与传统web请求对比：

优点：传统网页如果需要更新内容，需要重载整个页面；ajax应用可以仅向服务端发送并取回所需数据，通过在后台与服务端进行少量数据交换，实现网页异步更新。避免在网络上发送那些没有改变过的信息。就是能在不更新整个页面的前提下维护数据，就是允许浏览器与服务器进行通信而无需刷新页面，这使得web应用程序能够更为迅捷地回应用户动作。

缺点：ajax用XHR对象做出的请求不会记录在浏览器的历史中。如果你的用户习惯使用浏览器的"后退"按钮在web应用中进行导航，就可能会产生问题。

一个ajax的标准流程图如下：

1、客户端浏览器->通过js触发事件

2、创建XHR对象

3、与服务器建立连接->设置连接方式->发送数据

4、注册回调方法

5、执行回调->判断响应结果

具体示范代码详情如下：

1、客户端事件触发ajax启动

<input type="text" id="search" />

<script type="text/javascript">

var searchInput = document.getElementById("search");

searchInput.addEventListener("onblur",showHint,false);

</script>

2、创建XHR对象的一个实例

<script type="text/javascript">

function showHint(){

var xmlHttp;

//创建XMLHttpRequest对象

if(window.XMLHttpRequest){

//针对IE7+，Firefox，Chrome，Opera，Safari

xmlHttp = new XMLHttpRequest();

}else{

//针对IE6，IE5

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

}

var txtValue = this.value;

}

</script>

3、与服务器建立连接->设置连接方式->发送数据

//建立连接，设置为GET发送

xmlHttp.open("GET","/ajax/getHint.jsp?q=" + txtValue,true);

//发送数据

xmlHttp.send();

4、注册回调方法

xmlHttp.onreadystatechange = ajaxCallback;

5、执行回调

function ajaxCallback(){

//响应就绪时

if(xmlHttp.readyState == 4 && xmlHttp.status == 200){

searchInput.value = xmlHttp.responseText;

}

}

总结：

1、ajax灵活性在于动态改变局部内容，如果数据量特别大，建议采用后端程序与数据库来操作

2、与POST相比，GET比较简便，大部分情况可用

有以下情况使用POST方式

a) 无法使用缓存文件（更新服务器上的文件或数据库）

b) 向服务器发送大量数据（POST没有数据量限制）

c) 发送包含未知字符的用户输入时，POST比GET方式稳定可靠

（编辑：李大同）

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