AJAX（一、基本知识）

AJAX:Asynchronous （[ə'sɪŋkrənəs; eɪ-]）Javascript （['dʒɑ:və,skrɪpt]）and XML 异步的Javascript和XML
AJAX不是新的编程语言，而是一种使用现有标准的新方法

百度百科解释：

AJAX是指一种创建交互式网页应用的网页开发技术，中文名：阿贾克斯
AJAX = 异步 Javascript和XML（标准通用标记语言的子集）。
AJAX 是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换，AJAX 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。
传统的网页（不使用 AJAX）如果需要更新内容，必须重载整个网页页面。
 
AJAX的基础：XMLHttpRequest
1.创建XMLHttpRequest对象：
variable=new XMLHttpRequest();

 

但是老版本的IE5、IE6使用ActiveX对象：

variable=new ActiveXObject("Microsoft.XMLHTTP");

 

因此为了适应所有的浏览器，包括 IE5 和 IE6，请检查浏览器是否支持 XMLHttpRequest 对象。如果支持，则创建 XMLHttpRequest 对象。如果不支持，则创建 ActiveXObject ：

var xmlhttp;
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }

2.XMLHttpRequest对象用于和服务器交换数据

如果需要将请求发送到服务器，我们使用XMLHttpRequest对象的open()和send()方法：

open(method,url,async) 

规定请求的类型，URL 以及是否异步处理请求。

  • method：请求的类型；GET 或 POST
  • url：文件在服务器上的位置
  • async：true（异步）或 false（同步）

send(string)

将请求发送到服务器。

  • string：仅用于 POST 请求

GET 还是 POST？

与 POST 相比，GET 更简单也更快，并且在大部分情况下都能用。

然而，在以下情况中，请使用 POST 请求：

  • 无法使用缓存文件（更新服务器上的文件或数据库）
  • 向服务器发送大量数据（POST 没有数据量限制）
  • 发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

下面是ajax请求本地.txt文件的全部代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>ajax请求本地.txt文件</title>
    <script>
        window.onload = function () {
            var btn = document.getElementById('btn');

            btn.onclick = function () {
                //创建XHR对象
                var xhr = new XMLHttpRequest();

                //请求的方式，地址，是否异步 test.txt和该html文件在同一级目录
                xhr.open('get', 'test.txt', true);

                //请求的确定操作，初始化，相当于搜索时，敲击的回车
                xhr.send(null);

                //请求的readyState每变化一次就执行一次onreadystatechange函数
                //其中readyState表示的是：请求/响应过程的当前活动阶段
                //readyState有如下取值
                /*
                 *   0：未初始化，尚未调用send()方法
                 *   1: 启动
                 *   2：发送
                 *   3：接收
                 *   4：完成
                 */
                xhr.onreadystatechange = function () {
                    if (xhr.readyState == 4 && xhr.status==200) {
                        alert(xhr.responseText);
                    }
                }
            };
        };
    </script>
</head>
<body>
<input type="button" id="btn" value="click">
</body>
</html>

效果：

3.AJAX——服务器响应

如需获得来自服务器的响应，请使用 XMLHttpRequest 对象的 responseText 或 responseXML 属性

responseText:获得字符串形式的响应数据。

responseXML:获得 XML 形式的响应数据。

如果来自服务器的响应并非 XML，请使用 responseText 属性。responseText 属性返回字符串形式的响应，因此可以这样使用：

document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

4.AJAX - onreadystatechange 事件

当请求被发送到服务器时，我们需要执行一些基于响应的任务。每当 readyState 改变时，就会触发 onreadystatechange 事件。readyState 属性存有 XMLHttpRequest 的状态信息:

onreadystatechange:存储函数（或函数名），每当 readyState 属性改变时，就会调用该函数。

readyState:

       存有 XMLHttpRequest 的状态。从 0 到 4 发生变化。

  •  0: 请求未初始化
  •  1: 服务器连接已建立
  •  2: 请求已接收
  •  3: 请求处理中
  •  4: 请求已完成，且响应已就绪

status:  200: "OK"     404: 未找到页面

在 onreadystatechange 事件中，我们规定当服务器响应已做好被处理的准备时所执行的任务。

当 readyState 等于 4 且状态为 200 时，表示响应已就绪：

xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
    }
  }

 

上面就是最基础的AJAX使用方法。


 

posted @ 2016-12-28 17:17  郑叶叶  阅读(354)  评论(0)  编辑  收藏  举报