AJAX基本概念

Ajax全称： Asynchronous JavaScript and XML （异步的JavaScript和XML）

XML老的标准，服务器在之前会返回XML，在2010年后，大家发现JSON使用更方便，所以异步返回的是JSON数据，而不是XML数据

• Ajax不是一门新的语言，而是一种使用已有标准的新概念
• Ajax对智能手机支持性非常好

Ajax技术会让页面局部更新，也就是HTTP请求偷偷的发出，服务器给出的响应偷偷的返回，页面局部刷新

在不刷新页面的情况下，浏览器悄悄地、异步的向服务器发送HTTP请求。服务器接收到响应后，传回数据（一般是JSON数据）。浏览器接收到数据后，通过DOM进行页面的呈现

AJAX请求的机理

基本使用

<script>
    var text = document.getElementById("text");
    var btn = document.getElementById("btn");
    btn.onclick = function () {
        // 创建一个XMLHttpRequest对象
        var xhr = new XMLHttpRequest();
        console.log(xhr)
        // 配置这个xhr对象，告诉这个对象要干什么
        xhr.onreadystatechange = function () {
            // 当xhr对象状态为4的时候
            if (xhr.readyState == 4) {
                // 让h1里面的文本为接收到的文本
                text.innerHTML = xhr.responseText
            }
        }
        // 告诉这个对象要用什么请求，请求哪个文件，是否是异步状态
        xhr.open("get", "text.txt", true);
        // 发送请求
        xhr.send(null)
    }
</script>

XMLHttpRequest对象

XMLHttpRequest对象是系统内置的对象，用系统内置的构造函数new XMLHttpRequest() ,返回的对象中封装了所有的Ajax的功能

Ajax请求的第一步

var xhr = new XMLHttpRequest();

这个构造函数IE6不兼容，IE6使用的是：

var xhr = new ActiveXObject("Microsoft.XMLHTTP")

进行能力检测的综合写法

// 是能力检测，如果支持XMLHttpRequest就使用XMLHttpRequest否则使用ActiveXObject
if (window.XMLHttpRequest) {
    var xhr = new XMLHttpRequest();
} else if (window.ActiveXObject) {
    var xhr = new ActiveXObject("Microsoft.XMLHTTP");
}

此时对象创建完毕后，所有的Ajax业务都是由xhr对象来完成

readyState状态

readyState状态值是指，运行AJAX所经历过的几种状态，无论访问是否成功都将响应的步骤，可以理解成为AJAX运行步骤

扫描二维码关注公众号，回复： 12999306 查看本文章

•  0 －（未初始化）还没有调用send()方法
• 1－（载入）已调用send()方法，正在发送请求
• 2 － （载入完成）send()方法执行完成，已经接收到全部响应内容
• 3 － （交互）正在解析响应内容
• 4 － （完成）响应内容解析完成，可以在客户端调用了

当xhr.readyState发送改变的时候，会触发onreadystatechange事件。

如果readyState为4的时候，所有的解析都已经完成了，所以我们只关心readyState它为4的时候

open方法

使用xhr.open()，作用是配置一个请求。一共有三个参数

• 第一个参数是请求的类型，值为“get”或者“post”；
• 第二个参数表示的请求的文件路径，我们一般写的是相对路径，为什么是相对路径？因为Ajax不能跨域，Ajax只能请求同服务器上的文件（跨域的问题单独说）
• 第三个参数是布尔值，表示是否使用异步。如果为true，表示异步读取这个文件false表示同步读取这个文件

send方法

使用send()方法来发出请求

send内部的参数是上行报文内容。因为get请求是没有报文，所以写null

同步和异步的概念

编程的时候，经常会出现一些事物需要占用时间，比如我们磁盘I/O，网络访问等等都会占用时间，此时有两种策略

第1种就是一直等，没有完成之前一直等待，一直等到有结果后再继续执行；    →同步

第2种，等的时候可以执行后面的程序，如果返回结果了，执行回调函数       →异步

异步语句一定要有回调函数，因为要给异步程序一个入口

目前接触过的异步语句有

setInterval(function(){},1000); 		//定时器
setTimeout(funcction(){},2000); 		//延时器
animate({},3000,function(){}) 		// jQuery的动画
xhr.open("get", "text.txt", true); 	//Ajax
xhr.send()

举几个例子 

同步的简单例子

<script>
    var a = 0;
    while (a != 5) {
        a = parseInt(Math.random() * 10)
        console.log("正在执行，", a)
    }
    console.log("该我执行了")
</script>

异步的简单例子

<script>
    var a = 0;
    setInterval(function () {
        a++;
        console.log(a)
    }, 1000)
    console.log("我x先执行了")
</script>