本帖最后由 小鲁哥哥 于 2018-1-12 16:43 编辑
好多小伙伴们都在询问异步请求，今天我们就来介绍一下ajax
一、简介
1、 什么是Ajax
AJAX = Asynchronous JavaScript and XML（异步的JavaScript 和 XML）。 AJAX 不是新的编程语言，而是一种使用现有标准的新方法。 AJAX 最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容。 AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。 就是利用javascript和xml实现与服务器异步交互的技术 xml：保存、传输 json：保存、传输
2、 发展历程 98年 微软 05年 谷歌 支持ajax技术的浏览器： • Google Chrome • Mozilla • Firefox • Internet Explorer • Opera • Konqueror • Safari
3、 运行原理 1） 传统的web应用程序工作原理
2） Ajax程序工作原理图
4、 快速入门 html [JavaScript] 纯文本查看 复制代码 window.onload = function(){
document.getElementById('btnOk').onclick = function(){
var xhr = new XMLHttpRequest();
xhr.open('get','demo01.php');
xhr.onreadystatechange = function(){
if(xhr.readyState == 4){
alert(xhr.responseText);
}
}
xhr.send(null);
}
} php： [PHP] 纯文本查看 复制代码 <?php[/align]
echo 'abc'; 如果想使用Ajax技术，必须首先创建一个Ajax对象。
二、Ajax对象
1、 创建Ajax对象 1）IE var xhr=newActiveXObject(“Microsoft.XMLHTTP”); [JavaScript] 纯文本查看 复制代码 <script>
//IE版本创建ajax对象
var xhr = new ActiveXObject('Microsoft.XMLHTTP');
alert(xhr.readyState);
</script> 2） W3C var xhr=new XMLHttpRequest(); [JavaScript] 纯文本查看 复制代码 <script>[/align] //W3C创建ajax对象
var xhr = new XMLHttpRequest();
alert(xhr.readyState);
</script> 2、 解决兼容性 无论客户端使用哪种浏览器，都可以得到相应的Ajax对象 创建一个public.js的公共文件，封装一个方法，返回正确的对象 1） 方法 [JavaScript] 纯文本查看 复制代码 <script>
var xhr;
if(window.navigator.userAgent.indexOf('MSIE')>0){
xhr = new ActiveXObject('Microsoft.XMLHTTP');
}else{
xhr = new XMLHttpRequest();
}
return xhr;
</script> 2） 方法
[JavaScript] 纯文本查看 复制代码 <script>
try{return new XMLHttpRequest();}catch(e){}
try{return new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}
alert('您的浏览器过于古老，请更换浏览器');
</script> public.js [JavaScript] 纯文本查看 复制代码 <script>
function createxhr(){
try{return new XMLHttpRequest();}catch(e){}
try{return new ActiveXObject('Microsoft.XMLHTTP');}catch(e){}
alert('您的浏览器过于古老，请更换浏览器');
}
</script> html：
[HTML] 纯文本查看 复制代码 <!DOCTYPE HTML>[/align]
<html>
<script type="public.js"></script>
<body>
<script type="text/javascript">
window.onload = function(){
document.getElementById('btnOk').onclick = function(){
var xhr = createxhr();
alert(xhr.readyState);
}
}
</script>
<input type="button" id="btnOk" value="确定">
</body>
</html> 3、 相关属性和方法 • onreadystatechange：当对象的状态码发生改变时所触发的回调函数 • readyState ：对象的状态码 0 ：当对象创建后 new 1 ：当对象初初始化之后 open 2 ：发送请求后 send 3 ：接收到数据 4 ：接收数据完毕后 • status ：对象的响应状态码 200 404 304 302 • statusText ：对象的响应状态文本 OK NOT FOUND • responseText ：对象的响应内容，字符串数据 text/html • responseXML ：对象的响应内容，xml数据 text/xml • open(method,url) ：初始化Ajax对象的信息 method：请求方式 get/post url：请求地址 • setRequestHeader(header,value) ：设置请求头信息 header：头的名字 value：头信息的值 当发送post请求时必须调用此方法 • send(content) ： 发送请求 只有执行到这个方法时，ajax对象才会真正发送请求 content：参数信息
代码示例：
Ajax对象的状态码
[HTML] 纯文本查看 复制代码 <!DOCTYPE HTML>[/align]<html>
<script type="public.js"></script>
<body>
<script type="text/javascript">
window.onload = function(){
document.getElementById('btnOk').onclick = function(){
var xhr = createxhr();
xhr.open('get','demo01.php');
xhr.onreadystatechange = function(){
if (xhr.readyState ==4) {
alert(xhr.responseText);
}
}
xhr.send(null);
}
}
</script>
<input type="button" id="btnOk" value="确定">
</body>
</html>
到此为止，ajax的基本原理就给大家介绍到这里，不知道大家对我今天讲解的ajax的原理理解的如何，有什么问题可以在下面留言哦~ 如果你想了解更多黑马课程请点击这里，如果你想加入黑马这个大家庭学习先进技术，广交天下好友！ 黑马程序员济南中心联系电话：0531-55696830
| 
收藏
淘帖
踩
