AJAX——入门

前端之家收集整理的这篇文章主要介绍了AJAX——入门前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

一、简介

AJAX=Anchronous JavaScript and XML(异步的JavaScript和XML),是一种用于创建快速动态网页的技术。

AJAX通过在后台与服务器进行少量数据交换,在无需重新加载整个页面的情况下,能够更新部分网页的技术。

与传统网页对比:传统的网页(不使用AJAX)如果需要更新内容,必须重载整个网页。

二、XmlHttpRequest对象

AJAX的核心是JavaScript对象XmlHttpRequest。所有现代浏览器均支持XMLHttpReques对象(IE5和IE6使用ActiveXObject)。

XMLHttpRequest用于在后台与服务器交换数据。

1.建XMLHttpRequest对象:

        //创建XMLHttpReques对象的语法
        variable = new XMLHttpRequest();

        //老版本的Internet Explorer(IE5和IE6)使用ActiveX对象
        variable = new ActiveXObject("Micriosoft.XMLHTTP");

        //为了应对所有的现代浏览器,包括IE5和IE6,请检查浏览器是否支持XMLHttpRequest对象。
        //如果支持,则创建XMLHttpRequest对象。如果不支持,则创建ActiveXObject;
        var xmlhttp;
        if (window.XMLHttpRequest) {
            xmlhttp = new XMLHttpRequest();
        } else {
            xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
        }

2.XMLHttpRequest对象和服务器交换数据:

	//将请求发送到服务器,使用XMLHttpRequest对象open()和send()方法。
        //GET方式      
        xmlhttp.open("GET","test1.txt",true);
        xmlhttp.send();
        //POST方式
        xmlhttp.open("POST","test.asp",true);
        xmlhttp.send();

说明:

open(method,url,async):规定请求的类型、URL以及是否异步处理请求

method:请求的类型:GET或POST

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

2.在以下情况中,使用POST请求:

无法使用缓存文件(更新服务器上的文件数据库

向服务器发送大量数据(POST没有数据量限制)

发送包含未知字符的用户是,POST比GET更稳定也更可靠


url:文件在服务器上的位置。该文件可以使任何类型的文件,比如.txt和.xml,或者服务器脚本文件,比如.asp和.PHP(在传回响应之前,能够在服务器上执行该任务)

为避免得到的是缓存的结果,向URL添加一个唯一的ID,如下:

	xmlhttp.open("get","test1.asp?t="+Math.random(),true);
        xmlhttp.send();

async:true(异步)或false(同步)

当使用async=true时,请规定在响应出于onreadystatechange事件中的就绪状态时执行的函数;

	xmlhttp.onreadystatechange = function() {
            if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
                document.getelementById("myDIV").innerHTML = xmlhttp.responseText;
            }
        }
        xmlhttp.open("GET","test.txt",true);
        xmlhttp.send();


三、响应

如需获得来自服务器的响应,请使用XMLHttpRequest对象的responsText或responseXML属性

responseText:获得字符串形式的响应数据。

responseXML:获得XML形式的响应数据。

	//responseText属性返回字符串形式的响应
        document.getElementById("myDiv").innerHTML = xmlhttp.responseText;
        //responseXML属性返回XML,需要解析
        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;

AJAX学习网站:http://www.w3school.com.cn/ajax/index.asp

原文链接:https://www.f2er.com/ajax/164865.html

猜你在找的Ajax相关文章