Ajax局部刷新

1.什么是Ajax
Ajax全称为“Asynchronous JavaScript and XML”（异步JavaScript和XML）， 是指一种创建交互式网页应用的网页开发技术。用来改善用户体验。
它的本质是使用XMLHttpRequest对象异步的像服务器发送请求，服务器返回的是部分数据，而不是一个完整的页面，然后用js更改页面中的部分内容，实现页面的局部刷新。
2.获取XMLHttpRequest对象

function getXhr() {
    var xhr = null;
    if(window.XMLHttpRequest) {
        //IE6以上以及谷歌、火狐等主流浏览器支持这个对象
        xhr = new XMLHttpRequest();
    } else {
        //IE6及以下版本使用这个对象
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    return xhr;
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11

3.创建请求的两种方式

//get方式
    xhr.open("get", "login.do?flag=100", true);
//post方式
    xhr.open("post", "login.do", true);
    //这里注意一下，以post方式提交的话要设置请求的http头
    //默认是"application/x-www-from-urlencoden"方式提交，
    //如果是提交文件，则需要修改成为multipart/form-data方式提交
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

4.设置回掉函数
这里介绍XMLHttpRequest对象的两个属性readState和status
readState：请求的状态
“0”请求未初始化
“1”:服务器连接已经建立，正在发送请求
“2”:请求已接收，请求完成
“3”:请求成功，正在处理（接收数据）
“4”:请求已经完成，数据接收成功
status：服务器返回的http请求响应值（状态码）
这里介绍几个常见的状态码：
200：表示请求成功
202：表示请求被接收，但处理未完成
400：表示错误的请求
404：表示资源未找到
500：表示内部服务器错误
5.发送请求
发送请求时调用XMLHttpRequest对象的send（）方法
get请求时send()方法参数为空
post请求时send(String)方法中写请求的参数
6.发送异步请求的步骤
①获取XMLHttpRequest对象
②创建请求（调用XMLHttpRequest对象的open方法）
③设置回调函数（为XMLHttpRequest对象的onreadystatechange属性设置响应函数），主要用来根据服务器返回的数据更改页面内容
④发送请求（调用XMLHttpRequest对象的send方法）
简单示例：

//获取XMLHttpRequest对象函数
function getXhr() {
    var xhr = null;
    if(window.XMLHttpRequest) {
        xhr = new XMLHttpRequest();
    } else {
        xhr = new ActiveXObject('Microsoft.XMLHTTP');
    }
    return xhr;
}
//get方式请求
function send1() {
    var xhr = getXhr();
    xhr.open("get", "login.do?flag=100", true);
    //设置回掉函数
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            var result = xhr.responseText;
            //根据服务器返回的数据更新页面
            document.getElementById("info1").innerText = result;
        }
    };
    xhr.send();
}
//post方式请求
function send2() {
    var xhr = getXhr();
    xhr.open("post", "login.do", true);
    //设置请求的http头
    xhr.setRequestHeader("content-type", "application/x-www-form-urlencoded");
    xhr.onreadystatechange = function() {
        if(xhr.readyState == 4 && xhr.status == 200) {
            document.getElementById("info2").innerText = xhr.responseText;
        }
    };
    //请求参数
    xhr.send("flag=200");
}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9
• 10
• 11
• 12
• 13
• 14
• 15
• 16
• 17
• 18
• 19
• 20
• 21
• 22
• 23
• 24
• 25
• 26
• 27
• 28
• 29
• 30
• 31
• 32
• 33
• 34
• 35
• 36
• 37
• 38

      <link href="https://csdnimg.cn/release/phoenix/mdeditor/markdown_views-258a4616f7.css" rel="stylesheet">
              </div>