认识Ajax

ajax 也是技术名词的缩写：
Asynchronous：异步的
JavaScript：JavaScript语言
And：和、与
XML：数据传输格式
Ajax本质：使用客户端通过HTTP请求向服务器发送请求
客户端语言：
是能够在用户设备上运行的语言：html css JS安卓IOS
服务端语言：
是在服务器运行的请言：PHP JSP python

快速入门

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <form action="1.php" method="get">
        <input type="text" name="name" id=""><br>
        <input type="submit" value="submit">
    </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.php?name=?'+v);
        xhr.send(); 
    }
</script>
</html>

ajax对象

获取对象

通过上一节我们发现，想要使用ajax的一系列功能，我们就必须先得到ajax对象

ajax的属性和方法

属性

readyState：Ajax状态码
0：表示对象已建立，但未初始化，只是new成功获取了对象，但是未调用open方法
1：表示对象已初始化，但表发送，调用了open方法，但是未调用send方法
2：已调用send方法进行请求
3：正在接收数据（接收到一部分），客户端已经接收到了一部分返回的数据
4：接收完成，客户端已经接收到了所有数据
status：http响应状态码
200代表成功获取服务器端数据
404未找到页面等等
statusText：http响应状态文本
reponseText：如果服务器端返回字符串，使用responseText进行接收
responseXML：如果服务器端返回XML数据，使用responseXML进行接收
onreadystate change：当readyState状态码发生改变时所触发的回调函数

方法

open（method，url，async）：初始化Ajax对象（打开）
method:http请求方式，get/post url：请求的服务器地址
async：布尔值，ture代表异步请求，false代表同步请求；
setRequestHeader（header，value）：设置请求头信息
header：请求头名称 value：请求头的值
send（content）：发送Ajax请求
content：如果是get请求时，此参数为null；如果是post请求时，此参数就是要传递的数
注意：所有相关的事件绑定必须在调用send()方法之前进行。

同步和异步

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function f1(){
            var xhr = new XMLHttpRequest();
                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>
</body>
</html>