ajax学习01

来源：互联网发布：零基础学c语言pdf下载编辑：程序博客网时间：2024/06/05 06:02

ajax：Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）

AJAX 不是新的编程语言，而是一种使用现有标准的新方法。

AJAX最大的优点是在不重新加载整个页面的情况下，可以与服务器交换数据并更新部分网页内容，AJAX 不需要任何浏览器插件，但需要用户允许JavaScript在浏览器上执行。

1、XMLHttpRequest对象

IE5和IE6使用ActiveXObject对象

在使用之前需要先判断一下是否支持

1

2

3

4

5

6

7

var xmlhttp;
if (window.XMLHttpRequest){
    xmlhttp = new XMLHttpRequst();
}else{
    //IE5,IE6
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
}

向服务器发送请求

xmlhttp.open("GET" , url , true);

xmlhttp.send();

麦库截图20161507152426472.jpg

GET POST请求如何区别？

1、GET一般用于获取/查询资源信息，不会对资源产生影响，如同查询数据库一样，不对更改数据，而POST一般用于更新资源信息。

2、表面现象，GET请求的数据是依附在url之后的，如/login.action?username=admin&password=123，如果有中文，则会把字符串用BASE64加密；而POST请求则是将请求数据放在HTTP的包体当中，无法从浏览器中看到。

3、GET请求最大字节数为1024（这里不准确，长度是更具url的长度定的，不同的浏览器和不同的操作系统对url的长度限制不同，但是都有限制），而POST请求理论上没有限制，与第二点有关。

4、JSP中GET请求获取参数使用request.getParameter("key")来获取，而POST请求使用的是表单form，Request.Form。

5、POST请求比GET请求安全，与第二点有关，GET请求是将数据直接展示在url上，可以直接看到。

注意事项！

1、GET比POST快，使用于大部分情况；

2、在以下几个场景，需要使用POST请求

1）无法使用缓存文件（需要更新服务器上的文件或者数据库）

2）向服务器发送大量数据，POST请求没有数据量限制

3）发送包含未知字符的用户输入时，POST 比 GET 更稳定也更可靠

完整的ajax程序：

<!DOCTYPE>
<html>
    <head>
        <title>ajax学习</title>
        <script>
            function loadXMLDoc(){
                /*ajax执行语句*/
                var xmlhttp;
                if(window.XMLHttpRequest)
                {
                    //主流浏览器
                    xmlhttp = new XMLHttpRequest();
 
                }else
                {
                    //IE6 , IE5浏览器
                    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
                }
 
                //发送请求到服务器
                xmlhttp.onreadystatechange=function(){
                    if(xmlhttp.readyState == 4 && xmlhttp.status == 200)   
                    {
                        document.getElementById("mydiv").innerHTML = xmlhttp.responseText; 
                    }
                }
 
                xmlhttp.open("GET" , "/try/ajax/demo_get.php" , true);//get请求， url地址， 异步
                xmlhttp.send();//发送
 
 
            }
 
 
 
        </script>
 
 
    </head>
    <body>
 
        <p>这一段文本是</p>
        <div id="mydiv">
 
        </div>
        <br>
        <br>
        <input type="button" onclick="loadXMLDoc()" value="点击加载">
 
 
 
    </body>
 
 
 
 
</html>

为了防止每次请求获取的都是缓存的结果，可以在url后面加上随机数，保证每次请求都不一样

1

2

xmlhttp.open("GET" , "/try/ajax/demo_get.php?t="Math.Random() , true);

xmlhttp.send();

根据上面分析GET和POST请求区别，可以在url后面加上请求的信息

1

2

xmlhttp.open("GET" , "/try/ajax/demo_get.php?username=admin&password=123" , true);

xmlhttp.send();

POST请求则url后面没有请求信息

1

2

xmlhttp.open("POST" , "/try/ajax/demo_get.php" , true);

xmlhttp.send();

POST请求提交表单信息，需要通过setRequestHeader来设置HTTP头。send时将请求信息send出去

1

2

3

xmlhttp.open("POST" , "/try/ajax/demo_get.php" , true);//请求， url地址， 异步
xmlhttp.setRequestHeader("Content-type" , "application/x-www-form-urlencoded");
xmlhttp.send("username=admin&password=123");//发送

open方法异步标志， true？false?

XMLHttpRequest对应如果需要使用open()方法时，参数asysnc必须为true！

ajax的异步原理是：

在等待服务器响应时执行其他脚本
当响应就绪后对响应进行处理

上面的ajax代码中，当asysnc为true时，在响应函数onreadstatechange事件中，当处于就绪状态时执行的方法。

1

2

3

4

5

6

7

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

服务器响应

1、获取来自服务器的相应之后，获取相应数据，使用XMLHttpRequst的responseText或者responseXML属性来获取响应数据。

麦库截图20161607160921985.jpg

responseText可以直接用于html页面显示

responseXML需要解析

xmlhttp.onreadystatechange=function(){
                    if(xmlhttp.readyState == 4 && xmlhttp.status == 200)   
                    {
                        //document.getElementById("mydiv").innerHTML = xmlhttp.responseText;
                        xmlDoc = xmlhttp.responseXML;
                        txt = "";
                        x = xmlDoc.getElementsByTagName("ARTIST");
                        for(i=0 ; i<x.length;i++)
                        {
                            txt = txt + x[i].childNodes[0].nodeValue + "<br>";
                        }
                        document.getElementById("mydiv").innerHTML = txt;
                    }
                }

onreadystatechange()事件函数

当XMLHttpRequest对象的readyState改变时，会触发改事件

readyState存放着XMLHttpRequest的状态信息

麦库截图20161607164507621.jpg

从上图可以看出，onreadystatechange事件会被触发5次

1111

0 0