码迷,mamicode.com
首页 > 其他好文 > 详细

AJAX

时间:2014-08-14 16:00:58      阅读:191      评论:0      收藏:0      [点我收藏+]

标签:des   http   java   使用   os   io   文件   数据   

AJAX学习
名称:AJAX=Asynchronous JavaScript and Xml (异步的JavaScript和Xml)
特点:与服务器交互更新部分网页且不用重新加载整个页面
1:创建XMLHttpRequest对象
    XMLHttpRequest对象用于在后台和服务器交换数据
    现代浏览器IE7+、Firefox、Chrome、Safari、以及Opera均内建XMLHttpRequest
    IE5和6用ActiveXObject
    
    var xmlhttp;
    if(window.XMLHttpRequest){
        xmlhttp = new XMLHttpRequest();
    }else{
        xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
    }
注: window是顶级对象(除object,function等)window代表了一个窗体,XMLHttpRequest是window的一个属性用来区分浏览器

2:XMLHttpRequest向服务器发送请求


    xmlhttp.open(method,url,async);
    xmlhttp.send();


    
    方法                                         描述
    
    open(method,url,async)           规定请求的类型、URL 以及是否异步处理请求。
                                             method:请求的类型;GET 或 POST
                                                 url:文件在服务器上的位置
                                               async:true(异步)或 false(同步)

    send(string)                             将请求发送到服务器。
                                              string:仅用于 POST 请求

 


    get和post的区别:
    1>.get简单更快
    2>.在以下情况中,请使用 POST 请求:
        1.无法使用缓存文件(更新服务器上的文件或数据库)
        2.向服务器发送大量数据(POST 没有数据量限制)
        3.发送包含未知字符的用户输入时,POST 比 GET 更稳定也更可靠
    
        
    如果需要像 HTML 表单那样 POST 数据,请使用 setRequestHeader() 来添加 HTTP 头。然后在 send() 方法中规定您希望发送的数据:
        方法                                             描述
        setRequestHeader(header,value)           向请求添加 HTTP 头。
                                                    header: 规定头的名称
                                                    value: 规定头的值

        
        
        eg:
            xmlhttp.open("POST","ajax_test.asp",true);
            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");
            xmlhttp.send("fname=Bill&lname=Gates");
            
3:XMLHttpRequest响应
    通过XMLHttpRequest对象的responseText(获得字符串形式的响应数据)或者responseXML(获得XML形式的响应数据)
    若服务器响应的是XML,则对XML对象进行解析
        eg:    
            xmlDoc=xmlhttp.responseXML;
            var txt="";
            var x=xmlDoc.getElementsByTagName("tittle");
            for(var i=0;i<x.length;i++){
                txt=txt + x[i].childNodes[0].nodeValue + "<br />";
                //x[i].childNodes[0].nodeValue 获取元素第一个子节点的值
            }
            document.getElementById("myDiv").innerHTML=txt;
        
4:AJAX - onreadystatechange 事件
    
    XMLHttpRequest对象的三个属性:
    
    
    属性                                  描述

    onreadystatechange                存储函数(函数名),每当readyState属性发生改变时,就会调用该函数。
    readyState                          存有XMLHttpRequest的状态,从0到4发生变化
                                            0:请求未初始化;
                                            1:服务器连接已建立
                                            2:请求已接收
                                            3:请求处理中
                                            4:请求完成且响应就绪
                                        
    status                              200:“OK”
                                        404:未找到页面


    当readyState等于4且status为200时,表示响应已就绪
    
    
    
    Callback函数
    
    如果您的网站上存在多个 AJAX 任务,那么您应该为创建 XMLHttpRequest 对象编写一个标准的函数,并为每个 AJAX 任务调用该函数。
    该函数调用应该包含 URL 以及发生 onreadystatechange 事件时执行的任务(每次调用可能不尽相同):
    
    <script type="text/javascript">
        var xmlhttp;
        function loadXMLDoc(url,cfunc)
        {
        if (window.XMLHttpRequest)
          {// code for IE7+, Firefox, Chrome, Opera, Safari
          xmlhttp=new XMLHttpRequest();
          }
        else
          {// code for IE6, IE5
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
          }
        xmlhttp.onreadystatechange=cfunc;
        xmlhttp.open("GET",url,true);
        xmlhttp.send();
        }
        function myFunction()
        {
        loadXMLDoc("/ajax/test1.txt",function()
          {
          if (xmlhttp.readyState==4 && xmlhttp.status==200)
            {
            document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
            }
          });
        }
    </script>

AJAX,布布扣,bubuko.com

AJAX

标签:des   http   java   使用   os   io   文件   数据   

原文地址:http://www.cnblogs.com/sayy/p/3912349.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!