@GivenCui 2016-07-21T20:17:52.000000Z 字数 6641 阅读 644

第五课 AJAX

js高级

客户端与服务器交互模型

HTTP协议

HTTP协议

超文本传输协议(Hyper Text Transfer Protocol)

HTTP协议规定了客户端和服务器之间数据通信的传输协议.让客户端和服务器端能够正确的沟通.

HTTP协议通信的两大步骤 :

请求 : 客户端向服务器索取数据

get请求 : 明文请求,在URL后面以?开头,参数之间&隔开,对用户可见.

post请求 : 密文请求,请求信息会放在请求体中,用户不可见
【总结】:如果请求数据量特别大或者需要上传数据,必须用POST请求. 如果数据很机密,必须用POST. 如果是简单的查询数据,建议用GET请求.
如果是增、删、改等操作，建议使用POST请求。

响应 : 请求后服务器会反馈给客户端相应的数据

同步交换和异步交换

同步请求 : 相当于请求一次后,要等到这次请求完毕后,等到服务器的相应后,才能进行下一次请求.
异步请求 : 请求一次后不需要等到这次请求完毕就可以进行下一次请求.

AJAX

AJAX基本概念

AJAX (Asynchronous JavaScript and XML)

基于JavaScript和XML的异步交换技术, 可以利用JavaScript语言向服务器发送异步请求,响应后的数据是XML格式的或任何数据格式,包括文本文件或json文件等。
AJAX最大的特点就是, 可以异步请求, 局部刷新代码.

AJAX的编程步骤

创建请求对象

创建核心的XMLHttpRequest请求对象, AJAX编程都是利用JS的这个请求对象进行编程的。

注意： XMLHttpRequest请求对象，对浏览器的支持不一样。


// 1) 大部分主流浏览器都支持XMLHttpRquest对象(IE7+)
var xhr = new XMLHttpRequest();
// 2) IE6和IE5中共用3个版本
var xhr = new ActiveXObject("MSXML2.XMLHttp.6.0");
var xhr = new ActiveXObject("MSXML2.XMLHttp.3.0");
var xhr = new ActiveXObject("MSXML2.XMLHttp");
// 3）兼容性写法
/*
IE5+ 共用3个版本
new ActiveXObject("MSXML2.XMLHttp.6.0");
new ActiveXObject("MSXML2.XMLHttp.3.0");
new ActiveXObject("MSXML2.XMLHttp");
IE7+,及主流
new XMLHttpRequest();
 */
function createXHR () {
    // IE7+, 及主流浏览器
    if (typeof XMLHttpRequest != "undefined") {
        return new XMLHttpRequest();
    // IE5, IE6的三个版本
    } else if (typeof ActiveXObject != "undefined") {
        if ( typeof arguments.callee.activeXString != "string") {
            var versions = ["MSXML2.XMLHttp.6.0", "MSXML2.XMLHttp.3.0", "MSXML2.XMLHttp"];
            for (var i = 0, len = versions.length; i < len; i++) {
                try {
                    new ActiveXObject(versions[i]);
                    arguments.callee.activeXString = versions[i];
                    break;
                } catch (ex) {
                    // 跳过
                }
            }
        }
        return new ActiveXObject(arguments.callee.activeXString);
    // 浏览器不支持XHR
    } else {
        throw new Error("No XHR object available.");
    }
}
/*
用法: 
var xhr = createXHR();
 */

2.打开与服务器的链接
- 创建完请求对象后, 调用请求对象的open()方法,该方法可以和服务器建立连接.
open( method, url, async)
参数解释:
method : 请求方式 get或post
url : 要请求服务器的路径, 如果用的是GET方式请求, 那么参数就加到URL后面.
async : 表示用的是异步请求,还是同步请求,默认是异步

var xhr = new XMLHttpRequest();
xhr.open("GET", "10.xxx.xxx.xx:8080/xxx.html",true);

3.发送链接
请求对象调用open()方法打开请求后,再利用请求对象调用send()方法,发送请求.
如果你用的是GET方式请求的话,send()方法的参数为空,也可以写null.如果用的是POST请求,那么请求参数会放在这里.

// GET 方式
var xhr = new XMLHttpRequest();
xhr.open("GET", "10.xxx.xxx.xx:8080/xxx.html",true);
xhr.send(null);// 写null的原因是,兼容火狐浏览器.

// POST 方式
var xhr = new XMLHttpRequest();
xhr.open("POST", "create.php",true);    // true 表示异步加载
xhr.setRequestHeader("Content-type","application/x-www-form-urlencoded");
xhr.send("name=王二狗&sex=男"); // 服务器中创建信息

4.接收服务器的响应
当请求对象调用完send()方法后就可以等待服务器的响应了,请求对象有一个onreadystatechange事件,这个事件会根据请求对象的状态而触发.

请求有5种状态 (状态码):

0: 表示初始化未完成, 只是创建了XMLHttpRequest请求对象, 还未调用open()方法.
1: 请求开始, 开始调用open()方法, 但没调用send()方法
2: 请求发出,就是已经调用了send()方法
3: 开始接受服务器的响应
4: 读取服务器的响应 (响应彻底结束)

onreadystatechange事件会在状态码为 2, 3, 4的时候触发.

利用请求对象的readyState属性查看状态码

开发的时候,我们一般只关心状态码为4的时候.
还关心服务器响应时候的状态码:
常见的有200,404,500
200: 响应正常
404: 链接失效
500: 服务器端页面异常

我们可以利用请求对象的status属性查看服务响应状态码

XMLHttpRequest 对象的三个重要的属性

属性	描述
onreadystatechange	存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。
readyState	0,1,2,3,4
status	200: "OK",404: 未找到页面

课上的完整demo

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <style type="text/css">
        table{
            margin: 20px auto;
            width: 500px;
            border-collapse: collapse;
        }
        td,th{
            border: 3px solid pink;
            text-align: center;
        }
        .tr0{
            background: red;
        }
        .tr1{
            background: lightgreen;
        }
    </style>
</head>
<body>
    <script type="text/javascript">
        function loadData() {
            /*
                AJAX的开发步骤
             */
            // 1. 创建请求对象
            var xhr;
            try{
                xhr = new XMLHttpRequest();
            }catch(e) {
                try{
                    xhr = new ActiveXObject("Msxml2.XMLHTTP");  // IE6
                }catch(e){
                    xhr = new ActiveXObject("Microsoft.XMLHTTP");   //  IE5 及更早版本
                }
            }
            console.log(xhr);
            // 2. 打开和服务器的连接
            xhr.open("GET","http:10.0.163.168:5500/person", true);
            // 3. 发送请求
            xhr.send();
            // 4. 接收服务器的响应
            xhr.onreadystatechange = function () {
                // console.log(xhr.readyState);
                // 需要判读,当请求对象的状态码为4并且服务器响应的状态码为200的时候再使用
                if(xhr.readyState === 4 && xhr.status === 200) {
                    // console.log("***********************");      // 测试
                    console.log(xhr.responseText);
                    // xhr.responseText 返回的是JSON格式字符串, 我们需要转换成JS的字面量对象
                    var jsObj = JSON.parse(xhr.responseText);       // JSON.parse()把JSON转换成JS字面量对象
                    console.log(jsObj);
                    // xhr.responseXML  返回的是XML格式的
                    // 刷新UI (也就是动态创建表格,插入我们请求下来的数据) 
                    // 得到表格
                    var table = document.getElementById('person_table');
                    // 遍历jsObj(是个数组)
                    for(var tempPersonIdx in jsObj){
                        // 获得每个人的对象   ===>  对应每一行
                        var tempPerson = jsObj[tempPersonIdx];
                        // 创建tr标签
                        var tr = document.createElement("tr");
                        // 给tr添加样式
                        tr.setAttribute("class","tr" + tempPersonIdx % 2);
                        // 遍历人对象的属性     ====>  有属性和td对应,有多少个属性就有几个td
                        for (var tempPersonPro in tempPerson) {
                            //创建td
                            var td = document.createElement("td");
                            // 创建文本节点
                            var tdValue = document.createTextNode(tempPerson[tempPersonPro]);
                            // 加给td
                            td.appendChild(tdValue);
                            // tr添加td
                            tr.appendChild(td);
                        }
                        // 给table添加tr
                        table.appendChild(tr);
                    }
                }
            };
        }
    </script>
    <input type="button" value="加载数据" onclick="loadData();" />
    <!-- 显示个人信息的表格 -->
    <table id = "person_table">
        <tr>
            <th>姓名</th>
            <th>年龄</th>
            <th>ID</th>
        </tr>
    </table>
</body>
</html>

HTTP状态码->HTTP Status Code详解

1xx状态码

说明:

HTTP: Status 1xx (临时响应)
->表示临时响应并需要请求者继续执行操作的状态代码。

详细代码及说明:

HTTP: Status 100 (继续)
-> 请求者应当继续提出请求。服务器返回此代码表示已收到请求的第一部分，正在等待其余部分。
HTTP: Status 101 (切换协议)
-> 请求者已要求服务器切换协议，服务器已确认并准备切换。

2xx状态码

说明:

HTTP Status 2xx (成功)
->表示成功处理了请求的状态代码;

详细代码及说明:

HTTP Status 200 (成功)
-> 服务器已成功处理了请求。通常，这表示服务器提供了请求的网页。
HTTP Status 201 (已创建)
-> 请求成功并且服务器创建了新的资源。
HTTP Status 202 (已接受)
-> 服务器已接受请求，但尚未处理。
HTTP Status 203 (非授权信息)
-> 服务器已成功处理了请求，但返回的信息可能来自另一来源。
HTTP Status 204 (无内容)
-> 服务器成功处理了请求，但没有返回任何内容。
HTTP Status 205 (重置内容)
-> 服务器成功处理了请求，但没有返回任何内容。
HTTP Status 206 (部分内容)
-> 服务器成功处理了部分 GET 请求。

4xx状态码

说明:

HTTP Status 4xx (请求错误)
->这些状态代码表示请求可能出错，妨碍了服务器的处理。

详细代码说明:

HTTP Status 400 （错误请求）
->服务器不理解请求的语法。
HTTP Status 401 （未授权）
->请求要求身份验证。对于需要登录的网页，服务器可能返回此响应。
HTTP Status 403 （禁止）
-> 服务器拒绝请求。
HTTP Status 404 （未找到）
->服务器找不到请求的网页。
HTTP Status 405 （方法禁用）
->禁用请求中指定的方法。
HTTP Status 406 （不接受）
->无法使用请求的内容特性响应请求的网页。
HTTP Status 407 （需要代理授权）
->此状态代码与 401（未授权）类似，但指定请求者应当授权使用代理。
HTTP Status 408 （请求超时）
->服务器等候请求时发生超时。
HTTP Status 409 （冲突）
->服务器在完成请求时发生冲突。服务器必须在响应中包含有关冲突的信息。
HTTP Status 410 （已删除）
-> 如果请求的资源已永久删除，服务器就会返回此响应。
HTTP Status 411 （需要有效长度）
->服务器不接受不含有效内容长度标头字段的请求。
HTTP Status 412 （未满足前提条件）
->服务器未满足请求者在请求中设置的其中一个前提条件。
HTTP Status 413 （请求实体过大）
->服务器无法处理请求，因为请求实体过大，超出服务器的处理能力。
HTTP Status 414 （请求的 URI 过长）请求的 URI（通常为网址）过长，服务器无法处理。
HTTP Status 415 （不支持的媒体类型）
->请求的格式不受请求页面的支持。
HTTP Status 416 （请求范围不符合要求）
->如果页面无法提供请求的范围，则服务器会返回此状态代码。
HTTP Status 417 （未满足期望值）
->服务器未满足”期望”请求标头字段的要求。

5xx状态码

说明

HTTP Status 5xx （服务器错误）
->这些状态代码表示服务器在尝试处理请求时发生内部错误。这些错误可能是服务器本身的错误，而不是请求出错。

代码详细及说明:

HTTP Status 500 （服务器内部错误）
->服务器遇到错误，无法完成请求。
HTTP Status 501 （尚未实施）
->服务器不具备完成请求的功能。例如，服务器无法识别请求方法时可能会返回此代码。
HTTP Status 502 （错误网关）
->服务器作为网关或代理，从上游服务器收到无效响应。
HTTP Status 503 （服务不可用）
-> 服务器目前无法使用（由于超载或停机维护）。通常，这只是暂时状态。
HTTP Status 504 （网关超时）
->服务器作为网关或代理，但是没有及时从上游服务器收到请求。
HTTP Status 505 （HTTP 版本不受支持）
-> 服务器不支持请求中所用的 HTTP 协议版本。

第五课 AJAX

目录

JS课程合集跳转链接

客户端与服务器交互模型

相关概念

HTTP协议

同步交换和异步交换

AJAX

AJAX基本概念

AJAX的编程步骤

XMLHttpRequest 对象的三个重要的属性

课上的完整demo

HTTP状态码->HTTP Status Code详解

1xx状态码

2xx状态码

4xx状态码

5xx状态码

第五课 AJAX

目录

JS课程合集跳转链接

客户端与服务器交互模型

相关概念

HTTP协议

同步交换和异步交换

AJAX

AJAX基本概念

AJAX的编程步骤

XMLHttpRequest 对象的三个重要的属性

课上的完整demo

HTTP状态码->HTTP Status Code详解

1xx状态码

2xx状态码

4xx状态码

5xx状态码

内容目录