从小片段代码学习ajax入门

完整代码：

<!DOCTYPE html>
<html>
<body>
<div id="demo">
<h1>XMLHttpRequest 对象</h1>
<button type="button" onclick="loadDoc()">修改内容</button>
</div>
<script>
function loadDoc() {
    var xhttp = new XMLHttpRequest();                //1
    xhttp.onreadystatechange = function() {          //2
        var el = document.getElementById("demo");    //3
        if (this.readyState == 4 && this.status == 200) {
                                                     //4
            el.innerHTML = this.responseText;        //5
        }
    };
    xhttp.open("GET", "/demo/js/ajax_info.txt", true);//6
    xhttp.send();                                     //7
}
</script>
</body>
</html>

代码的目的是点击按钮后改变显示的文本，显示 " / demo / js / ajax_info.txt " 中的内容

AJAX 即Asynchronous JavaScript And XML（异步JS和XML）
ajax通过与服务器交换数据更新网页而不需要重新加载整个页面。

ajax的工作流程：（用B代表浏览器，用S代表服务器）

鼠标点击等网页事件（B）
创建XMLHttpRequest对象（B）
XMLHttpRequest对象向S发送请求HttpRequest（B -> S）
S处理HttpRequest请求（S）
S创建响应并将数据返回B（S -> B）
JavaScript处理响应的数据（B）
页面更新（B）

1. 创建XMLHttpRequest对象

var xhttp = new XMLHttpRequest();                //1

XMLHttpRequest对象有以下几种方法：

new XMLHttpRequest();         //创建对象
abort()                       //取消当前请求
send()                        //将请求发送到服务器，使用GET
send("string")                //将请求发送到服务器，使用POST
getAllResponseHeaders()       //返回头部信息
getResponseHeader()           //返回特定头部信息
setRequestHeader(header, value)//向请求添加http头部
        /*  header规定头部名称， value规定头部值   */
open(method, url, async, user, psw) //规定请求
        /*
            method：请求类型 GET 或 POST
            url：文件位置
            async：true（异步）或 false（同步）
            user：可选的用户名称
            psw：可选的密码
        */

2. 向服务器发送请求

xhttp.open("GET", "/demo/js/ajax_info.txt", true);//6
xhttp.send();                                     //7

三种情况下应该用POST：

需要更新服务器上的数据库时，即不是对缓存操作；
由于POST无大小限制所以向服务器发送大量数据时；
发送用户输入的字符时；

当open方法的async参数为true时表示异步发送：
JS在等待服务器响应时可以执行其他脚本，当响应就绪时再处理响应

3. 服务器响应-定义readystate改变时的操作

xhttp.onreadystatechange = function() {          //2
       var el = document.getElementById("demo");    //3
       if (this.readyState == 4 && this.status == 200) {
                                                    //4
           el.innerHTML = this.responseText;        //5
       }
   };

XMLHttpRequest对象有以下属性：

readyState  保存XMLHttpRequest的状态
/*  0：请求未初始化
    1：服务器连接已建立
    2：请求已收到
    3：正在处理请求
    4：请求已完成且响应已就绪  */   

onreadystatechange  定义当 readyState 属性发生变化时被调用的函数
//每当 readyState 发生变化时就会调用 onreadystatechange 函数

responseText  以字符串返回响应数据
responseXML  以XML返回响应数据 

status   返回请求的状态号
/*200: "OK" 403: "Forbidden" 404: "Not Found" 详见http状态码*/

statusText     返回状态文本，比如 "OK" 或 "Not Found"

xhttp.onreadystatechange = function() { /* 定义当readyState改变时要做什么 */};

函数内部为：

var el = document.getElementById("demo");
//通过dom操作获取id为"demo"的<div></div>

if (this.readyState == 4 && this.status == 200) {
el.innerHTML = this.responseText;
}
//如果请求完成且响应已就绪同时满足返回请求OK 则改变文本
//以字符串返回响应数据
//应该返回的数据在 步骤2. 发送请求 中已经指定了路径

从小片段代码学习ajax入门

1. 创建XMLHttpRequest对象

2. 向服务器发送请求

3. 服务器响应-定义readystate改变时的操作

推荐阅读更多精彩内容