AJAX

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>

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值