黑马程序员技术交流社区

标题: 【济南校区】PHP模块讲解之ajax [打印本页]

作者: 小鲁哥哥 时间: 2018-1-10 11:52
标题: 【济南校区】PHP模块讲解之ajax
本帖最后由小鲁哥哥于 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应用程序工作原理

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

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>

      //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>

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>

<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

作者: pysl 时间: 2018-7-25 07:11
学习，谢谢

欢迎光临黑马程序员技术交流社区 (http://bbs.itheima.com/)

黑马程序员IT技术论坛 X3.2