AJAX入门---五步使用XMLHttpRequest对象

简介:

         XMLHttpRequest简介:

         XMLHttpRequest对象可以在不向服务器提交整个页面的情况下,实现局部更新网页。当页面全部加载完毕后,客户端通过该对象向服务器请求数据,服务器端接受数据并处理后,向客户端反馈数据。XMLHttpRequest 对象提供了对 HTTP 协议的完全的访问,包括做出 POST 和 HEAD 请求以及普通的 GET 请求的能力。XMLHttpRequest 可以同步或异步返回 Web 服务器的响应,并且能以文本或者一个 DOM 文档形式返回内容。尽管名为 XMLHttpRequest,它并不限于和 XML 文档一起使用:它可以接收任何形式的文本文档

         五步使用XMLHttpRequest对象

         1.  建立XMLHttpRequest对象如下:

         (不同浏览器中XMLHttpRequest对象建立的方式不同:IE7以上,FireFox,Safari,Opera等中直接newXMLHttpRequest();IE6,IE5.5等则需要通过用一个正确的ActiveXObject控件名称通过new ActiveXObject(控件名)的方式)

if (window.XMLHttpRequest) {
    xmlhttp=new XMLHttpRequest();
    if (xmlhttp.overrideMimeType) {
        xmlhttp.overrideMimeType("text/xml");
    }
}else if (window.ActiveXObject) {
    var activexName=["MSXML.2.XMLHTTP.6.0","MSXML.2.XMLHTTP.5.0",
                    "MSXML.2.XMLHTTP.4.0","MSXML.2.XMLHTTP.3.0",
                    "MSXML.2.XMLHTTP","Miscrosoft.XMLHTTP"];
    for (var i = 0; i <activexName.length; i++) {
        try {
            xmlhttp=new ActiveXObject(activexName[i]);
        } catch (e) {

        }
    }
}

         2.  注册回调函数

         (设置回调函数是,不要在函数名后面加括号。加括号表示将回调函数的返回值注册给onreadystatechange属性)

xmlhttp.onreadystatechange=callback; 

         3.  使用open方法设置服务器端交互的基本信息

         (open方法最多有五个参数局,其中头三个参数是必须的)

//使用GET方式时,请求数据位于url链接中,后面的send方法的参数直接写null
xmlhttp.open("GET","Ajax?name="+ userName,true );     
 
//使用POST方式时,open方法后面需要先调用setRequestHeader方法,来设置Content-Type的值,然后调用send方法,send的参数就是请求的数据
xmlhttp.open("POST","Ajax", true); 
xmlhttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded");

         4.  设置发送的数据,开始和服务器端交互

//GET方式
xmlhttp.send(null);
 
//POST方式
xmlhttp.send("name=" + userName);

         5.  在回调函数中判断交互是否结束,响应是否正确,并根据需要获取服务器端返回的数据,更新页面的内容

         (回调函数中,最好将判断readyState和status的两个if条件,分开来写)

function callback(){
    //5.判断和服务器端的交互是否完成,还要判断服务器端是否正确返回了数据
    if (xmlhttp.readyState == 4) {
        //表示和服务器端的交互已经完成
        if (xmlhttp.status==200) {
            //表示和服务器的响应代码是200,正确的返回了数据
            //纯文本数据的接受方法 
            var message =xmlhttp.responseText;
            //Xml数据对应的Dom对象的接受方法
            //使用的前提是,服务器端需要设置content-type为text/xml
            //var domXml=xmlhttp.responseXML;


            //向div标签中填充文本内容的方法
            var div=document.getElementById("message");
            div.innerHTML=message;
        }
    }
}

         总结:

         当然通过这个小小的例子,我们只能说是经历了一个从不知道到知道的过程,初步了解了一下XMLHttpRequest对象的用法,更加深刻的理解还需要我们更加深入的学习和在实践中加以利用。



文中demo源码免费下载链接:http://download.csdn.net/detail/senior_lee/7707257

目录
相关文章
|
3月前
|
设计模式 前端开发 JavaScript
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
22 0
|
4月前
|
XML JSON 前端开发
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
Ajax技术【Ajax技术详解、 Ajax 的使用、Ajax请求、 JSON详解、JACKSON 的使用 】(一)-全面详解(学习总结---从入门到深化)
59 1
|
2天前
|
XML JSON 前端开发
学习Ajax使用异步对象发送请求
Ajax,全称Asynchronous JavaScript and XML(异步JavaScript和XML),是一种用于创建更好、更快以及交互性更强的Web应用程序的技术。
11 3
|
1月前
|
前端开发
用Promise对象实现的 Ajax
用Promise对象实现的 Ajax
7 0
|
2月前
|
XML 前端开发 JavaScript
AJAX - 创建 XMLHttpRequest 对象
AJAX - 创建 XMLHttpRequest 对象
|
3月前
|
XML 前端开发 JavaScript
AJAX - 创建 XMLHttpRequest 对象
AJAX - 创建 XMLHttpRequest 对象
|
4月前
|
设计模式 缓存 前端开发
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(下)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
16 1
|
4月前
|
前端开发 JavaScript fastjson
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)(上)
Ajax技术【Ajax 实战】(二)-全面详解(学习总结---从入门到深化)
24 1
|
4月前
|
XML JSON 前端开发
AJAX 中创建 XMLHttpRequest 对象的方法和常用属性、方法
AJAX 中创建 XMLHttpRequest 对象的方法和常用属性、方法
39 0
|
6月前
|
XML 前端开发 JavaScript
什么是Ajax和jquery
什么是Ajax和jquery
43 0