AJAX常用方法详解 | 易学教程

简介

Ajax 即“Asynchronous Javascript And XML”（异步 JavaScript 和 XML），是指一种创建交互式网页应用的网页开发技术。

Ajax = 异步 JavaScript 和 XML（标准通用标记语言的子集）。

Ajax 是一种用于创建快速动态网页的技术。

Ajax 是一种在无需重新加载整个网页的情况下，能够更新部分网页的技术。

通过在后台与服务器进行少量数据交换，Ajax 可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。

传统的网页（不使用Ajax）如果需要更新内容，必须重载整个网页页面。

1.AJAX使用基本技巧和实现原理

先看一个ajax小例子：

<html>
<body>
    #设置一个事件来触发
    <div id="contentid">
        <h3>this is a ajax test!!!</h3>
        <button type="button" onclick="loadXMLDoc()" >chenge Content</button>
    </div>
    <script type="text/javascript">
        #具体AJAX实现
        function loadXMLDoc(){
            #创建XMLHttpRequest对象，它是AJAX的基础
            var xmlhttp;
            #判断浏览器是否支持XMLHttpRequest
            if(window.XMLHttpRequest)
            {
                 //  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
                 xmlhttp = new XMLHttpRequest();
            }
            else
            {
                // IE6, IE5 浏览器执行代码
                xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
            }
            #设置异步响应事件处理
            xmlhttp.onreadystatechange = function()
            {
                if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
                {
                    document.getElementById("contentid").innerHTML=xmlhttp.responseText;
                }
            }
            #例1:使用GET发送HTTP请求
            xmlhttp.open("GET","/user/?name=jack&age=33",true); #异步方式获取user信息
            xmlhttp.send() #发送请求到服务器
            #例2:使用POST发送请求
            xmlhttp.open("POST","/login_up/",false);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send("name=jack&passwd=1234");

        }
    </script>

</body>
</html>

AJAX向服务器发送请求：

1.调用open(method, url ,async)设置请求信息

2.调用send([string])发送

3.调用setRequestHeader(header,value)设置HTTP请求头

open()参数解释：

method 请求类型： GET/POST
url 请求资源路径：/index.html 、/index.html?name=jack& age=23

async是否异步 true(异步) false(同步)

#1.当async=true 异步响应需要设置onreadystatechange响应事件就绪状态的执行函数,放置在xmlhtpp.open()前面
xmlhttp.onreadystatechange = function(){
    #判断响应状态码
    if(xmlhttp.readyState == 4 && xmlhttp.status == 200)
    {
        document.getElementById("contentid").innerHTML=xmlhttp.responseText;
    }
}

#2.当async=false时，不要设置onreadystatechange函数
xmlhttp.open("GET","/article?user=jack",false);
xmlhttp.send();
document.getElementById("contentid").innerHTML=xmlhttp.responseText;

属性	描述
onreadystatechange	每当readyState改变是，就会触发这个事件
readyState(XMLHttpRequest的一个属性）	保存XMLHttpRequest的状态： 0：请求未初始化1：服务器连接已建立 2：请求已接收 3：请求处理中 4：请求已完成，且响应已就绪
status(XMLHttpRequest的一个属性)	200: "OK" 404:页面未找到

其中：onreadystatechange被触发5次(0-4),readyState每一次变化都会触发

send()参数解释：

只有当method=POST时，可以使用send\("name=jack&age=23"\)发送表格内容

POST和GET:

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

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

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

服务器响应：

属性	描述
responseText	文本形式的响应数据
responseXML	XML形式的响应数据

来源：https://www.cnblogs.com/lonelyhiker/p/8609789.html

标签

ajax

xmlhttp