AJAX

最新推荐文章于 2021-08-05 15:48:45 发布

zhao_crystal

最新推荐文章于 2021-08-05 15:48:45 发布

阅读量187

点赞数

CC 4.0 BY-SA版权

分类专栏： web

本文链接：https://blog.youkuaiyun.com/zhao_crystal/article/details/81840823

web 专栏收录该内容

5 篇文章

订阅专栏

1 初识ajax

Ajax 的本质：无刷新，让js能够主动发送http请求，

（使用客户端通过http请求向服务器发送请求）

客户端语言：

是能够在用户设备上运行的语言，html，css，js，安卓，ios

服务端语言：

是在服务器运行的语言，php,jsp,python

1.2 快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="1.2.php" method="get">
        <!--method="get" 表示如果使用这个表单发送http请求，时使用get的方式-->
        <input type="text" name="name" value=""><br>
        <input type="submit" value="提交">

    </form>

</body>
<script>
   var input_e = document.getElementsByTagName('input')[0];
   input_e.onblur = function () {
       var v = this.value;
        //创建ajax对象
       var xhr = new XMLHttpRequest();
       xhr.onreadystatechange = function(){
           if(xhr.readyState == 4){
               alert(xhr.responseText);
           }
       }
       xhr.open('get', '1.2.php?name='+v);
       xhr.send();
   }
</script>
</html>

<?php
echo 1

2 ajax对象

2.1获取对象

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
<script>
    // W3c 的标准方式
    var xhr = new XMLHttpRequest();
    console.log(xhr)
</script>
</html>

将创建的对象封装到一个js中（创建公用文件，获取ajax对象）

cxhr.js

function cXHR() {
    try{
        // W3C标准方式
        var xhr = new XMLHttpRequest();
        }catch (e) {
        var xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    return xhr
}

function gete(id) {
    return document.querySelector(id)

}

2.2 ajax 的属性和方法

2.2.1 属性

status：

1系列：在实验环境下使用

2系列：代表请求成功，返回成功，服务器成功的理解了客户端请求的含义。

3系列：客户端请求了服务器，但是服务器并无法处理它需要跳转到哪

4系列：客户端请求的东西不存在，或是你没有权限请求我

5系列：服务器端的错误

StatusText: 时域status一一对应的，如status：200， StatusText：OK

2.2.2 方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="cxhr.js"></script>
</head>
<body>

</body>
<script>
    var xhr = cXHR()
    // alert(xhr)
    xhr.onreadystatechange = function(){
        console.log(xhr.readyState);
    }
    xhr.open('get', '1.2.php');
    xhr.send();
</script>
</html>

2.2.3 同步和异步（由open的第三个参数决定）

同步：一件事一件事的做

异步：多个事情可以同时做

eg:点餐

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="cxhr.js"></script>
</head>
<body>

</body>
<script>
    function f1() {
        var xhr = cXHR();
        xhr.onreadystatechange = function () {
            if (xhr.readyState == 4){
                alert(xhr.responseText);
            }
        }
        // true 为异步请求，默认；false为同步。
        xhr.open('get', '99.php', true);
        xhr.send();
    }
    function f2() {
        alert(2)

    }
    f1();
    f2();

</script>
</html>

3 判断用户名是否可用--案例

失去焦点，判断用户名是否可用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" name="" value="" id="name">
<span id="tip"></span><br>
<input type="button" value="注册">

</body>
<script>
    //获取文本框
    var inp = document.getElementById('name');
    //绑定事件
    inp.onblur = function () {
        var v = this.value;//获取文本内容
        //获取ajax对象
        var xhr = new XMLHttpRequest();
        //监听状态变化事件
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){ //接收数据完成
                //根据服务器返回值修改页面内容
                var back_value = xhr.responseText;

                if(back_value==1){
                    // alter('有')
                    var h = '<font color="red">用户名已被占用</font>'
                }else{
                    // alert('没有')
                    var h = '<font color="green">恭喜你，用户名可用</font>'
                }
                document.getElementById('tip').innerHTML = h;
            }
        }
        //设置请求参数
        xhr.open('get', '03.php?name='+v);
        //发送请求
        xhr.send();


    }
</script>
</html>

<?php
//获取客户端数据
$name = $_GET['name'];

//链接数据库
mysql_connect('localhost', 'root', '');
//选择数据库
mysql_query('use test');
//设置字符集
mysql_query('set names utf8');

//sql语句
$sql = "'select * from test where name='$name'";
//发送sql语句查询
$res = mysql_query($sql);
$z = mysql_fetch_assoc($res);// 获取查询内容
//var_dump($z)
//为客户端返回数据
if($z){
echo 1;
}else{
echo 0;
}

4 缓存问题

4.1 缓存问题的产生

当使用IE浏览器时，向同一个URL发送多次请求时，会产生缓存问题；

缓存设计的初衷是为了加快网站的响应速度。

4.2 客户端解决缓存问题

改变nrl参数，解决url产生的缓存问题

4.3 在php中设置响应头禁用客户端缓存

case：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" name="" value="" id="name">
<span id="tip"></span><br>
<input type="button" value="注册">

</body>
<script>
    //获取文本框
    var inp = document.getElementById('name');
    //绑定事件
    inp.onblur = function () {
        var v = this.value;//获取文本内容
        //获取ajax对象
        var xhr = new XMLHttpRequest();
        //监听状态变化事件
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){ //接收数据完成
                //根据服务器返回值修改页面内容
                var back_value = xhr.responseText;

                if(back_value==1){
                    // alter('有')
                    var h = '<font color="red">用户名已被占用</font>'
                }else{
                    // alert('没有')
                    var h = '<font color="green">恭喜你，用户名可用</font>'
                }
                document.getElementById('tip').innerHTML = h;
            }
        }
        //设置请求参数
        // xhr.open('get', '04.php?name='+v+'&ff='+Math.random());
        xhr.open('get', '04.php?name='+v+'&_='+new Date().getTime());
        //发送请求
        xhr.send();
    }
</script>
</html>

<?php
header("Cache-Control: no-cache");

//获取客户端数据
$name = $_GET['name'];

if($name == 'admin'){
echo 1;
}else{
echo 0;
}

5. ajas发送post请求

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" name="" value="" id="name">
<span id="tip"></span><br>
<input type="button" value="注册">

</body>
<script>
    //获取文本框
    var inp = document.getElementById('name');
    //绑定失去焦点事件
    inp.onblur = function () {
        var v = this.value;//获取文本内容
        //获取ajax对象
        var xhr = new XMLHttpRequest();
        //监听状态变化事件
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){ //接收数据完成
                //根据服务器返回值修改页面内容
                var back_value = xhr.responseText;

                if(back_value==1){
                    // alter('有')
                    var h = '<font color="red">用户名已被占用</font>'
                }else{
                    // alert('没有')
                    var h = '<font color="green">恭喜你，用户名可用</font>'
                }
                document.getElementById('tip').innerHTML = h;
            }
        }
        //设置请求参数
        xhr.open('post', '05.php');
        //POST 中必须设置请求头
        xhr.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
        //发送请求
        xhr.send('name='+v);


    }
</script>
</html>

<?php
header("Cache-Control: no-cache");

//获取客户端数据
$name = $_POST['name'];

if($name == 'admin'){
echo 1;
}else{
echo 0;
}

5.1 Ajax中get和post请求的区别：

（1）传参方式不同

Get在地址尾部使用？拼接，多个参数使用&链接

Post在send方法中传参，多个参数使用&链接

（2）请求头

Post必须设置请求头；

Xhr.setRequestHeader(‘Content-type’, ‘application/x-www-form-urlencoded’);

Get 不需要设置

（3）参数类型

Get只能传输简单类型：数字，字符串

Post 除了数字和字符串以外还可以传输二进制数据（比如上传文件，图片，其解析后就是二进制文件）

5.2 Ajax 实现无刷新文件上传

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<form action="05.2.php" method="post" enctype="multipart/form-data">
    <!--// enctye 相当于设置了请求头-->
    <input type="file" name="img" value=""><br>
    <input type="submit" value="上传">
    <input type="button" value="ajax上传">
</form>
</body>
<script>
    var btu = document.getElementById('btu');
    btu.onclick = function () {
        var xhr = new XMLHttpRequest();
        var fd = new FormData(document.getElementsByTagName('form')[0]);// 能够将整个form表单打包
        console.log(fd)
        xhr.onreadystatechange = function(){
            if(xhr.readyState == 4){
                if(xhr.responseText == 1){
                    alert('上传成功')
                }else{
                    alter('上传失败')
                }
            }
        }
        xhr.open('post', '05.2.php');
        xhr.send(fd);//使用form作为值发送请求

    }
</script>
</html>

<?php
echo move_uploaded_file($_FILES['img']['tmp_name'],'./'.$FILES['img']['name'])?1:0;
//移动文件，将用户上传到网上的文件移动到本地

6. ajax 与xml

6.1 php中生成XML

06.1xml.php

<?php
mysql_connect('localhost', 'root', '');
mysql_query('use test');
mysql_query('set names utf8');

//SQL 语句
$sql = 'select * from test';
$res = mysql_query($sql);

while($row = mysql_fetch_assoc($res)){
    $xml .='<admin>';
    $xml.= '<id>'.'$row['id'].'</id>';
    $xml.= '<name>'.$row['name'],'<name>';
    $xml.= '<age>'.$row['age'].'<age>';
    $xml .='<admin>'
}
$xml.='</root>';
header('Content-type:text/xml');
echo $xml;

6.2 AJAX获取XML数据

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="inp" value="获取xml">
</body>
<script>
    var inp = document.getElementById('inp');
    inp.onclick = function () {
        var xhr = new XMLHttpRequest;
        if(xhr.readyState == 4){
            // alert(xhr.responseText);
            // alert(xhr.responseXML);
            //返回DOM对象
            var d = xhr.responseXML;
            // console.log(d.getElementsByTagName('name')[0].innerHTML);
            //获取所有的name元素的值
            //拿到dom对象后，之前怎么操作HTML，现在怎么操做XML对象
            var n = d.getElementsByTagName('name');
            for(var i=0;i<=n.length;i++){
                // console.log(n[i].childNodes[0].nodeValue);
                console.log(n[i].innerHTML);
            }

        }
    }
    xhr.open('get', '06.1xml.php');
    xhr.send();
</script>
</html>

6.3 JS解析XML

PHP中解析XML

JS中解析XML

xml

<?xml version="1.0" encoding="utf-8" ?>
<root>
    <admin>
        <name>路飞</name>
        <age>17</age>
    </admin>
    <admin>
        <name>娜美</name>
        <age>16</age>
    </admin>

</root>