AJAX(一)

最新推荐文章于 2024-03-05 23:02:03 发布

原创最新推荐文章于 2024-03-05 23:02:03 发布 · 305 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #javascript #xml #异步

PHP 同时被 2 个专栏收录

10 篇文章

订阅专栏

ajax

5 篇文章

订阅专栏

一、AJAX定义

asynchronous javascript and xml (异步javascript和xml)
其是可以与服务器进行(异步/同步)交互的技术之一。
ajax的语言载体是javascript。其是浏览器的一个技术。

最大的优点就是实现网页的局部更新，不刷新页面即可以取得数据。

二、AJAX的使用

1.AJAX对象的创建

1.1主流浏览器

var xhr = new XMLHttpRequest();

1.2IE浏览器

var xhr = new ActiveXObject(“Msxml2.XMLHTTP.6.0”);

==判断浏览器==
if(typeof (XMLHttpRequest )!==’undefined’)
{
var xhr = new XMLHttpRequest();
}
else
{
var xhr = new ActiveXObject(“Msxml2.XMLHTTP.6.0”);
}

2.对服务器发起请求

2.1创建一个新的http请求协议，设置请求的服务器地址，及请求方式

request.php为服务器端

xhr.open('get','./request.php');

2.2发送请求

get-null

post传输数据

xhr.send(null);

小节（下面是完整的全部代码）

request.html 发送ajax请求的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        //1.创建AJAX对象
        var xhr = new XMLHttpRequest();
        //2.创建一个新的http请求协议，并设置请求的服务器端的地址
        //设置get/post
        xhr.open('get','./request.php');
        //3.发送请求
        //get - null  post - 数据
        xhr.send(null);
    </script>
</head>
<body>

</body>
</html>

request.php 接受请求的页面


<?php
$handle = fopen('./1.txt','a');
fwrite($handle,'ssss');

每刷新一次request.html发送一次请求，1.txt的内容增加ssss.

3.接收服务器端的返回信息。

浏览器可以接受的信息，ajax都可以接收，如html,css,字符串,json等。

通过onreadystatechange 对Ajax状态进行监听，当状态为4时，用xhr.resposeText输出返回数据

完整接收实例代码如下

1.发送请求的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script>
        /*
            属性：
            responseText:一字符串形式接收服务器端返回的信息。
            readyState:ajax对象状态
                0：创建ajax对象
                1：有调用open方法
                2：有调用send方法
                3：只返回一部分数据
                4：数据完整返回
            onreadystatechange:是ajax的事件，在readyState状态发生变化的时候触发
            只能感应：1，2，3，4状态
            方法：
            open()创建新的http协议
            send()发送请求
         */
        //1.创建AJAX对象
        var xhr = new XMLHttpRequest();
        //在Ajax对象创建后进行监听
        xhr.onreadystatechange = function()
        {
            console.log(xhr.readyState);
            //随时感知ajax对象的状况
            if(xhr.readyState==4)
            {
                //console.log(xhr.responseText);
                document.getElementById('result').innerHTML = xhr.responseText;
            }
        };

       //2.创建一个新的http请求协议，并设置请求的服务器端的地址
        //设置get/post
        xhr.open('get','./request2.php');
        //3.发送请求
        //get - null  post - 数据
        xhr.send(null);

    </script>
</head>
<body>
    <div id="result"></div>
</body>
</html>

2.返回信息的页面(request2.php)

<?php
echo 'hello';

此程序应在html页面的id为result的标签中输出hello

4.get和post方式的ajax请求

区别：
1. 给服务器传递数据量
get方式的大小受限于浏览器，大部分为2k，chrome为8k。
post方式理论上无限制，php.ini中默认限制为8m
1. 安全方面，post更安全
2. 传递数据的形式不一样
get方式在url地址后边以请求字符串形式传递参数。
post方式是把form表单的数据给请求出来以xml形式传递给服务器。
get实例

1.get.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajaxget方式验证用户名</title>
    <script type="text/javascript">
        function checkname()
        {
            var name = document.getElementById('username').value;
            //将传递信息进行编码
            name = encodeURIComponent(name);
            var mes = document.getElementById('mes');
            //1.创建对象
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange= function()
            {
                if(xhr.readyState==4)
                {
                    mes.innerHTML = xhr.responseText;
                }
            };
            //2.发送请求
            xhr.open('get','./get.php?name='+name);
            xhr.send(null);
        }
    </script>
</head>
<body>
<!--测试光标-->
用户名：
    <input type="text" id="username" onblur="checkname()"><span id="mes"></span><br>
密码：
    <input type="password" id="password">
</body>
</html>

2.get.php

<?php
//假设存在以下用户名
$exists_name = array('Mike','peter');
//判断名字是否存在
if(in_array($_GET['name'],$exists_name))
{
    echo'用户名已经占用';
}
else
{
    echo'用户名可用';
}

验证的信息中出现特殊符号
例如 & 和 =
可以对该信息进行编码处理。
- js
IE浏览器中对中文不会自动编码，接收后会是乱码，也可以使用下面的代码进行编码。

encodeURIComponent();

php中用
urlencode()/urldecode()对特殊符号进行编码，反编码处理。
post实例

1.使用send(‘数据’);
2.特殊符号无需编码，但中文仍需编码。
3.可以同样使用get方式传输
4.用js设置文件头，将数据以xml方式传输

xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');

1.post.html

<!DOCTYPE html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajaxpost方式验证用户名</title>
    <script type="text/javascript">
        function checkname()
        {
            var name = document.getElementById('username').value;
            var mes = document.getElementById('mes');
            //把传递给服务器端的数据组织为请求字符串
            //将传递信息进行编码
            name = encodeURIComponent(name);
            var info = 'name='+name;
            //1.创建对象
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange= function()
            {
                if(xhr.readyState==4)
                {
                    //alert(xhr.responseText);
                    mes.innerHTML = xhr.responseText;
                }
            };
            //2.发送请求
            //post方式是form的样子传递，而form将数据组织为xml
            xhr.open('post','./post.php');
            xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
            xhr.send(info);
        }
    </script>
</head>
<body>
<!--测试光标-->
<form action="" method="post">
    用户名：
    <input type="text" id="username" onblur="checkname()"><span id="mes"></span><br>
    密码：
    <input type="password" id="password">
</form>
</body>
</html>

2.post.php

<?php
//print_r($_POST);

//假设存在以下用户名
$exists_name = array('Mike','peter');
//判断名字是否存在
if(in_array($_POST['name'],$exists_name))
{
    echo'用户名已经占用';
}
else
{
    echo'用户名可用';
}