Ajax笔记

Ajax全名 : Asynchronous Javascript and XML （异步的javascript和XML）

作用：实现数据交互，可以在无页面刷新的情况下，获取资源

应用：局部刷新、表单的实时验证 

 

代码实现：

　　1.在html同目录下，保存一个1.txt文件

　　2.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Ajax</title>
</head>
<body>
<input type="button" id="btn" value="按钮"/>
</body>
<script>
    oBtn = document.getElementById("btn");
    oBtn.onclick = function () {
        var xhr = new XMLHttpRequest();   //1
        xhr.open('get', '1.txt', true);          //2
        xhr.send();                                     //3
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {             //4
                if (xhr.status === 200) {            //5
                    alert(xhr.responseText);            //6
                } else {
                    alert('出错了，error：' + xhr.status);
                }
            }
        }
    }
</script>
</html>                                                                                    

代码各个部分解析：

　　1.创建一个ajax对象XMLHttpRequest，后面调用对象方法

　　2.open方法： 参数 （1）.打开方式 get、post （2）.地址 （3）.是否异步异步：阻塞模式，前面的代码不会阻碍后面代码的执行同步：阻塞模式，前面代码会影响后面代码执行

　　3.发送请求

　　4.onreadystatechange：当状态值改变的时候触发

　　　　readyState:ajax工作状态:
　　　　0    还没有调用open（）方法
　　　　1   以调用方法send（），正在发送请求
　　　　2   send（）方法完成，已收到全部响应内容
　　　　3   正在解析响应内容
　　　　4   响应内容解析完成，可以在客户端调用了

　　5.http状态值，当值为200时，表示请求成功。（http协议）

　　6.responseText：返回的内容被存放的这个属性下 字符串形式

　　　responseXML：返回的内容被存放的这个属性下 XML形式

open的打开方式：

　　get：

　　　　

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <form action="1_get.php">
        <input type="text" name="username"/>
        <input type="text" name="age"/>
        <input type="submit" value="submit"/>
    </form>
</body>
</html>

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);

$username = $_GET['username'];
$age = $_GET['age'];

echo "你的名字：{$username}，年龄：{$age}";

　　　　　　

　　　　　　1.把数据名称和数据对应的数据值用等号链接，若果有多项数据，后把数据组合，用 & 链接，然后把数据放到url？后面传到指定页面

　　　　　　　　数据通过url传递，在php页面更改username和age的数值，刷新，页面也会发生相应改变。

　　　　　　　　
　　　　　　2.因为url长度限制原因，不要通过get方式传递过多的数据。
　　　　　　3.可以被历史纪录，记录下来
　　　　　　4.格式：字符串

　　　　　　5.容易出现的问题：页面的缓存问题，在第二次点击按钮式，不会请求，而会从缓存读取。

　　　　　　　　　可以在url后面加一个时间戳

xhr.open('get', '1_get.php?username=&age=30&'+new Date().getTime(), true);

　　post： 

　　　　js

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="button" id="btn" value="按钮"/>
</body>
<script>
    oBtn = document.getElementById("btn");
    oBtn.onclick = function () {
        var xhr = new XMLHttpRequest();
        xhr.open('post', '1_post.php', true);   //post方式数据放在send（）方法，作为参数传递
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');   //声明数据发送的编码类型
        xhr.send('username=leo&age=30');
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4) {
                if (xhr.status === 200) {
                    alert(xhr.responseText);
                } else {
                    alert('出错了，error：' + xhr.status);
                }
            }
        }
    }
</script>
</html>

　　　　php

<?php
header('content-type:text/html;charset="utf-8"');
error_reporting(0);
//$_REQUEST
$username = $_POST['username'];
$age = $_POST['age'];

echo "你的名字：{$username}，年龄：{$age}";

　　　　　　　　

　　　　　　　　1.发送的数据形式一样，但是传输方式不一样
　　　　　　　　2.理论上无限制
　　　　　　　　3.通过请求头发送，理论不会被缓存
　　　　　　　　4.格式有很多，无缓存问题