AJAX 简单理解

来源：互联网发布：为什么淘宝买家有信誉编辑：程序博客网时间：2024/06/16 16:06

AJAX 简单理解和应用

这几天做web小项目,发现没有AJAX真不方便,总是刷新整个页面确实不方便。
AJAX:

AJAX = Asynchronous JavaScript and XML（异步的 JavaScript 和 XML）。
AJAX 不是新的编程语言，而是一种使用现有标准的新方法。
AJAX 是与服务器交换数据并更新部分网页的艺术，在不重新加载整个页面的情况下。
w3cschool

AJAX干什么用的

一句话:AJAX是一种能和服务器交换数据而不用刷新页面的技术

ajax使用 XMLHttpRequest 对象和服务器交换数据,其与通过刷新获得数据的过程是差不多的(也是发送一个http请求,获得一个http响应),不同的是这种请求浏览器是后台处理(或者静默处理的)。就是浏览器悄悄的干的。然后通过DOM操作更新到页面里。
这个对象本身是封装的一个请求,有两个重要方法:

open(method,url,asyoyc)//设置请求参数
send(String)//发送请求;
setRequestHeader(header,value)//设置请求头

等于是客户端访问了一次服务器,请求一些数据,但并不刷新page,而是通过javascript DOM操作把数据更新到page 。XMLHttpRequest 是浏览器内建的对象

AJAX技术的好处是可以避免因为修改部分页面而重新加载整个页面，减少负担。最重要的是不用频繁刷新页面，体验好。

示例代码：

<DOCTYPE html><html><head>    <title>ajax demo</title>    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">    <script type="text/javascript">        //根据浏览器的不同创建XMLHttpRequest对象        function getXMLHttp(){            var xmlhttp;            if (window.XMLHttpRequest)            {// code for IE7+, Firefox, Chrome, Opera, Safari                xmlhttp=new XMLHttpRequest();            }else{// code for IE6, IE5                xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");            }            return xmlhttp;        }        function loadXMLDoc(){            //获得XMLHttpRequest对象             var xmlhttp = getXMLHttp();            //异步触发的事件,当XMLHttpResquest 对象收到服务器响应后调用            xmlhttp.onreadystatechange = function(){                //xmlhttp.readyState 是 XMLHttpRequest 的状态信息                switch (xmlhttp.readyState) {                case 0:                    console.log("请求未初始化");                    break;                case 1:                    console.log("已于服务器建立连接");                    break;                case 2:                    console.log("请求已接受");                    break;                case 3:                    console.log("请求处理中");                    break;                default:                    break;                }                if(xmlhttp.readyState==4 && xmlhttp.status==200){                    document.getElementById("data").innerHTML=xmlhttp.responseText;                }            }            /*get方式            //准备请求参数            //如果服务器认为请求的资源没有改变会发送 304 状态码             xmlhttp.open("get","/cart/DATA/data.txt",true);            //发送请求            xmlhttp.send();            */            //post方式,  post方式要自己设置http head            xmlhttp.open("post","/cart/DATA/data.txt",true);            xmlhttp.setRequestHeader("Content-type","application/x-www-form-urlencoded");            xmlhttp.send("name=zw&age=22");        }    </script></head><body>    <div id="data">        <p>some data</p>    </div>    <button type="button" onclick="loadXMLDoc()">button</button></body></html>

阅读全文

0 0