Web基础复习——AJAX

2019-04-08 本文已影响0人哈尼橘橘

AJAX是什么

AJAX，Asynchronous JavaScrpt and XML，异步的JS和XML。
不是新的编程语言，而是一种基于现有标准的新方法。
这种方法可以在不重新加载整个页面的条件下，完成与服务器交换数据并更新部分网页内容。
简单的来说，这个方法可以用来创建快速动态网页。

AJAX应用程序与浏览器及平台无关。
先导知识：HTML和XML、JS基础、DOM。
（小声咕叽叽，AJAX原来不念阿贾克斯，念欸贾科斯。）

工作原理

创建一个XMLHttpRequest对象；
浏览器发送Http请求至服务器；
服务器返回响应数据；
浏览器使用JS接收数据并更新页面内容。

创建XMLHttpRequest对象

它用于在后台与服务器交换数据。
IE5和IE6使用ActiveX对象。
语法:
variable = new XMLHttpRequest();
variable = new ActiveXObject("Microsoft.XMLHTTP");

向服务器发送请求

语法：
xmlhttp.open(method,url,async);
xmlhttp.send(string);

method请求的类型，GET or POST；
url：文件在服务器上的位置；
async：异步（true）或同步（false）；
string：仅在POST请求时填写该参数；

如果使用AJAX的话，async参数必须设置为true。

服务器响应

获取服务器响应，语法：
variable = xmlhttp.responseText;获得字符串形式的相应数据。
variable = xmlhttp.responseXML;获得XML形式的相应数据。

XMLHttpRequest对象属性

onreadystatechange
存储函数/函数名，当readyState属性改变时，就会调用该函数。
readyState
存储XMLHttpRequest的状态。

0：请求未初始化
1：服务器连接已建立
3：请求已接收
4：请求处理中
5：请求完成，且响应已就绪
status
返回页面状态。
按需寻求度娘即可。

实例：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>demo</title>

    <script type="text/javascript">
        function demo(){
            var xmlhttp;

            //创建XMLHttpRequest对象
            if (window.XMLHttpRequest) {
                xmlhttp=new XMLHttpRequest();
            }else {
                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
            }

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

            xmlhttp.open("GET","demo1.txt",true);
            xmlhttp.send();
        }
    </script>
</head>
<body>
    <div id="myDiv"><p>使用 AJAX 修改文本内容</p></div>
    <button type="button" onclick="demo()">修改</button>
</body>
</html>

运行结果：

AJAX在实际应用时，与数据库等相结合都是可以的，基本结构变化不大。