AJAX

来源：互联网发布：mini ninjas for mac 编辑：程序博客网时间：2024/06/15 18:16

ajax是什么？

参考百科给出的解释：

AJAX即“Asynchronous JavascriptAndXML”（异步JavaScript和XML），是指一种创建交互式网页应用的网页开发技术。

AJAX = 异步 JavaScript和XML（标准通用标记语言的子集）。

AJAX 是一种用于创建快速动态网页的技术。

通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
举几个ajax发挥作用的例子：
1.现在普遍的用户注册，当我们输入用户名时，其实页面就已经与后台进行交互了，这样可以第一时间判断我们申请的用户名是否已被申请过，而不必等我们提交时再交互，极大提高了用户体验。
2.现在流行的点赞，当我们点赞时，后面显示的点赞数量会自动加1却没有刷新整个页面，这也是ajax的功劳。

ajax基础
XMLHttpRequest对象
1.创建XMLHttpRequest对象
request=new XMLHttpRequest();——针对Firefox，Opera，Safari浏览器
xmlHttp=new ActiveXObject(Msxml2.XMLHTTP);——IE6+
xmlHttp=new ActiveXObject(Microsoft.XMLHTTP);——其他
2.请求服务器
（1）readyState属性
此属性只读

（2）onreadystatechange属性
一般在readyState属性值改变时触发，使用方法如下：

xmlhttp.onreadystatechange=function()  {  if (xmlhttp.readyState==4 && xmlhttp.status==200)    {    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;    }  }

具体请参见：点击打开链接
（3）response属性
获取服务器的返回数据
（4）open()方法
三个参数分别是：
GET/POST
URL
异步处理标志
（5）send()方法
综合运用以上几点：

var request=new XMLHttpRequest();request.open("GET","1.txt",true);request.onreadystatechange=function(){if(request.readyState==4){alert(request.response);}}request.send(null);

3.处理响应

<body><script type="text/javascript">var xmlHttp = null;function readyStateChangeHandle() {if(xmlHttp.readyState == 4 && xmlHttp.status == 200) {document.getElementById("god").innerHTML = xmlHttp.responseText;}}function ajaxFunction(the_request_url) {try {xmlHttp = new XMLHttpRequest();} catch(e) {try {xmlHttp = new ActiveXObject("Msxml2.XMLHTTP");} catch(e) {try {xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");} catch(e) {alert("您的浏览器不支持ajax");return false;}}}if(xmlHttp) {xmlHttp.open('GET', the_request_url, true);xmlHttp.onreadystatechange = readyStateChangeHandle;xmlHttp.send();} else {alert("连接失败");}}</script><!--这里1.txt放在html文件同目录下，内容是：good luck sir--><input type="button" id="test" value="test" onclick="javascript:ajaxFunction('1.txt')" /><br/><br/><div style="border:1px solid black;width:300px;height:250px;" id="god">test ajax</div></body>

4.ajax跨域请求——JSONP
参见另一篇博客点这里

0 0