day57——ajax之初体验

转行学开发，代码100天——2018-05-12

今天是一个特别的日子——首先是母亲节，在此也祝福亲爱的妈妈健康长寿。其次今天是汶川大地震10周年，10年过去了，经历过苦难的人更加坚毅勇敢地面向未来！

祝福，祝愿！

今天记录的是一节ajax的学习笔记。初步了解和尝试ajax的使用。

关于ajax的基本概念就不在此赘述了。直接说明ajax的应用步骤。

1.创建ajax对象

// Old compatibility code, no longer needed.
if (window.XMLHttpRequest) { // Mozilla, Safari, IE7+ ...
    httpRequest = new XMLHttpRequest();
} else if (window.ActiveXObject) { // IE 6 and older
    httpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}

这里，需要考虑兼容性，此段代码可以作为基本代码段直接复用。

2.连接到服务器

其基本语句结构为：httpRequest.open（方法，文件，异步传输）;
如：

httpRequest.open('GET', 'http://www.example.org/some.file', true);

参数1：连接服务器的常用方法有“GET”,"POST"方法。

区别一：

get是从服务器上获取的数据。

podt则是向服务器传送数据。

区别二：

get是把参数数据队列加到提交表单的ACTION属性所指的URL中，值和表单内各个字段一一对应，在URL中可以看到。

post是通过HTTP post机制，将表单内各个字段与其内容放置在HTML HEADER内一起传送到ACTION属性所指的URL地址。用户看不到这个过程。

区别三：

get方式，服务器端用Request.QueryString获取变量的值。

post方式，服务器端用Request.Form获取提交的数据。

区别四：

get传送的数据量较小，不能大于2KB。

post传送的数据量较大，一般被默认为不受限制。但理论上，IIS4中最大量为80KB，IIS5中为100KB。

区别五：

get安全性比较低。

post安全性较高。

参数2：请求文件

参数3：true 异步传输（默认值）；false 同步传输

3.发送请求

httpRequest.send();

4.接收返回值

httpRequest.onreadystatechange = nameOfTheFunction;

nameOfTheFunction 用于对返回值进行下一步处理：
 readyState

if (httpRequest.readyState === XMLHttpRequest.DONE) {
    // Everything is good, the response was received.
} else {
    // Not ready yet.
}

readyState 有以下几个值：

0 (uninitialized) or (request not initialized)
1 (loading) or (server connection established)
2 (loaded) or (request received)
3 (interactive) or (processing request)
4 (complete) or (request finished and response is ready)

接着下一步是对HTTP响应返回值进行区分处理：

status

if (httpRequest.status === 200) {
    // Perfect!
} else {
    // There was a problem with the request.
    // For example, the response may have a 404 (Not Found)
    // or 500 (Internal Server Error) response code.
}

返回结果

responseText 和 responseXML

httpRequest.responseText – returns the server response as a string of text
httpRequest.responseXML – returns the response as an XMLDocument object you can traverse with JavaScript DOM functions

到此一个基本的ajax应用框架就出现了，下面的展示一个基本的例子

<!DOCTYPE html>
<html>
<head>
    <title>my first ajax program</title>
    <script type="text/javascript">
        window.onload =function(){
            var httpRequest ;
            var oBtn = document.getElementById('btn');
            oBtn.onclick = function()
            {
                // 1.创建ajax对象
                //非ie6
                if (window.XMLHttpRequest) {
                    httpRequest = new XMLHttpRequest();
                    alert(httpRequest);
                }else
                {
                    var httpRequest = new ActiveXObject('Microsoft.XMLHttp');
                    alert(httpRequest);
                }
            //2.连接到服务器
            httpRequest.open('GET','a.txt',true);
            //3.发送请求
            httpRequest.send();
            //4.接收返回值
            httpRequest.onreadystatechange = function(){
                if (httpRequest.readyState==4) {
                    if (httpRequest.status==200) {
                        alert("OK"+httpRequest.responseText);
                    }
                }
            }
        }
    }
</script>

</head>
<body>
    <input id="btn" type="button" name="" value="读取">
</body>
</html>

day57——ajax之初体验

猜你喜欢