传智播客旗下技术交流社区北京校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

本帖最后由 小鲁哥哥 于 2018-1-12 16:43 编辑

【济南校区】PHP模块讲解之ajax

好多小伙伴们都在询问异步请求,今天我们就来介绍一下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应用程序工作原理
1.png

2)  Ajax程序工作原理图
2.png

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

分享至 : QQ空间
收藏

1 个回复

倒序浏览
学习,谢谢
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马
关闭

站长推荐 上一条 /4 下一条