AJAX基础

AJAX简介

AJAX不是JavaScript的规范，它只是一个哥们“发明”的缩写：Asynchronous JavaScript and XML，意思就是用JavaScript执行网络请求

AJAX是一种技术方案，但并不是一种新技术。它依赖现有的CSS/HTML/JavaScript，而其中最核心的依赖是浏览器提供的XMLHttpRequest对象，是这个对象使得浏览器可以发出HTTP请求与接收HTTP响应。实现了在页面不刷新页面的情况下和服务器进行数据交互。

AJAX请求步骤

1. 创建XMLHttpRequest对象
2. 发出 HTTP 请求
3. 接收服务器传回的数据
4. 更新网页数据

第一步：创建XMLHttpRequest对象

XMLHttpRequest本身是一个构造函数，可以使用new命令生成实例。它没有任何参数

var xhr = new XMLHttpRequest();

第二步：发出 HTTP 请求

一旦新建实例，就可以使用open()方法发出 HTTP 请求

xxxxxxxxxx
xhr.open('GET', 'http://www.itbaizhan.com/page.php');
xhr.send();

第三步：接收服务器传回的数据

指定函数，监听通信状态（readyState属性）的变化

xxxxxxxxxx
xhr.onreadystatechange = handleStateChange;
function handleStateChange() {
  // ...
}

第四步：更新网页数据

xxxxxxxxxx
if (xhr.readyState === 4){
    if (xhr.status === 200){
        console.log(xhr.responseText);
    } else {
        console.error(xhr.statusText);
    }
}

完整代码

xxxxxxxxxx
var xhr = new XMLHttpRequest();
xhr.open('GET', 'http://www.itbaizhan.com/page.php');
xhr.send();
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        } else {
            console.error(xhr.statusText);
        }
    }
}

实时效果反馈

1. 下列网络请求代码中，划横线处应该填写的代码是：

xxxxxxxxxx
var xhr = new ___();
xhr.open('GET', 'http://www.itbaizhan.com/page.php');
xhr.send();
xhr.onreadystatechange = function () {
    if (xhr.readyState === 4) {
        if (xhr.status === 200) {
            console.log(xhr.responseText);
        } else {
            console.error(xhr.statusText);
        }
    }
}

A XMLHttpRequest

B onreadystatechange

C readyState

D status

答案

1=>A