Ajax基础入门

一、ajax是什么？

1、ajax 的全称是Asynchronous JavaScript and XML，其中，Asynchronous 是异步的意思。 
2、是7种技术的综合，它包含了：JavaScript、xml、xstl、xhtml、dom、 xmlhttprequest、css   
3、ajax是一个与服务器端语言无关技术
4、ajax返回的数据格式（文本格式、xml、json）
5、作用：
        1、页面五刷新的动态数据交互
        2、局部刷新页面
        3、界面的美观
        4、对数据库的操作
        5、可以返回简单的文本格式，也可以返回xml文件格式、json数据格式
      
6、原理
        数据库
         ↑ ↓
         ↑ ↓
        服务器
          ↑ ↓
http请求  ↑ ↓  http响应（文本/json/xml）
          ↑ ↓
     创建ajax引擎对象
      （浏览器）       相当于是一个代理 （帮我买东西，这个就类似ajax 我自己干自己事情）
    (XmlHttpRequest)
         ↑ ↓
         ↑ ↓
         页面

二、传统三种方式浏览器向服务器发送请求

1、url 回车 刷新
2、特定元素href或者src
3、表单

三、发送Ajax

// 1. 创建一个 XMLHttpRequest 类型的对象 —— 相当于打开了一个浏览器
var xhr = new XMLHttpRequest()

// 2. 打开与一个网址之间的连接 —— 相当于在地址栏输入访问地址
xhr.open('GET', './time.php')

// 3. 通过连接发送一次请求 —— 相当于回车或者点击访问发送请求
xhr.send(null)

// 4. 指定 xhr 状态变化事件处理函数 —— 相当于处理网页呈现后的操作
xhr.onreadystatechange = function () {
// 通过 xhr 的 readyState 判断此次请求的响应是否接收完成
    if (this.readyState === 4) {
    // 通过 xhr 的 responseText 获取到响应的响应体
        console.log(this)
    }
}

四、状态码

0:初始化请求代理对象
1:open方法已经调用,建立一个与服务端特定端口的连接
2:已经接受到响应报文的响应头,但拿不到题体
3:正在下载响应报文的响应体，有可能响应体为空，也有可能不完整 // 在这里处理响应体不保险
4: 一切ok 整个响应报文都下载下来

五、请求方法

get方法:通常在一次 GET 请求过程中，参数传递都是通过 URL 地址中的 ? 参数传递。

HTML
<ul id="list"></ul>

JS
var listElement = document.getElementById('list');

var xhr = new XMLHttpRequest();
// 这里任然是使用URL中问号参数传递数据
xhr.open('GET', 'users.php');
xhr.send(null);
xhr.onreadystatechange = function () {
    if (this.readystate != 4) return
    console.log(this.responseText)
    var data = JSON.parse(this.responseText)
    for (var i = 0; i < data.length; i ++) {
        var liElement = document.createElement('li');
        liElement.innerHTML = data[i].name;
        // 设置每个元素的id
        liElement.id = data[i].id
        listElement.appendChild(liElement)
        listElement.children[i].addEventListener('click', function () {
            // TODO： 通过ajax操作获取对应的信息  
            // 如何获取当前被点击元素的ID
            var xhr1 = new XMLHttpResquest();
            xhr1.open('GET', 'users.php?id'+this.id);
            xhr1.send(null);
            xhr1.onreadystatechange = function () {
                if (this,readystate != 4) return;
                var obj1 = JSON.parse(this.responseText)
                alert(obj1.age)
            }
        }) 
    }
}

// 给每一个li注册一个点击事件
// 应为li后来动态创建,不能在这里动态生成  应该移上面
// for (var i = 0; i < listElement.children.length; i ++) {
//    listElement.children[i].addEventListener('click', function () {
//        console.log(11)
 //   })
//}

Post方法：请求过程中，都是采用请求体承载需要提交的数据。

JS
var btn = document.getElementById('btn');
var txtUsername = document.getElementById('username');
var txtPassword = document,getElementById('password')
btn.onclick = function () {
    var username = txtUsername.value;
    var password = txtPassword .value;
    var xhr = new, XMLHttpRequest();
    xhr.open('POST', 'login.php');
    // !!!! 一定要注意 如果请求是post请求 urlencoded 格式 必须设置请求头
    xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
    // 字符串拼接
    // xhr.send('username=' + username + '&password=' + password)
    // 模板字符串
    xhr.send(`username=${username}&password=${password}`);
    xhr.onreadystatechange = function () {
        if ( this.readystate != 4) return;
        console.log(this.responseText)
    }
}