主页 > 专题教程 > javascript > js基础 >
来源:自学PHP网 时间:2018-02-08 10:24 作者: 阅读:次
[导读] Ajax是Asynchronous JavaScript And XML的简写,它是一种能够向服务器请求额外数据而不需要卸载页面的技术。...
Ajax是Asynchronous JavaScript And XML的简写,它是一种能够向服务器请求额外数据而不需要卸载页面的技术。通俗来说,Ajax是一种可以使客户端和服务器进行异步交互,在不刷新整个页面的情况下,对页面进行局部更新的技术。 Ajax最早是在2005年2月,由Adaptive Path公司的Jesse James Garrett提出的概念,它出现在Garrett的文章"Ajax:A new approach to Web Applications"中。在这篇文章描述了混合使用XHTML,CSS,javascript,DOM,XMLHttpRequst进行Web开发将会成为一种新的趋势。 Ajax并不是一种新的编程语言,而是一种用于创建更好更快以及交互性更强的Web应用程序的技术。Ajax的核心是JavaScript对象XmlHttpRequest。该对象在Internet Explorer 5中首次引入,它是一种支持异步请求的技术。之后,Ajax被Google发扬光大,成为WEB前端最热门的技术之一。 一个完整的Ajax请求的过程应该分为以下3个步骤:
Ajax的核心是JavaScript的XmlHttpRequest对象。不同的浏览器创建XMLHttpRequest对象的方法是不一样的。这一区别主要体现在IE5和IE6浏览器和其它浏览器上。在其它的现代浏览器中,创建XMLHttpRequest对象的方法是使用JavaScript的内置对象 // 非IE5和IE6浏览器 xhr = new XMLHttpRequest(); 对于IE6浏览器,要使用 // IE6+浏览器 xhr = new XMLHttpRequest(ActiveXObject("Msxml2.XMLHTTP")); 对于IE5浏览器,要使用 // IE5+浏览器 xhr = new XMLHttpRequest(ActiveXObject("Microsoft.XMLHTTP")); 为了屏蔽浏览器之间的差异,我们可以使用工厂方法来创建 function createXMLHttpRequest(){ var xhr; //IE5和IE6 if(window.ActiveXObject){ try{ xhr = new ActiveXObject(Microsoft.XMLHTTP) }catch(e){ xhr = new ActiveXObject("Msxml2.XMLHTTP"); } }else if(window.XMLHttpRequest){ //其它主流浏览器 xhr = new XMLHttpRequest(); }else{ alert("你使用的浏览器不支持XMLHttpRequest!"); return false; } return xhr; } 然后可以通过下面的方法来获取 var xhr = createXMLHttpRequest(); 在获取了 1、onreadystatechange 属性
xhr.onreadystatechange=function(){ // 我们需要在这里写一些代码 } 2、readyState 属性
例如下面的代码: xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ // 进行相应的处理 } }
3、responseText 属性 我们可以通过 xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ //获取相应的文本:通过xhr的responseText可以获取文本信息,包括xml的标签 alert(xhr.responseText); } } 如果需要获取XML的信息,可以使用 在完成上的工作之后,我们就可以向服务器发送AJAX请求了。要想把请求发送到服务器,我们就需要使用
open(method,url,async) 三个参数的含义如下:
例如我们向服务器发出一个AJAX请求可以如下书写代码: xhr.open("GET","test1.html",true);
一个完整的Ajax请求的代码如下所示:下面的代码是在服务器的同一个文件夹中有a.html和b.html两个文件。下面是a.html中执行的JavaScript脚本文件。它通过Ajax请求获取b.html的文本内容(包括HTML标签)。 /***** a.html文件中的JavaScript脚本 ******/ // 获取XMLHttpRequest对象 function createXMLHttpRequest(){ var xhr; //IE5和IE6 if(window.ActiveXObject){ try{ xhr = new ActiveXObject(Microsoft.XMLHTTP) }catch(e){ xhr = new ActiveXObject("Msxml2.XMLHTTP"); } }else if(window.XMLHttpRequest){ //其它主流浏览器 xhr = new XMLHttpRequest(); }else{ alert("你使用的浏览器不支持XMLHttpRequest!"); return false; } return xhr; } // 创建XMLHttpRequest对象 var xhr = createXMLHttpRequest(); // 处理Ajax请求 xhr.onreadystatechange = function(){ if(xhr.readyState == 4 && xhr.status == 200){ //获取相应的文本:通过xhr的responseText可以获取文本信息,包括xml的标签 alert(xhr.responseText); } } // 发送Ajax请求 xhr.open("GET","b.html",true); xhr.send(); |
自学PHP网专注网站建设学习,PHP程序学习,平面设计学习,以及操作系统学习
京ICP备14009008号-1@版权所有www.zixuephp.com
网站声明:本站所有视频,教程都由网友上传,站长收集和分享给大家学习使用,如由牵扯版权问题请联系站长邮箱904561283@qq.com